Changing the size of NEXT and PREVIOUS links in Blog

[RuggieroAV]

Hi,

Been trying to figure this out, but cannot - when you have a blog with multiple posts, there are PREVIOUS and NEXT navigational links below the additional pages and while the editor allows you to change the text size for just about every element, I have determined that these specific links and their text can only be modified by changing the CSS.  Sadly, weebly support cannot help me, so I am hoping the community can... what elements do I need to modify to change the size of the previous/next text links in a Weebly Blog?

Thanks,
Joe

[Adam7]

Hey Joe! If you post a link to your site, that should help our Community members figure out what you'd need to change.

[RuggieroAV]

http://www.cityrooster.com/pictures-jokes

This is set up as a blog - PLEASE EXCUSE THE CONTENT - it is not mine; I only manage the site for a client of mine, and he and I were wondering about the text size CSS I mentioned in my first post.

[RuggieroAV]

Anyone?

[RuggieroAV]

I find it very disturbing that NO ONE has addressed my post other than a request to give a link to the content/layout I was trying to modify.  Would like to have this sorted before the new year, if possible - again - what CSS or template controls the size of the PREVIOUS and NEXT links in a Weebly blog with multiple posts?

[kriskrost · Accepted solution]

 Hi there,

The line you want to change is the one that looks like this. 

<div class="blog-page-nav-previous">

so to change that font size, add something like this to your css file

.blog-page-nav-previous {
font-size: 20px !important; 
}

 And here is the other code you're looking for. 

<div class="blog-page-nav-next">

so to update the font on this one do something like this

.blog-page-nav-next {
font-size: 20px !important;
}

[RuggieroAV]

Thank you very much!

Hopefully this will help others, as well as myself.

[kriskrost]

My Pleasure! Glad I could be helpful!  

[Figof8]

Hi, this is great because I need to change the colour of my PREVIOUS/NEXT links but I've searched my css and can't find 

<div class="blog-page-nav-previous">

 anywhere! Can anyone help please?

[RuggieroAV]

Hi,

Not every theme has this code by default.  If those items don't exist, just add them to the end of the "main_style.css" template under ASSETS.  Here's my code, change the font-size: 40px to something smaller or larger as appropriate.  Also, place the color declaration after the size as shown; you can use hex values, like color: rgb(100%, 100%, 0%) instead of defining a set color like red or green, etc.

.blog-page-nav-previous {
font-size: 40px !important; color:red 
}
 
.blog-page-nav-next {
font-size: 40px !important;
}

.blog-page-post-date {
font-size: 30px !important; 
}

[Figof8]

Many thanks RuggieroAV, it has changed the size perfectly, but the color hasn't changed. The code I've added looks like this:

.blog-page-nav-previous {
font-size: 16px !important; color: #333333
}

.blog-page-nav-next {
font-size: 16px !important; color: #333333
}

The font colour (and rollover color which I don't mind if I can't change) are still the same as they were. Excuse my ignorance - I'm new to all this!

[RuggieroAV]

Hi, I am sorry but upon further research it appears to be a weebly bug; affects blog pages only, and only on certain themes... you can usually change the link color from within the editor. I have found other users' posts which express a similar problem. If I come across a solution, I will let you know.

[Figof8]

Thanks, that's much appreciated. I thought it was odd not to be able to change it in the editor.

[ellisanderson]

Thank you so much for this!  I don't know what I'd do without this community to help with heavy-lifting on small styling issues that make your site look sloppy.  

[JenniferinAZ]

I'd love to make this text bold as well and possibly a color more in line with my logo and 'site colors. Do you know the code for those two things?

[JenniferinAZ]

After Googling, I tried this, but the font is not increasing in size or weight!

<div class="blog-page-nav-next {font-size: 80px, font-weight: bold, !important}">

[JenniferinAZ]

I've also tried this, but it's not working, either.

<div class="blog-page-nav-previous {font-size: 40px !important;} {font-weight: bold !important;}">