Home Forums Weaver II Theme YouTube Plugin Hyperlink Font Size

This topic contains 7 replies, has 2 voices, and was last updated by  GDGerlach344 4 years, 5 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17948

    GDGerlach344
    Participant

    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.

    #22954

    scrambler
    Moderator

    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
    Participant

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

    #22956

    scrambler
    Moderator

    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
    Participant

    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
    Moderator

    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
    Moderator

    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
    Participant

    Got it.. thanks!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.