Change background color of Home button

[905]

I'm using 2.0.15, Curve. What I'd like to do is change the background color of the Home button in the menu, preferably to be the same as the other links, a kind of dark blue (rather than the default orange). Any idea how to do this? Bear in mind that I'm not a coder by any stretch of the imagination, though I have changed bits and pieces from time to time.

[Kindred]

That orange is highlighting your current location - that's why it's a different color than the "other buttons" ... which only highlight on mouseover
For example, go to "search" and click to go to the search page
the search button is now orange and home will highlight blue when you mousover.

but, if you want to change it index.css around line 1182
.dropmenu li a.active

[905]

Thank you, I hadn't considered that it's only that color when highlighting your current location. Still, if I want to change it to something else, I'm not sure how to do that. I found that bit of code, but don't understand how to change the color. It says:

Code Select Expand

.dropmenu li a.active
{
   background: url(../images/theme/menu_gfx.png) no-repeat 100% 0;
   color: #fff;
   font-weight: bold;

but #fff isn't orange...?

[Gary]

That's because the #FFF is representing the text, not the orange background. That is contained as part of the menu_gfx.png image.

[Mick.]

Extract the image from the theme either off the server or off the zip file when you dloaded smf. Edit the image to your color of choice with photoshop and upload it back to the theme via ftp.

[905]

OK, I think I've got it, thanks all.

[Antechinus]

Alternatively you can just edit the CSS to ditch the image there, and do the same job with nifty colors.

Code Select Expand

/* Styles for the standard dropdown menus.
------------------------------------------------------- */
/* Replace standard SMF 2.0.x menu coding. */
/* The main menu bar, padded a bit each end. */
#main_menu {
padding: 0 1em;
}
/* The parent lists:
for the top row of tabs,
and for the drop menus beneath them. */
.dropmenu, .dropmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
/* Containers (not visible) for each button/link. */
.dropmenu li {
display: inline-block;
position: relative;
}
/* Actual links. */
.dropmenu a {
color: #000;
font-size: .9em;
text-decoration: none;
}
/* Visible backgrounds - first level only. */
span.firstlevel {
display: block;
padding: 0 6px;
line-height: 20px;
white-space: nowrap;
border-radius: 4px;
}
/* The active button (orange by default). */
.active .firstlevel {
background: #fd9604;
color: #fff;
font-weight: 700;
}
/* First level hover effects (dark blue by default). */
/* Also added focus, for keyboard navigation, and a brief */
/* fade in (stops the buttons flashing when you mouse past the menu). */
a:focus .firstlevel, li:hover span.firstlevel {
background: #5a6c85;
color: #fff;
text-decoration: none;
transition: background .1s ease-in, color .1s ease-in;
}
/* The actual drop menus, below the menu bar. */
.dropmenu ul {
z-index: 90;
position: absolute;
width: 19.2em;
padding: 7px 0 0 0;
background: url(../images/theme/menu_gfx.png) 0 -130px no-repeat;
border-bottom: 1px solid #999;
}
/* Third level offset. */
.dropmenu ul ul {
margin: -1.8em 0 0 13em;
}
/* Containers for each link in drop menus. */
.dropmenu ul li {
width: 19em;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.dropmenu ul li.additional_items {
background: #fff;
}
/* Inner containers for visible text. */
.dropmenu ul li span {
display: block;
padding: 8px;
}
/* Hover effects on levels 2 and 3 (pale blue by default). */
.dropmenu ul a:hover span, .dropmenu ul li:hover>a span {
background: #d4dbe4;
}
/* Set drop menus off screen (not visible) by default, and */
/* add a slight mouseout delay to make them less twitchy. */
.dropmenu ul, .dropmenu li:hover ul ul {
left: -4000px;
transition: left .2s step-end;
}
/* Bring them into view on hover, with a slight delay */
/* to stop them flashing when you mouse past the menu. */
.dropmenu li:hover ul, .dropmenu ul li:hover ul {
left: 0;
transition: left .1s step-end;
}
/* Extra stuff: show drop menu links via keyboard navigation. */
.dropmenu ul a:focus, .dropmenu ul ul a:focus {
display: block;
width: 21.11em;
margin-left: 4000px;
background: #d4dbe4;
}
.dropmenu ul ul a:focus {
margin-left: 8000px;
}
/* An override, to stop the links running away on hover. */
.dropmenu ul li:hover a:focus {
margin-left: 0;
}
/* Standard SMF 2.0.x code from here on. */
/* The dropdown menu toggle image */

I've attached in index.css file which has those changes, but is otherwise in default form. I think the comments will make everything clear, but feel free to ask if they don't.

[905]

Wow, thanks, though I think that may be beyond me, even with your helpful notes.

First, although I mentioned I'm using 2.0.15 Curve, it has been altered a bit by someone who knew his way around under the hood (but unfortunately is no longer available); thus it is not completely standard, though it must be close enough or the updates would've crashed the thing by now. I myself am just short of terrified to drop a chunk of code in. If I showed you the site, could you tell if this will clash with the changes already in place? (I wouldn't think so, but some knowledgeable reassurance would be nice.)

Next, I'm not even sure what to do here. I start by going to index.css, search for ".dropmenu, .dropmenu ul" (having brightly ascertained that the stuff between the asterisks is the notes – yes, that's how little I know going into this), and start looking for the differences between what's there and what you've provided. Alas I don't know exactly what all I'm to delete/replace; in other words, having found what I figure is the start point, I don't know the end point.

Finally, or perhaps this should be firstly, what exactly will this do? Will it change the orange color in every circumstance in the menu, or just for the Home button? I wasn't clear about this, but my needs are actually rather simpler than that: although I don't mind changing the orange background color of every menu item, I actually only really want it changed so that when you're not logged in, 'Home' isn't orange. (It probably sounds strange, but I have my reasons.)

Please forgive any apparent laziness, I can read the notes, but that doesn't necessarily mean my brain will make proper sense of them.

Although the image editing option upthread may be simpler (I can edit images easily enough), I'm not sure I can extract and upload it back up; I was hoping to just tweak the code via the interface in the Admin section, which is your option.

[Antechinus]

It's ok if you don't want to use that code. I've been playing with this stuff lately anyway. I just thought I'd post it since this sort of question gets asked quite a lot, and some people aren't so good with image editors. Givning them a complete drop-in chunk of code means they can just tweak colors in the CSS if they want to.

Anyway sure, it should be possible to tell by looking at the site. The browser will pull up the existing CSS and markup for scrutiny.

The start and end points were chosen to match comments in the default file. So it replaces everything from "/* Styles for the standard dropdown menus." to "/* The dropdown menu toggle image */". I figured giving start and end points on comments was safest for beginners, since comments are easy to understand even if you don't know code, and if you delete or duplicate up a comment it doesn't matter for functionality.

What exactly does it do? Umm, quite a few things actually. However, it doesn't change the colours at all. It will look exactly the same as the original code.

Basically what I did was clean up the coding, re-order some of it to be in a more logical progression, make it a bit more functional, and add comments to explain what each item does. The idea being that anyone who has basic familiarity with CSS can look through it and change colours if they want to, while leaving the gnarly bits that handle functionality alone.

However, you want something a bit different to what I expected. The short version is that yes, you can change the colour of the Home button, and you can do it only for guests, but that's something you cannot do just with a CSS edit, because CSS by itself has no way of knowing if someone is logged in or not.

At this point I have to ask: do you want it so the Home button, and only the Home button, is not orange for guests? Meaning that if they view some other section of the forum (Search, or Help, for example) are you ok with it also not being orange for them in that section?

The reason I ask is that if you want all active buttons not orange for guests, no matter which section of the forum they are viewing, that is something that can be done quite simply in index.template.php (basically, add a bit of PHP logic to check for user logged in or not, and append a class to the buttons if not logged in).

If you want the Home button, and only the Home button, to not be orange for guests, but you are adamant that you want the other active buttons to still be orange for guests, then that gets a tad trickier. That means hacking Subs.php, because Subs.php is what holds the menu arrays, and you would have to dig into those to make the necessary changes. It's possible, just a bit trickier.

And I recommend you do not try any of this stuff via the admin interface. It is much safer to download a copy of any file you want to work on, then make a backup copy of it, then go nuts editing whatever you want to edit. Save the edited file, then upload it into place (via FTP or whatever) and make very sure you have your backup ready to upload in case you have broken something important. Go on. Ask me how I know this.

[905]

Thanks so much for your reply. I will be asking more, to be sure, but first I have to go back to sleep, as I'm quite a few time zones away from you by the look of it. Just to say though, I'm not at all adamant about changing only the Home button - much prefer simplicity/fewer hacks.

Am sending you a PM if that's OK (it's not for continued support).

