Return to previous page

Button colour - by cyan - on WordPress WooCommerce support

This topic has 49 replies, 3 voices, and was last updated 10 years, 1 months ago ago by Eva Kemp

cyan

Participant

October 21, 2014 at 16:56

Hi. Currently I have the buttons on my site in grey, hovering over to my theme colour, red. Can you tell me how I can revert this to the other way around in the css please. Thanks.

#20849 Copied

48 Answers

Eva Kemp

Support staff

October 21, 2014 at 19:39

Hello,

You can change color in Theme Options > Color Scheme.

Thank you.
Regards,
Eva Kemp.

#20882 Copied

cyan

Participant

October 22, 2014 at 09:30

Sorry, I actually meant what if I want to keep my theme colour as red but only want to change the colours of the buttons? Is there somewhere in the css I can do this or some extra css code I can add? Thanks.

#20948 Copied

Eva Kemp

Support staff

October 22, 2014 at 12:41

Hello,

To change background color of buttons you can use this code in custom.css file:
.button { background-color: #F00; }

Replace color value with yours.

Thank you.
Regards,
Eva Kemp.

#20979 Copied

cyan

Participant

October 22, 2014 at 12:42

Is that for the up state and the hover over state?

#20981 Copied

Eva Kemp

Support staff

October 22, 2014 at 13:06

Hello,

Please provide us with a page link where you want to change buttons color and specify to which color you need to change it.

Thank you.
Regards,
Eva Kemp.

#20991 Copied

cyan

Participant

October 22, 2014 at 13:10

To be honest Eva, it’s all buttons throughout the site. They currently are grey, hovering over to red. I would simply like them to be the other way around. Red to grey. This goes for the form buttons (Contact 7) as well, if possible. Thanks.

#20992 Copied

Eva Kemp

Support staff

October 22, 2014 at 14:05

Hello,

As I understood you correctly you want to have hover color the same as buttons have now don’t you?
Please provide us with the site link to be able to provide you with the correct code.

Thank you.
Regards,
Eva Kemp.

#21015 Copied

cyan

Participant

October 22, 2014 at 14:29

Currently, the buttons are grey at the moment, hovering over into red. I wish to have them the other way around so that the buttons are red and hover over to the grey. Thanks.

#21024 Copied

Robert Hall

Support staff

October 22, 2014 at 14:36

Hello,

Please provide us with link to the page with buttons.

Regards,
Robert Hall.

#21027 Copied

cyan

Participant

October 22, 2014 at 14:38

http://79.170.44.106/chateauclinet.com/

But the buttons appear throughout the site

#21028 Copied
Eva Kemp

Support staff

October 22, 2014 at 18:51
Hello,

Please add this code in custom.css file:
```
a.button:hover {
background-color: grey !important;
}
.button {
background-color: red !important;
}
```
Thank you.
Regards,
Eva Kemp.
#21100 Copied
cyan

Participant

October 23, 2014 at 08:55

Fab! Thank you very much!

One last bit though, could you supply me the code so that up button has white font on the red and dark grey font on the hover over please.

See this link for example: http://79.170.44.106/chateauclinet.com/contact-us/

Thank you.

#21211 Copied
Eva Kemp

Support staff

October 23, 2014 at 12:06
Hello,

Please use this code:
```
.back-to-top {
   color: #FFF !important;
   background-color: #F00 !important;
}
```
```
.back-to-top:hover {
background-color: darkgrey !important;
}
```
Thank you.
Regards,
Eva Kemp.
#21233 Copied
cyan

Participant

October 23, 2014 at 12:51

This is not working Eva. ‘Back to top’ is that correct for a button font? I need to change the colour of the font on the buttons for both the normal state and the hover over effect.

#21247 Copied
Eva Kemp

Support staff

October 23, 2014 at 13:07
Sorry for misunderstanding.
Please remove the previous code and add this one:
```
a.button {
color: white !important;
}
```
```
a.button:hover {
color: darkgrey !important;
}
```
Thank you.
Regards,
Eva Kemp.
#21250 Copied
cyan

Participant

October 23, 2014 at 13:10

Spot on! Thanks Eva! 🙂

#21253 Copied

Eva Kemp

Support staff

October 23, 2014 at 13:17

Hello,

You’re welcome.

Regards,
Eva Kemp.

#21258 Copied

cyan

Participant

October 27, 2014 at 11:59

Eva, sorry to be a pain but the font colours on the buttons haven’t applied to the blog posts. Could you give me some code to make these work in the same way as the others please. Thanks.

http://79.170.44.106/chateauclinet.com/blog/

#21796 Copied

cyan

Participant

October 27, 2014 at 13:10

Could you also tell me how to make the icon next to the search icon in the header, rolling over into a different colour please? Say #CCCCCC? Thanks.

#21812 Copied

cyan

Participant

October 27, 2014 at 16:15

Eva, we’ve recently updated our theme and now I have a few questions for you…

1) Can you tell me how to change the URL on the logo please.
2) Is it possible to add our own content into the top bar of the website (above the logo and nav, where the search icon is)? We’d like to add our own links in here if possible.
3) What is the tiny section above the top bar (see point 3 on the link below)? How can I change the colour of this?
4) Can I change the colour of the background of point 4 on the link below?
5) Is my search icon there?? If so, can I change the colour of it? See point 5 on the link below.
6) The font colours on the buttons haven’t applied to the blog posts (see my previous query). Could you give me some code to make these work in the same way as the others please.

