Different coloured tabs

[petewadey]

Hi,
Would it be possible to change the colour of a chosen tab? For instance, I would like my "Donate" button to stand out from the rest. Or should I be requesting this as a mod?
Thanks,
Pete

[Kindred]

of course it is... of course, the exact way would probably depend on your theme....

but you would do it using CSS
edit index.css and target the action/button.
e.g. <li id="button_profile">
so...    #button_yourbuttonname {background-color:#23ab23;}

[petewadey]

Thanks for reply. I'm using Core theme. I looked in the CSS file but can not find <li id="button_profile"> or similar. All  the colors seem to be for block and not specific buttons. Am I looking for the wrong thing, or in the wrong place?
Pete

[Illori]

you need to add the css that kindred gave you. his first example is the html output, you will not find html in the css file. the second line is the css you need to add.

[petewadey]

Can I add that anywhere in CSS file, as in at the end?

[Illori]

the end is the best location to add it.

[petewadey]

I added    #button_donate {background-color:#f7cb06;}    to the end of the index.css script, clicked preview and the donate button has not changed colour. Am I missing something. Thanks

[oOo--STAR--oOo]

If you have a link to your website and tell me where the button is, I will tell you what to edit within a few mins!

If you don't want it public, send me a PM

[petewadey]

http://bsac10c11c12.co.uk/smf/
It's the Donate button I wish to change the colour of.
Thanks

[oOo--STAR--oOo]

No it wouldn't be the same class or element, I can't get on to the website, it just continuously loads? Something wrong with the server/host?

[petewadey]

It's working fine for me, even from the link I posted on here?

[oOo--STAR--oOo]

loaded for me now, also I can't see the donate button so I won't be able to know what needs to be adjusted.

[petewadey]

It's just under the login window between the help and gallery buttons

[oOo--STAR--oOo]

It's just under the login window between the help and gallery buttons

I can't see no donate button, can you make me a temporary account just a member who has access to see the donate button? I'm just nipping out to get my hair chopped lol, so will fix it when I get back
Just PM me the details.

[Grammy]

I added    #button_donate {background-color:#f7cb06;}    to the end of the index.css script, clicked preview and the donate button has not changed colour. Am I missing something. Thanks

Try #button_paypal instead of #button_donate?   
If that doesn't work, did you add the button manually into your Subs.php file?  You need the title (actual name) of the button; not the description.  For instance, I have a button in my forum that I've made red.  It's called "Extra Goodies" but the button name (title) is "goodies". 

Subs.php

Code Select Expand

'title' => $txt['goodies']

In my Modification.english.php:

Code Select Expand

$txt['goodies'] = 'Extra Goodies!';

so my CSS is:

Code Select Expand

#button_goodies>a {
color: #ff0000; }


Hope that helps.   

[petewadey]

I didn't add the button manually, it was a mode. Paypaldonate or Donate by paypal. I can't find anything in the index CSS matching donate or paypal?

[Grammy]

I didn't add the button manually, it was a mode. Paypaldonate or Donate by paypal. I can't find anything in the index CSS matching donate or paypal?

No, you'd have to manually add that code to your CSS.  What mod did you use to add the button to your menu?  (I see more than one listed.)

[petewadey]

PaypalDonations. I think you could be right that the button is named paypal

I've been summonsed to the shops now. Will have another go later. Thanks for help

[Grammy]

Yes, if you use THIS MOD, your button name is paypal, not Donations. 

You're using Core, you said, so that has its own index.css.

So in Themes/Core/index.css you would put something like this:

#button_paypal {
color:#f7cb06;}

[petewadey]

Will try that when I get back and let you know. Cheers

[petewadey]

Yes, if you use THIS MOD, your button name is paypal, not Donations. 

You're using Core, you said, so that has its own index.css.

So in Themes/Core/index.css you would put something like this:

#button_paypal {
color:#f7cb06;}

Tried that, still nothing. I tried it on my site in Modify Themes and clicked Preview and nothing had changed.Should I be able to do it there or do I need to go into my control panel and do it from there?

[Grammy]

Yes, if you use THIS MOD, your button name is paypal, not Donations. 

You're using Core, you said, so that has its own index.css.

So in Themes/Core/index.css you would put something like this:

#button_paypal {
color:#f7cb06;}

