Modifying color/style/spacing for sidebar links

[Vaporman87]

I've got to say... either I am just totally inept at finding what I'm looking for, or it is unnecessarily and quite frustratingly difficult to find the CSS code to change the color, style, spacing, etc. for the sidebar links in the MAIN template.

All I've managed to do is change the color of the link text when moused over... that's it. Nothing else I have edited seems to change anything else. All I want to do is add some space in between the Member Login and sidebar links, and to change their color and size perhaps.

What am I missing here?

[squiggler]

There are 4 files in your CSS folder in your file manager (at the host, not ACP). There's menu, online, pagination, and tabs. I think those are what you want to edit, but I could be wrong. You might also want to check the templates folder.

[tahbikat]

I noticed that it doesn't look like the individual sidebar links have a class set to them, so what I did is style the a, li, a:hover, and li:hover in the #menu id.

Go to templates > main > media > style-city.css (or whatever template css you're using) and add this under the section called /* Let's fix up your menu links */

Under it use this:

#menu ul a {
color: #fff;
}

#menu ul a:hover {
color: #000;
}

#menu li {
margin-top: 5px;
}

Just mess around with the code and add/change what you need to fit it to your needs. This is what worked for me and got my links all pretty. (: There's probably an easier way but this is what I figured out. :P

Also if you want those bullets next to each link gone use this:

#menu ul {
list-style: none;
}

If you need help customizing it more just let me know and I can help you. You can click the button in my link to see how I got mine to look so it shouldn't be hard for me to help you customize yours for your site if you need it. (:

[Vaporman87]

Originally Posted by squiggler

There are 4 files in your CSS folder in your file manager (at the host, not ACP). There's menu, online, pagination, and tabs. I think those are what you want to edit, but I could be wrong. You might also want to check the templates folder.

Thanks for your information squiggler. I was indeed doing all my editing from the host CP and not the ACP. I made some aesthetic changes in the menu.css file, but that file does not contain any code related to the sidebar links... only the top nav links (at least I think so, from what I could gather).

The style-city.css had some code there related to the sidebar links, but I could only manage to change the text color if the text was moused over. I did not find anything that could be manipulated to change the font, spacing, color, etc.

Originally Posted by tahbikat

I noticed that it doesn't look like the individual sidebar links have a class set to them, so what I did is style the a, li, a:hover, and li:hover in the #menu id.

Go to templates > main > media > style-city.css (or whatever template css you're using) and add this under the section called /* Let's fix up your menu links */

Thanks tahbikat... I will try this. I don't understand where the links are getting their style settings from. They have to be getting them from somewhere. Oh well.

[Vaporman87]

@tahbikat - Thanks for the code insert. This is great for when the user is logged in. How about when they are not?

I would like to also be able to manipulate the same section when the user is NOT logged in (and the Forgot Password, Register Account, etc. text is displayed).

[tahbikat]

Try this:

#submit {
margin-bottom: 25px;
}

To edit the links below the form use this:

#login a {
stuff here
}

Let me know if these ^ don't work. I didn't test them. Just wrote it up real quick from viewing the source code. lul

[Kyttias]

With my Bootstrap theme, I modified the sidebar with jQuery. It's messy, but it allows you to manipulate the page as soon as it loads -- I added classes where there were none, and then made css for them. If you're interested in trying out this method, I wrote a tutorial. It's more generalized than specific, I'm afraid.

[Vaporman87]

Thanks for those extra lines tahbikat. Those were exactly what I needed. Your help is GREATLY appreciated.

[tahbikat]

No problem!