Docs

[Smarticle]

How can I control the styling of an individual button and override the appearance of the default/site-wide style?

This is the page: http://maynardheady.wpengine.com/home-x/

And the button in question is right there, above the fold. As you can see, I have three green buttons (that change to orange on hover). I want to keep those three buttons as they are.

However…

My issue is with the transparent button below them. I’ve made it transparent by simply adding type=”transparent” to the backend code, like this:

button >>> type=”transparent” <<< shape=”square… etc., etc.

For some strange reason, after adding the word “transparent” to the code, the text has now converted itself to uppercase!? But I want the text STYLE to be the same as the above buttons, i.e. Sentence Case. I would also like to control the text COLOR in both standard AND hover states. And I’d like to be able to control the border COLOR, also in both standard and hover states. It would be an even bigger bonus if I could control the thickness of the border on the transparent button as well.

Look forward to hearing from you.

[Thai]

Hi There,
Thanks for writing in!
Try adding following CSS under Appearance > Customize > Custom > CSS:

#x-content-band-3 .x-btn-transparent {
    color: #5BB143;
    border-color: #fff;
    border-width: 5px;
}
#x-content-band-3 .x-btn-transparent:hover {
    color: #08C;
    border-color: #000;
}

Hope it helps.

[Smarticle]

Hi,

that worked well but limited the code to the just the one button that was on the content band. I’ve managed to create a global CSS setting that now works for any button that I give a ‘clear-btn’ class tag to. Then in the customiser I have used the following code to apply the change globally.

.x-btn.clear-btn {
color: #5bb143;
border-color: #5bb143;
}

.x-btn.clear-btn:hover {
color: #0088cc;
border-color: #0088cc;
}

I have noticed that once a button has been given a transparent style tag in the back end editor, the styling of the text gets over written. I have noticed that the text gets forced upper-case and the shadow disappears. I am not fussed about the drop shadow but how can I disable the automatic upper-case of the text once transparency has been applied.

http://maynardheady.wpengine.com/

Thanks

[Christopher]

Hi there,

Please add text-transform: none; property to .x-btn.clear-btn selector, your code would be :

.x-btn.clear-btn {
color: #5bb143;
border-color: #5bb143;
text-transform: none;
}

Hope it helps.

[Author]

Posts