Tried that, still nothing. I tried it on my site in Modify Themes and clicked Preview and nothing had changed.Should I be able to do it there or do I need to go into my control panel and do it from there?

No, you would need to add it manually to your index.css file and then upload it to your server to Themes/Core/css. (Or yes, you can edit the file from within your CP.)  Do you want to attach that index.css file and let me add the code for you?  (But I know you can do it!)   

[petewadey]

I might take you up on that offer, but I won't give up just yet. It might take me a while, but I'll get there. Thanks

[Grammy]

I might take you up on that offer, but I won't give up just yet. It might take me a while, but I'll get there. Thanks

You'll get it!   

[Kindred]

1- you should generally NOT use the editor in the smf admin. It is there for emergencies, but is not the correct way to really work on files.
2- changing CSS will probably not show up in preview...  usually, you will need to use a HARD-reset of the cache (ctrl-f5) to see the changes after saving the file.
3- oops...  you are using the "core" theme?   UGH!   kill that. kill it with fire.    In that theme, I think the button background might actually be an image, not CSS...   which means that CSS changes will never work.   Seriously - get a better theme - the Core theme is just about 10 years old at this point, it uses tables everywhere, it is not responsive...  it is actually terrible.

[Grammy]

1- you should generally NOT use the editor in the smf admin. It is there for emergencies, but is not the correct way to really work on files.
2- changing CSS will probably not show up in preview...  usually, you will need to use a HARD-reset of the cache (ctrl-f5) to see the changes after saving the file.
3- oops...  you are using the "core" theme?   UGH!   kill that. kill it with fire.    In that theme, I think the button background might actually be an image, not CSS...   which means that CSS changes will never work.   Seriously - get a better theme - the Core theme is just about 10 years old at this point, it uses tables everywhere, it is not responsive...  it is actually terrible.

Core uses images?   

Ugh, scratch that.  Better fire up the Photoshop. 

[Grammy]

Pete, have you considered trying the Curve (default) theme?  It'll look much nicer and the mods are made for it.  The buttons are CSS, instead of images, so you can change them easily.   

[petewadey]

Is it easy to change to curve and back gain if I don't like it? The change may confuse my elderly membership 

[Kindred]

yes... just change it in the admin and then change it back if you don't want it. (curve = default)

However, regardless of your elderly membership, you really need to get rid of Core.

[petewadey]

Ok I've tried curve and really don't like it, so looks like I have to keep buttons as they are 
I'll wait for a donate by paypal mod to turn up that has it's own independent button. Thanks for all you help and patience.
Pete

[Grammy]

Ok I've tried curve and really don't like it, so looks like I have to keep buttons as they are 
I'll wait for a donate by paypal mod to turn up that has it's own independent button. Thanks for all you help and patience.
Pete

Change is shocking at first, sometimes.  This SMF forum is Curve, so you should be used to seeing it, but your forum is your forum, so I can understand that.  You might consider a custom button, that you can put in the header (for instance, where you currently have the SMF logo).  But it would take a little custom work for that.  (I would have loved to see your forum in Curve before you changed it back.)   