[Antechinus]

Sleep is a good idea. I highly recommend it.

In general it's best to keep these things in the support boards, just because other people might like to know the same thing you want to know, but if your forum is private or something and you want someone to take a look, it's ok to PM them by agreement. I'm fine with that if you think it is necessary.

[Antechinus]

Speaking of sleep, I've had some since the last post. It turns out that making only the Home button different for guests is very simple, and can be done with a minor index.template.php edit and a few lines of CSS.

The template logic already assigns an ID to each button, based on the name of the action, with the Home button being #button_home. This can be combined with a class, assigned by checking for logged in. So...

Index.template.php:

Code (Find) Select Expand

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">

Code (Replace) Select Expand

foreach ($context['menu_buttons'] as $act => $button)
{

echo '
<li id="button_', $act, '" ', ($context['user']['is_guest']) ? 'class="button_guest"' : '', '>

You can then chain that class with the ID in the CSS:

Code (Find) Select Expand

.dropmenu li a.active
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% 0;
color: #fff;
font-weight: bold;
}
.dropmenu li a.active span.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
}

Code (Replace) Select Expand


/* ZOMG 2.0.x menu markup is horrible. :P */
/* You have to include that bit. It's a spell against evil. :D */

#button_home.button_guest a.active
{
background: maroon;
color: #fff;
font-weight: bold;
border-radius: 5px;
}
.dropmenu li a.active span.firstlevel
{
background: transparent;
}
/* Here endeth the lesson. */

This will make the home button maroon for guests. All the other active buttons will still be orange for guests, and the Home button will be orange after you log in.

Note that I did this the quick and easy way, by avoiding a custom image just to handle this button. It's the sensible way to do it these days, since you can get the rounded effect by using border-radius.

[905]

Thanks again Antechinus. I have to sort myself out a bit before I give this a go, including getting familiar with FTP programs (previously I've used Dreamweaver's facilities, which worked fine for me for years). A little nervous about this stuff, given my lack of technical chops. I can cut and paste, but even then it's easy to slip up...

I assume I can play around with colors other than maroon? Which might look nice, but I might prefer a matching blue.

[Antechinus]

Sure. It's your site. Use any colours you like.

If you want to match the default blue buttons, use:

Code Select Expand

background: #fd9604;

If you want to match the default orange buttons, use:

Code Select Expand

background: #fd9604;

If you want to match the default grey buttons, use:

Code Select Expand

background: #e8e8e8;