YouTube Plugin Hyperlink Font Size

[GDGerlach344]

I posted this question a year ago. I need to change the font size of the text YouTube hyperlinks generated on this page. http://communiclips.com/samples/

Scrambler showed me how to use Firebug to inspect one of the links and he said they were done with the h5 tag and the class titledesc. The custom CSS rule he said to add was
h5.titledesc {font-size:130%;}
And it worked.

But I have had to update the plugin that’s generating those hyperlinks and now the custom CSS rule doesn’t seem to be working. I used Firebug to inspect the links and came up with:
<h5 class=”titledesc“>
Which appears to be the same tag/class as before. But when I go to change the rule to change the font size, the font size does not change so I must be missing something.

[scrambler]

The current rule used appears to be

div.titlendesc h5 {font-size:26px !important;}

Because of the !important, your overriding rule should use the exact same selector and important to in order to be able to override.

So use

div.titlendesc h5 {font-size:100% !important;}

[GDGerlach344]

OK that works. Could you tell me how you found that rule? I want to learn how to find these myself.

[scrambler]

You use the browser developer tool like F12 on IE or  Firebug on FF, and search what rule is setting the current font size in the right window.

This is where I saw that the active font size rule was

div.titlendesc h5 {font-size:26px !important;}

and that it was overriding yours (Rule showed as stroked out)  that was

h5.titledesc {font-size:60%;}

[GDGerlach344]

I put my rule h5.titledesc {font-size:60%;} back in just to recreate exactly what you saw.

In Firebug I selected the HTML tab then selected “click on element” to highlight one of the hyperlinks. Then I looked in the box to the right which is labeled “Style” and scrolled down to find my 60% rule and the active one. My 60% rule was right below the active one but it didn’t have strike throughs. Did I look in the correct place?

[scrambler]

I don’t know Firebug, I use IE 11. In IE11 developer tools The rules that are overridden have strike through.

But the last active rule is by definition the dominant one, so if you see a rule doing the same thing above yours, then yours is being overridden.

[scrambler]

I just looked at Firebug, and I do see overridden rule with strike through, so I am not sure what is going on with yours.

You can also select the Computed tab in the right window of firebug, find the style you are looking for, and click the plus sign to see all the rules applied to this element for that style, the top one being the dominant one. So if yours does not make it to the top, it is being overriden

[GDGerlach344]

Got it.. thanks!

[Author]

Posts