(If it's the width that bothers you, you can adjust that in Admin to the width you want.)

[Kindred]

Pete....    please note that the buttons ARE all independent, even in Core...   they just use a background IMAGE - So, as long as you use the Core theme, you will never be able to change it for just one button

[Grammy]

Pete....    please note that the buttons ARE all independent, even in Core...   they just use a background IMAGE - So, as long as you use the Core theme, you will never be able to change it for just one button

I wonder, if he feels that strongly about keeping Core, if he could utilize the image class where the SMF logo is and edit it for a regular Paypal button?

Code Select Expand

<img class="floatright" id="smflogo" src="http://bsac10c11c12.co.uk/smf/Themes/core/images/smflogo.gif" alt="Simple Machines Forum">

(You can tell I have nothing to do today, ha.)   

[Kindred]

Yeah, I was right...   Core uses

Code Select Expand


.main_menu li.active a span em {
    background: rgba(0, 0, 0, 0) url("../images/maintab_active_back.gif") repeat-x scroll right bottom;
    display: block;
    font-style: normal;
    padding: 0.1em 0.5em 0.5em;
}


it actually uses images for the background and additional images for the right and left sides of the button....

in short, changing any single button would be complicated, at best.

[Grammy]

I wonder, if he feels that strongly about keeping Core, if he could utilize the image class where the SMF logo is and edit it for a regular Paypal button?

Code Select Expand

<img class="floatright" id="smflogo" src="http://bsac10c11c12.co.uk/smf/Themes/core/images/smflogo.gif" alt="Simple Machines Forum">

(You can tell I have nothing to do today, ha.)   

Something like the screenshots?   (And just lose the other button.)  Also, if it were me, I'd modify the PP button to something a little less "in your face", but that's just me. 


*laughing because Pete has ridden off into the sunset...*   Okay, I need to close my laptop and get up and move around!

[oOo--STAR--oOo]

Because of the themes design, its not that simple to edit just that individual button on its own because it is originally styled using images.. Anyway I gave it an attempt and its looking pretty decent. I just used orange as en example, change the colour to what you wish!

Here is what you need to add at the end of your /smf/Themes/core/css/index.css file.

Code Select Expand


li#button_paypal.active a span {
    border: 0;
    box-shadow: none;
    background: none;
}
li#button_paypal.active a {
    background: #ff9400;
    padding: 0px 7px 0px 0px;
    height: 17px;
    border: 1px solid #000;
    border-radius: 0px 0px 6px 6px;
    border-top: 0;
    padding-top: 1px;
    box-shadow: 0px 0px 3px #000;
    box-shadow: inset 1px -1px 0px #fff, inset -1px -1px 0px #fff;
}
li#button_paypal a span {
background: #ff9400;
    border-bottom: 1px solid #000;
    margin-bottom: -5px;
    height: 11px;
    box-shadow: inset 0px -1px 0px #fff;
}


Its looking exactly the same as the image background, but styled with css.. To change the colour of the background simply change the background: #ff9400; which is listed twice. One of for when is for active/current page, the other is for when its not active.

Normal
http://imgur.com/lFF3UKc

active state

http://imgur.com/1y3Yvex

Enjoy!


NEVER SAY NEVER! You just need to know what you are doing, anything is possible!

[Grammy]

The pics show it to be on Pete's site, but when I click the link to his forum, I don't see any change.   

Is that Photoshopped to depict what it would look like?

[oOo--STAR--oOo]

The pics show it to be on Pete's site, but when I click the link to his forum, I don't see any change.   

Is that Photoshopped to depict what it would look like?

The changes have not been applied, that's up to him to apply the changes by putting the CSS I have posted in his index.css file.

I was previewing what the changes will look like on his forum when he has added that css.. No its not photo shopped its a live edit. Go ahead and insert that css on his site and see

[Grammy]

The pics show it to be on Pete's site, but when I click the link to his forum, I don't see any change.   

Is that Photoshopped to depict what it would look like?

The changes have not been applied, that's up to him to apply the changes by putting the CSS I have posted in his index.css file.

I was previewing what the changes will look like on his forum when he has added that css.. No its not photo shopped its a live edit. Go ahead and insert that css on his site and see

Whoa!!  You threw me off with that new nickname!  It's not nice to do that to old people!   

No, just wondered if you'd implemented it, because I knew you had registered there.  That's why I asked. 

[Kindred]

I never said never..  I said it would be complicated...  and there are many other issues with the core theme

[oOo--STAR--oOo]

The pics show it to be on Pete's site, but when I click the link to his forum, I don't see any change.   

Is that Photoshopped to depict what it would look like?

The changes have not been applied, that's up to him to apply the changes by putting the CSS I have posted in his index.css file.

I was previewing what the changes will look like on his forum when he has added that css.. No its not photo shopped its a live edit. Go ahead and insert that css on his site and see

Whoa!!  You threw me off with that new nickname!  It's not nice to do that to old people!   

No, just wondered if you'd implemented it, because I knew you had registered there.  That's why I asked.

Lol sorry grammy, had to change it back to my original. What everyone originally knows me as.. Might confuse you again heh . I only just realised you could change your name on here, I am sure I tried in the past but I wasn't able to.. O well lol. Yeah I am sure they will implement those changes when they gets back online..

I do think they would benefit from a different theme though.. Give them a new fresh look. I seen a nice one submitted recently, its fresh big and plain . Although if they do have mods then I guess it might be a problem unless they can apply the theme edits from the mods manually which would actually be a big problem for them.

[oOo--STAR--oOo]

I never said never..  I said it would be complicated...  and there are many other issues with the core theme

I never said such a thing