Home › Forums › Pro Themes › Busyness Pro › colour overlay on the header images/ buttons not visible in different browsers
Tagged: button, custom colour, header
- This topic has 10 replies, 3 voices, and was last updated 2 years, 9 months ago by
Psink.
-
AuthorPosts
-
December 10, 2020 at 9:30 pm #140465
Melissa Savill
ParticipantHi,
I have two problems:1) I customised the colour scheme and have now a colour layer over the header images. Is there a way to remove this?
2) On the homepage section ‘About’ highlighting three pages with image and excerpts, the “read more’ button is not visible in Firefox or Chrome. Can you please advise what I can do?
Regards,
KatiDecember 11, 2020 at 3:32 am #140527Gokarna Kathayat
KeymasterHello
Please send us your site URL for a better solution. If we provide the solution without visit your site then this solution effect another page of your site so Please provide your site URL for a better solution.
Regards,
December 13, 2020 at 12:29 am #140681Psink
KeymasterHello @Melissa
For second issue please erase the read more label in Customizer and again fill the label and published. You will see read more button there.
For first issue can you please conform us that, did you added any additional css in the theme? It would be better if you send us your site url so that we could inspect your site directly as our senior developer has mentioned earlier.
Best Regards
December 13, 2020 at 6:41 pm #140726Melissa Savill
ParticipantHi
No I have not added and additional CSS code.
The url is http://aurorasteiner.nsw.edu.au/new
Thanks, I’ll try to follow your advise re buttons.December 14, 2020 at 3:55 am #140751Psink
KeymasterHello @Melissa
Thanks for the site url. Now i’m clear about 1st issue. We can help you with this issue.
Please follow my instruction to remove color layer over the header image
Go to Admin Panel >>Appearance >> Customize >> Additional Css, Paste bellow Css Code there then published and refresh.
Here is the Css Code – this code will remove color overlay over header image
#page-site-header .overlay { display : none; }
Hope this will help you, Please let us know if there’s any further queries
Regards,
PsinkDecember 14, 2020 at 7:21 pm #140807Melissa Savill
ParticipantHi Psink
Thanks for your help. That worked.
I have a couple more issues, I would appreciate your help with:1) The pdf documents I uploaded to the Library don’t open when I add their links to the buttons on the pages.I am aware that we will move the site to its proper URL later this week, but it should still work, right?
2) The buttons on the Home Page sections display as rectangles and the buttons on the pages with rounded edges. Also the colour scheme is different. I tried to make the buttons as similar as possible to the home page, but the options are limited (So I changed the colour altogether). What can I do to create an unified button look?
3) In the Home Page section ‘Call to Action’ I have a button which displays white font on a light grey back ground. Is it possible to change the font to black, or give the button a solid colour, which differs from the set light grey page background colour?
4) At the moment, I made the header sticky. We quite like the black background and I wonder if I could make that permanent effectively reducing the masthead banner?
Thank you very much.
December 15, 2020 at 2:23 am #140820Psink
KeymasterHello @melissa
We are very much will to help you.
For issue no. 4 – add bellow css code just below the previous css in Additional Css
header#masthead { background: #000; opacity: 0.8; }
We have added slightly transparent background, its looks cool for your site. If you want permanent black you can remove opacity code form above css code
For issue no. 3
Here is the css code#call-to-action .btn { border-color: #f30f0f; color: #fff; border: none; background-color: #2471b5; }
Above css make button background likely blue with on border. In case if you are willing to change css. you can change all of css as per your need.
Here is little quick guide for it
if you want border to be exist in button – remove ‘border: none;’ from above css
if you want text color to be black – replace color code in ‘color: #fff;’, ‘#fff’ is a color code just replace with ‘#000’, ‘#000’ is a color code for black.
Similarly you can change border-color and background-color.Get color code form https://htmlcolorcodes.com/
For issue no. 2
Here is the css codea.wp-block-button__link.has-text-color.has-background, a.wp-block-button__link.has-background { padding: 11px 35px; border: 2px solid #f9a926; color: #ea5b0e !important; background-color: #eee !important; font-size: 1rem; border-radius: 0px; }
Above code will make inner pages buttons looks same like homepage buttons.
And this is for button hover
a.wp-block-button__link.has-text-color.has-background: hover, a.wp-block-button__link.has-background: hover { background-color: #ea5b0e !important; color: #fff !important; }
For issue no. 1 – Can you please explain more details on this issue
Regards,
PsinkDecember 15, 2020 at 6:38 pm #140871Melissa Savill
ParticipantHi Psink
Thanks for the help. It works great.
I uploaded some PDFs into the library and wanted to hook them to buttons, so they can download them.
in the URL field of the button I added the link to the file in the library, but it doesn’t seem to do what I want it to do. Maybe I went about it the wrong way altogether?
Best,
KatiDecember 15, 2020 at 11:47 pm #140878Psink
KeymasterHello @Melissa
According to your explanation – you wants to add pdf url to button to make download available for every one.
Try this it may help you. Here is the screen record on it
https://www.awesomescreenshot.com/video/2094396?key=8362b2fa11f92e0a6cb2bba68c8cc9ddIf it works please let us know
Regards
PsinkJanuary 20, 2021 at 10:45 pm #143093Melissa Savill
ParticipantHi Psink
Thanks for all your help so far.
I have another question:Currently, when I scroll down on the home page, the header image colour changes and both header and footer are black. I would like to change the colour of both so that it is consistent with the one I put on.
ThanksJanuary 21, 2021 at 12:40 am #143110Psink
KeymasterHello Melissa
Add this CSS in the “Additional CSS”
#colophon, .main-navigation ul ul, .menu-sticky #masthead.nav-shrink, .scrollup, ul#primary-menu{ background-color: #b9d3f7; }
Regards,
Psink -
AuthorPosts
- You must be logged in to reply to this topic.