[HiroiSekai]

No worries, glad it worked. Good luck with your site!

[HiroiSekai]

The best way is to ensure compatibility (with most browsers) is to use the @font-face CSS rule.

If you’re using a Google font, it makes it a lot easier as you must point the CSS to a URL to grab the font from. It looks a little something like this in your CSS:

@font-face {
font-family: myFont; <- This can be any name you want
src: url(sansation_light.woff); <- paste the URL the Google font points to
}

Once you have done this, simply call font-family on anything you want to use that font, like:

a {
font-family:myFont;
}

This will naturally turn all of your a tags into this font.

This tells the browser to download and display this font when a user needs it. In the case that your font is not archived on a URL, you need to download it, FTP it to your server and point to the file in the folder you placed it in.

[HiroiSekai]

A couple things you can try/take note of:

For one, CSS doesn’t require you to do a full .span.highlighted unless you have a class of “highlighted” on multiple elements, like a div and a span together. So I would first remove the .span if highlighted always applies to span tags.

Second, I would check where you’re putting this CSS alteration. CSS is always overwritten depending on scope, meaning if another rule of this is loaded after yours, your rules are always superseded. There are two good ways to combat this. The first way is to install the Jetpack for WordPress.com plugin, which comes with a Edit CSS option. Any CSS in here has precedence most of the time, unless a theme has written above it.

In the other case, you can set a !important next to any rules to enforce that they should overwrite anything else. So in your case:

.highlighted {
border-radius:7px !important;
color:#fff !important;
margin-right:0 !important;
padding:2px 3px !important;
}

The downside to using !important everywhere is that you’ll be confused in overwriting over your !important codes. It’s not clean code. If the only other method fails, resort to this method.

Good luck!

[HiroiSekai]

1) Positive. I checked numerous times, plus when I added a new banner image without touching the gallery, it added itself automatically for some reason.

2) The only custom CSS was because the theme’s related section was appearing together with WordPress’ default related section. Since I didn’t want both, I set a display:none on one of them. I’m just wondering why the images in the shown related section are cut off.

Thanks

[HiroiSekai]

Okay, I have solved 3 and 4 after hefty troubleshooting and testing. I would just like the answer to 1 and 2 at this point.

Thank you as always.

[HiroiSekai]

Hey again,

Just a quick question about galleries:

http://hiroi-sekai.com/phoenix-wright-remnants-of-the-past/
On this page, at the bottom I have a gallery. Hovering over any image just reflects what’s said right below the image. What I would like is for the title to show up. I had a good look through the files trying to determine which PHP file affects it, but I eventually couldn’t find the code for it. How do I get a title to show on hover instead of the description?

Thank you as always.

[HiroiSekai]

That actually makes the post look more organized too, thank you very much for the details.

That solves the problem well, the additional steps are no problem for me.

Many thanks again!

[HiroiSekai]

No sorry, I just meant that’s the only page I tried it for. Only on my primary monitor where I designed the header for is showing up properly. Everywhere else like my Macbook Pro, iPad and Galaxy phone is keeping it at the full size and cropping the edges off. I would like it to scale down to fit whatever borders the current device is using.

Thank you.

[HiroiSekai]

http://wp.me/p4uAeV-30A

That’s the one I applied the fix to. Many thanks!

[HiroiSekai]

Hi again, checking the option unfortunately does nothing. On all of my other devices, the header is stretched far past the edges.

[HiroiSekai]

Yes, I understand the concept, but would this be done through CSS or PHP? I’m just not sure how to implement the row and apply it to the top while removing top spacing.

Sorry for the trouble.

[HiroiSekai]

Thanks for the information, uploading an image worked well.

As for the header, I understand what you’re getting at, but I’m not quite sure which CSS rules to utilize for that one. In order to display it on the top and always show it 100% width, what exact rules should I apply?

Many thanks again.

[HiroiSekai]

Hello, thank you for the assistance. Here is a post that is using the Fancy Header, but I need it to be responsive in the sense that it always takes up 100% width, but sizes itself down to constrain to the edges of whatever platform it is displayed on.

As for the videos, that’s understandable. Referring to my last post, is there some sort of option where iPad and Mobile users are taken to an alternate version where I can display just images or something? If not, I’ll just have to take out the MP4 files entirely, but I would ultimately prefer to have them in.

Thanks again!

[HiroiSekai]

I’m not sure of your specific site’s class for the lightbox, but simply bring up the Inspect Element window from the overlay and it should inform you which class(es) you need to change. This can even be done in the Jetpack Custom CSS.

As for prioritizing over the theme’s default set, write in a !important rule to force that rule to always apply. So for example, if the class you need to change was called .overlay, then:

.overlay {
opacity:0 !important;
}

And that should do it. Since a lightbox overlay may sometimes place its background and imagery into the same class, make sure you test it in the inspector first to see if it makes the entire lightbox transparent.