Archived topic
Custom Button color and logo link
9 replies · Started by Asiya on June 8, 2020
For this page: http://byasiya.com/illuminate-your-soul/
Is it possible to change the button color and customize the link to which you are taken when you push the logo at the top?
I added the custom logo using the elements feature to override the normal logo.
Hi there,
ARe you referring to the subscribe button?
The password button. And the logo at the top of the page
Try this CSS:
.page-id-5223 input[type="submit"] {
color: #fff;
background-color: #000;
}
And this filter for the logo:
https://docs.generatepress.com/article/generate_logo/
Adding PHP: https://docs.generatepress.com/article/adding-php/
That worked!
Is it possible to also change the subscribe button colors too?
Or does that have to be universal since its part of the menu?
Also if I want this button color change to be applied to a series of pages, how should I do that?
Here is another page for example?
https://byasiya.com/illuminate-your-soul-day-1/
DO I just use your code and change the page-id-####? And if so where can I find the ####?
You can always target the page ID with the same CSS like:
.page-id-5223 .main-navigation:not(.slideout-navigation) .main-nav li.online-button a {
color: #fff;
background-color: #000;
}
To do multiple pages, it would be something like:
.page-id-5223 input[type="submit"],
.page-id-xxx input[type="submit"],
.page-id-xxxxnput[type="submit"] {
color: #fff;
background-color: #000;
}
You can see lots of instructions by Googling "How to find WordPress Page ID".
Thanks Leo!
And to batch the Page ID Subscribe button?
I tried use the comma method you described for the Submit button but it didn't work.
Or does each have to be its own CSS code piece?
It would be like this:
.page-id-5223 .main-navigation:not(.slideout-navigation) .main-nav li.online-button a,
.page-id-xxx.main-navigation:not(.slideout-navigation) .main-nav li.online-button a,
.page-id-xxxx.main-navigation:not(.slideout-navigation) .main-nav li.online-button a {
color: #fff;
background-color: #000;
}
Thanks LEO!! Appreciate your help!!! Have a wonderful rest of your week. thank you.
No problem :)