http://79.170.44.106/chateauclinet.com/test.jpg

Many thanks.

#21859 Copied

Eva Kemp

Support staff

October 27, 2014 at 17:26

Hello,

1. You can change URL on a logo in theme-functions.php (lines 934, 936) file in the wp-content/themes/legenda/framework directory. Replace the code <?php echo home_url(); ?> with your link.
2. You can add any widgets into “Place in header top bar” area in Appearance > Widgets.
3. 4. Unfortunately we can’t see your screenshot as your site is unavailable.
5. 6. Please open access to your site to be able to assist you.

Thank you.
Regards,
Eva Kemp.

#21890 Copied

cyan

Participant

October 27, 2014 at 17:56

Sorry Eva, please ignore points 3, 4 and 5 please. I just need help with the following now:

1) Can you tell me how to change the URL on the logo please.
2) Is it possible to add our own content into the top bar of the website (above the logo and nav, where the search icon is)? We’d like to add our own links in here if possible.
3) The font colours on the buttons haven’t applied to the blog posts (see my previous query). Could you give me some code to make these work in the same way as the others please.
4) Could you also tell me how to make the icon next to the search icon in the header, rolling over into a different colour please? Say #CCCCCC?

Sorry for the confusion. Things keep changing this end.

#21907 Copied

cyan

Participant

October 27, 2014 at 18:27

Oh and your reply about the top header widget area hasn’t worked. I’ve put a text widget in there with some text and nothing is appearing 🙁

#21921 Copied

Eva Kemp

Support staff

October 28, 2014 at 12:24

Hello,

1. You can change URL on a logo in theme-functions.php (lines 934, 936) file in the wp-content/themes/legenda/framework directory. Replace the code <?php echo home_url(); ?> with your link.

2. It requires customization in the theme files or you can add Text widget with your data into “Place in header top bar” area in Appearance > Widgets and make sure you have Languages area enabled in Theme Options > Header.

3. Please provide us with the link to your blog.

4. Please clarify color of what icon you want to change. Could you show a screenshot?

Thank you.
Regards,
Eva Kemp.

#22008 Copied

cyan

Participant

October 28, 2014 at 12:31

Here is a link to my blog: http://79.170.44.106/chateauclinet.com/blog/

I’d like the font colours on the buttons – including hover – (both background and font colour) to be the same as those on the home page: http://79.170.44.106/chateauclinet.com/

As you will see from either of these links, when you hover over the icon next to the magnifying glass in the top header, it disappears (or the hover over colour is set to red). How can I change this?

Thanks.

#22013 Copied
Eva Kemp

Support staff

October 28, 2014 at 13:44
Hello,

Please use this code for blog page buttons:
```
span.button.right.read-more:hover {
color: darkgrey !important;
background-color: grey !important;
}
.button {
    color: #FFF !important;
}
```
Regards,
Eva Kemp.
#22023 Copied
cyan

Participant

October 28, 2014 at 13:47

Thanks 🙂 And the icon in the top header?

#22025 Copied
Robert Hall

Support staff

October 28, 2014 at 15:37
Hello,

Try to add this code into custom.css file.
```
.back-to-top:hover:before {
background:white !important;
}
```
Regards,
Robert Hall.
#22046 Copied
cyan

Participant

October 28, 2014 at 16:30

This hasn’t worked Robert

#22062 Copied
1 2

Viewing 30 results - 1 through 30 (of 49 total)