Button Colours

This topic has 9 replies, 2 voices, and was last updated 3 years, 8 months ago by Skandha.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
March 28, 2021 at 11:29 am #278085

Lamby
Participant

Hi,

How do I change the button colours for the Read More that goes across header, back to top button and the little thin lined separators that go between posts.

Thanks

Stephen

March 29, 2021 at 12:29 am #278126
Skandha
Participant
@lamby: Hello Stephen,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
.readmore, #scrollup {
    background-color: #f23456 !important;
}
```
You can change the color according to your choice.
Let me know if this works out!
Kind Regards,
Skandha
March 29, 2021 at 12:50 pm #278182

Lamby
Participant

Excellent, thank you.

Could you check 2 more for me please. If you go to http://www.annesrockshow.com. There is a little blue separator line under the word News and in the search widget I would like to change the colour of both please if possible. In the search widget just the square box colour on the right hand side.

Thanks

Stephen

March 30, 2021 at 2:47 am #278248
Skandha
Participant
@lamby: Hello Stephen,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="week"]:focus, input[type="month"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, blockquote, .rtl blockquote, .page-links a, .section-title::after, #header-menu-social::before, #hero-section .entry-title::after, #feature-slider-section .cycle-prev:hover, #feature-slider-section .cycle-prev:focus, #feature-slider-section .cycle-next:hover, #feature-slider-section .cycle-next:focus, .woocommerce-info, .woocommerce-message {
    border-color: #f23456;
}
```
You can change the color according to your choice.
Let me know if this works out!
Kind Regards,
Skandha
March 30, 2021 at 3:15 am #278255

Lamby
Participant

Many thanks again. I will try this after work tonight.

Stephen

March 31, 2021 at 1:59 pm #278440

Lamby
Participant

Hi, The little lines have changed to yellow but the search bar widget is still blue and the small search at top right is still blue on hover.

Thanks

Stephen

March 31, 2021 at 3:55 pm #278455

Lamby
Participant

And would you know how to change the colour of the word NEWS on my page. Sorry for keep asking, you have been a great help.

March 31, 2021 at 11:37 pm #278476
Skandha
Participant
@lamby: Hello Stephen,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
/* To change color of search widget and the search toggle on hover */
.search-submit {
    background-color: #ee2;
}
#social-search-toggle:hover {
    color: #ee2;
}

/* To change the color of the text News in the homepage
.blog .section-title {
    color: #ee2;
}
```
You can change the color according to your choice.
Let me know if this works out!
Kind Regards,
Skandha
April 3, 2021 at 11:19 am #278717

Lamby
Participant

Hello again, its the colour pest here!!

How do I go about changing the colours of the buttons on my submissions page and making the changing the text colours of the sections headers on the form?

Thanks

April 4, 2021 at 2:24 am #278746
Skandha
Participant
@lamby: Hello Stephen,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
/* To change the background color of the buttons on Submission Page */
input[type="button"], input[type="submit"] {
    background: #ee2;
}

/* To change the text colors of the Headers on the form */
#wpcf7-f102-p74-o1 label {
    color: #fff;
}
```
You can change the color according to your choice.
Let me know if this works out!
Kind Regards,
Skandha
Author

Posts