Need a CSS expert... how to change color of a single button?

[DavideBianchini]

Hey guys,
I was wondering if it is possible to apply a CSS color change of individual buttons . Since all buttons seem to share the same class "button," if I make a change to one, they all change color as shown below.

I suppose my question is, can you apply a CSS attribute to an HTML tag (in this case, title="Post a reply")?
(and preferably from my CSS child, without altering core files)
.

button.png

Thanks,

Davide

[Crizzo]

Hi,

check the CSS-attribute selector: https://www.w3schools.com/css/css_attri ... ectors.asp

Regards

[DavideBianchini]

Hi,

check the CSS-attribute selector: https://www.w3schools.com/css/css_attri ... ectors.asp

Regards

Thank you Crizzo, this looks like it could work. I'm just having trouble with the syntax, b/c I get no color change.

Here is what I have for the reply button;

Code: Select all

[title="Post a reply"] {background-color:#87c47d;}

-Davide

[3Di]

That's a style question You might want to ask there in the devoted forum?

[DavideBianchini]

That's a style question You might want to ask there in the devoted forum?

My apologies, I did not see the styles forum. Mods, please feel free to move this topic.

-Davide

[DavideBianchini]

Nevermind, I figured it out, I was missing the "a" prefix. Here is the correct syntax to change just the reply background color;

Code: Select all

a[title="Post a reply"] {background-color:#87c47d;}

Wow this is such a powerful feature of CSS, I never knew this existed before. No longer the need to alter core files!
Hopefully this works in all browsers!

-Davide

[david63]

No longer the need to alter core files!

How are you applying that if you are not changing core files?

[PlanetStyles.net]

No longer the need to alter core files!

How are you applying that if you are not changing core files?

I think they mean the template files.

Which would make sense, as it's nice to have separate styles applied to New Topic, Post Reply buttons etc, but by default they use the .button class which is widely used elsewhere too.

[david63]

I think they mean the template files

But template files are core files!

[DavideBianchini]

How are you applying that if you are not changing core files?

I am using a child css file, as is common in Wordpress themes. No altering of core files here, not even a style template.

-Davide

[tomberaid]

Hello
For all languages, test :
a[href*="posting.php?mode=reply"]

[DTMWC]

Ideally, you need to add a class to the reply/new topic button in the html template file,
Though, some buttons already have classes that you can change them by, the code below could be useful for you experiment with,

Code: Select all

/* Bottom Of Forums & Topics - New Topic Button / Post Reply Button */
.action-bar.bar-bottom .button {
	background: pink;
	border-color: purple;
}

/* Bottom Of Topics - Topic Tools Button */
.action-bar.bar-bottom .topic-tools .dropdown-select.button {
	background: green;
	border-color: red;
}

/* Bottom Of Topics - Quick Mod Button */
.action-bar.bar-bottom .quickmod.dropdown-container .dropdown-select.button {
	background: yellow;
	border-color: blue;
}

/* Bottom Of Forums & Topics - Jump Box Button */
.jumpbox .dropdown-select.button {
	background: red;
	border-color: green;
}

/* Bottom Of Forums - Sorting Options Button */
.action-bar.bar-bottom .sort-tools .dropdown-select.button {
	background: brown;
	border-color: orange;
}

The new topic / post reply button doesn't have a class so it would basically change all the buttons, but the buttons at the side of it have their own classes, we address them with: .action-bar.bar-bottom so only the buttons in the bottom action bar be effected.
To address the top action bar buttons it would be: .action-bar.bar-top

This code would be added to the bottom of the colours.css style sheet, change the colours to whatever you want, one thing I don't recommend is using !important - if you find you need to use it to get something to work - there should be another way to do it without using it.

The method posted by @tomberaid is a better way of changing just the reply button.