Increasing the font/size of the "unread posts" nav link

[Steelponycowboy]

Just upgraded to 2.1RC2 and have people who can't find the Nav Bar for "Unread Topics" or say it needs to be bigger and bolder.

How can I do this,  I can't seem to find the line of code where I can change font size and make it bold.

[Kindred]

there should be no code edits required...   use the browser inspect tool, find the CSS referencing that text and than change the index.css file for that class/ID

[Steelponycowboy]

Ok , I'm lost 

[Bob Perry of Web Presence Consulting]

Ok , I'm lost 

He's referring to changing a .css file as opposed to changing .php source "code" file, recommend creating a test directory with an exact copy of everything in the root smf directory and experiment before changing your production files, this would also require a fresh database install (which you'll need to create on cpanel first)... may be a bit more complicated sounding than it really is, so until you feel comfortable with that you could also just be certain you keep a valid copy of your current site downloaded to safe place on your hard drive, separate from where you normally work from... if you are into smf managing long term you'll find mastering these procedures is essential, the more routinely you make copies the better...

[skb]

In Themes/Default/CSS/index.css find

Code Select Expand

.navigate_section ul {
margin: 4px 0 0 0;
padding: 0 10px;
font-size: 0.9em;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 2px;
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.08);
}

Change the font-size or add "font-weight: bold;" below that.

[Antechinus]

Or make it bright red, and put a CSS animation on it so it flashes on and off. Add dancing banana gifs for added visibility. Then wait for them to complain again.

(If you're feeling evil, I am happy to provide code for all of this.)

[Arantor]

Animate it to spin round every so often.

[Steelponycowboy]

Or make it bright red, and put a CSS animation on it so it flashes on and off. Add dancing banana gifs for added visibility. Then wait for them to complain again.

(If you're feeling evil, I am happy to provide code for all of this.)

I like how you think,  yes please provide the the code 

Oh, SKB,  thanks for the suggestion, worked perfectly !

[Antechinus]

Ok, I'll fire up local tonight and get some code together. It's always fun doing evil things.

This is a good nudge for me anyway. There's another SMF thing I really should finish off (got sidetracked...).

[Antechinus]

Here ya go.

Add this to the end of index.css:

Code Select Expand


/* Deadly disco ball. */
.navigate_section ul {
    padding: 4px 4px 0 10px;
}
.navigate_section a, .navigate_section em, .navigate_section span {
display: inline-block;
line-height: 36px;
}
.navigate_section .unread_links {
padding: 0 70px;
background-image: url(../images/banana.gif), url(../images/banana.gif);
background-position: 0 0, 100% 0;
background-repeat: no-repeat, no-repeat;
}
.unread_links a:first-child {
color: red;
font-weight: 700;
animation: B1_flash 1s infinite;
}
.unread_links a:nth-child(2) {
color: rebeccapurple;
font-weight: 700;
animation: B2_flash 1s infinite;
}
@keyframes B1_flash {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes B2_flash {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

And add the attached image to Themes/default/images.

[Steelponycowboy]

THANKS !