Changing The Font Size Of The Previous / Next Navigation Links

  • Resolved TheLifeOfNeil

    (@thelifeofneil)


    11 years, 7 months ago

    I’m using the Platform Theme by PageLines Ver. 1.4.2.
    I have searched and searched and even tried altering/adding some CSS and cannot figure out how to change the font size of the Previous and Next navigation links.

    This is area of the CSS that I was so sure was the right place:

    .post-nav .previous a {
    float: left;
    display: block;
    padding-left: 24px;
    background: url(./images/post-previous.gif) no-repeat left center;
    }
    .post-nav .next a {
    float: right;
    display:block;
    padding-right: 24px;
    text-align: right;
    background: url(./images/post-next.gif) no-repeat right center;`
    }

    I added “font-size: 2em;” above the float parameter for both the previous and next so that the code looked like this:

    .post-nav .previous a {
    font-size: 2em
    float: left;
    display: block;
    padding-left: 24px;
    background: url(./images/post-previous.gif) no-repeat left center;
    }
    .post-nav .next a {
    font-size: 2em
    float: right;
    display:block;
    padding-right: 24px;
    text-align: right;
    background: url(./images/post-next.gif) no-repeat right center;
    }

    And yet I am still not having any luck at all. Nothing I do seems to make any change whatsoever!

    Any help you guys can provide would be GREATLY appreciated.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Subway1968

    (@subway1968)

    11 years, 7 months ago

    Do you have a link to the page with these? I amy be able to help if I knew which links you are referring to.

    Thread Starter TheLifeOfNeil

    (@thelifeofneil)

    11 years, 7 months ago

    Apologies.
    My website is http://alternativefreedom.com/.
    I’m refering to the Previous and Next links, on any typical WordPress blog, that allow you to see older and newer posts once you reach the bottom of a page.

    esmi

    (@esmi)

    11 years, 7 months ago

    I’m refering to the Previous and Next links, on any typical WordPress blog

    The exact code for inserting these varies from theme to theme. Did you purchase this copy of the Pagelines theme?

    Thread Starter TheLifeOfNeil

    (@thelifeofneil)

    11 years, 7 months ago

    No. I would have specified that I’m using the “free version” but I thought that “Platform” specified that it was the free version as opposed to “PageLines”.
    Apologies for any confusion.

    esmi

    (@esmi)

    11 years, 7 months ago

    Does my apology in your other topic count here too? 😉

    The nav links appear to be be picking up the base font size for the page, so I’d suggest adding some new CSS to change their text size. Something like:

    #pagination a {font-size:1.2em;}

    Have you tried using Firefox with the Firebug add-on for this kind of CSS work? It makes it a lot easier than many other CSS inspection tools.
    http://getfirebug.com/

    Thread Starter TheLifeOfNeil

    (@thelifeofneil)

    11 years, 7 months ago

    Yes it does! =) It was no problem at all really… I’m not even sure if I’m right about Platform being the free version of PageLines, so your apology might not even be necessary. 😉

    I downloaded and installed firebug, as per your recommendation, and I don’t really see how it’s that different from the default inspection tool in Chrome. But I’m not very good with any of this and there are a TON of options in both inspection tools that I don’t have a clue how to use… So I wouldn’t know the difference between Chrome’s inspect function and Firebug if it bit me in the butt! =P

    YAY! I just entered “#pagination a {font-size:1.2em;}” and it worked perfectly!
    Dare I ask how it works? What part of that CSS dictates what text the font size change is going to effect?
    I don’t NEED to know how it worked, I just think, if it’s not too complicated to explain, that it would be in my best interest to understand why it worked.
    Thank you so much! =)

    esmi

    (@esmi)

    11 years, 7 months ago

    I don’t really see how it’s that different from the default inspection tool in Chrome

    Firebug lets you edit HTML & CSS on the fly within the browser. So you can test out changes before implementing them on your site.

    Dare I ask how it works?

    On your site’s front page, the pagination links are in a <div id="pagination"></div>, so all that CSS did was target links inside that div.

    Thread Starter TheLifeOfNeil

    (@thelifeofneil)

    11 years, 7 months ago

    Firebug lets you edit HTML & CSS on the fly within the browser. So you can test out changes before implementing them on your site.

    That’s awesome =) Ty for the tip!

    On your site’s front page, the pagination links are in a <div id=”pagination”></div>, so all that CSS did was target links inside that div.

    I have searched through my source code and inspected the previous link using both inspection tools and for the life of me I can’t figure out how you figured out that the previous link is in a pagination div.
    I can’t even find the word pagination in my source code when I remove the change you had me make from my custom css!

    I just thought that maybe all you had to do was right click inspect the previous link and it told you that it was a part of the pagination div group… but I guess it’s not quite that simple. lol

    esmi

    (@esmi)

    11 years, 7 months ago

    I can’t figure out how you figured out that the previous link is in a pagination div.

    With Firebug, right click on the page element that you want to examine and you immediately get two panes. One shows you the markup – in context – whilst the other shows you the CSS with the most specific/active CSS at the top. You can play about turning rules on/off at will to see what happens and also examine the markup looking for a suitable hook for new CSS.

    Unlike the other inspection tools, Firebug seems to be have built by web devs – not browser developers. So all of the relevant info is immediately available in the right order. It can cut CSS/HTML debugging time down by 50% in my experience. I can use the other inspection tools if I absolutely have to but I much prefer Firebug.

    Thread Starter TheLifeOfNeil

    (@thelifeofneil)

    11 years, 7 months ago

    I’m sold on Firebug =)

    But when I remove the CSS that you had me add to my custom CSS and then use Firebug to inspect the Previous link, I do not see ANYTHING at all mentioning the word pagination.

    Sorry if I’m missing something, it really isn’t too important. You figured it out and I am now able to make the Previous and Next links the size I want. I was just thinking along the lines of “If you give a man a fish you feed him for a day. If you teach a man to fish, you feed him for a lifetime”, know what I mean? =)

    But no major worries… I’ll just come back here next time and let you give me another fish. =P

    Thank you very much for all of your time and help. =)

    Thread Starter TheLifeOfNeil

    (@thelifeofneil)

    11 years, 7 months ago

    I may not understand how or why… but this is most definitely resolved!

    Thanx again!

    esmi

    (@esmi)

    11 years, 7 months ago

    No problem 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Changing The Font Size Of The Previous / Next Navigation Links’ is closed to new replies.