buttons css

Could you also assist please with the css code for the ‘RightButton ribbon’ text.
Thank you ??

Hi,
Please go to Admin > Appearance > Customize > Additional CSS > Insert the given below of code.

.red-btn{
background:#000 !important;
}

.green-btn{
background:#eee !important;
}

Thanks
Mohammad

Thank you.

Additional item:

– The button in the contact form at the bottom of the main page still displays as ‘red colour’ when I add the above button css

– Would you also know what css I could add to change the ribbon right text i.e. I added the below css for the text, without success?

#ribbon_right{
background:#eee !important; color: black !important; }

website url: https://www.storeit4less.co.nz

Thank you!

Additional question: would you know how could I add a different hover color to these buttons?

Hi,
Please use this custom css code:-

/* Ribbon color*/
#ribbon_right h3{color: black !important;}
.pirate-forms-submit-button{background:#000 !important;}

/* hover color*/
.pirate-forms-submit-button:hover{background:#ff0000 !important;}
.red-btn:hover{background:#ff0000 !important;}
.green-btn:hover{background:#ff0000 !important;}

Thanks
Mohammad

• This reply was modified 8 years ago by mdshak.

Hi Mohammad,

Thank you!
That worked almost perfectly, with the exception that the ribbon buttons now do not display in mobile phone view (I use a Mate 8 Huawei)?

Hi,
It should not happen please share the screenshot with me.
Thanks
Mohammad

I am just trying to figure out how to send you a screen shot from my phone – hopefully wont be too long

Hi,
Is this text “How can we assist your store requirements?” not displaying the perfect at mobile device?
Thanks
Mohammad

Here is a link to a page with the screenshots – look at the bottom of the page
https://www.storeit4less.co.nz/?page_id=93

Hi,
I am able to issue exactly. Please elaborate it.
Thanks
Mohammad

Hi Mohammad,

In the Two (2) standard ribbon sections,
– the text in the ribbons display correctly
– but the standard buttons that go with the ribbon sections do not display in mobile phone display

Is this helpful?
Tim ??

Hi Mohammad,

Update:
When all of your css code (relating to buttons) is removed from the websites customise/additional css’ section, the ribbon buttons still do not display in ‘mobile phone’ view (on my Mate 8 Huawei phone).

So the buttons not displaying in ‘mobile view’ does not appear to be an issue related to your css code. This issue appears to be related to the embedded code?

What are your thoughts?
Any suggestions?

Hi,
Please open your website in Dektop, take a screenshot and mark the ribbon buttons. Share screenshot with me. I will check it.
Thanks
Mohammad

Hi Mohammad,

Two intems:
[1] How do I share a screenshot in this forum .. there only appears to be ‘img’ which requires a url to an image?

[2] On my desktop the ribbon buttons display fine when I reduce the browser down to mobile width. It is only when the website is viewed on a mobile phone that the buttons do not display (tested on samsung gs3 and huawei mate 8)

[3] The same display issue happens with the Testimonial widget ‘Title’ – does not display on a mobile phone