- This topic has 10 replies, 2 voices, and was last updated 8 years, 10 months ago by Andrew Misplon.
- AuthorPosts
- February 10, 2016 at 2:01 pm #3007
Tomas SearsParticipantHi
Thanks for the theme you created, its great for my needs!
I have the header overlapping the slider (Which I configured in theme options) and using Custom CSS I have set the opacity of the header to 0.85 to give it a nice look. It works perfect in Chrome, but no in IE or Edge.
This is the code:
.site-header {
opacity: 0.85;
}and I already tried putting in the code you suggested on other IE problems.
the web address is http://www.kimberley-stemcollege.co.uk/
Let me know if you need any other info
Many Thanks,
TomFebruary 10, 2016 at 6:36 pm #3008
Andrew MisplonKeymasterHi Tom
Thanks for your support, it’s most appreciated.
Try instead using the following:
/* Header */ @media (min-width: 1024px) .overlap .site-header:not(.fixed) { background: rgba(0, 0, 0, 0.85); }
This assumes you continue to use a black header. If you change the header colour just change the
0, 0, 0
value to your preferred colour rgb value. This will require that you have the slider overlap setting enabled.Let me know how it goes. Hopefully it makes a difference 🙂
February 11, 2016 at 2:02 pm #3020
Tomas SearsParticipantThanks for getting back to me so quickly!
I took out:
.site-header {
opacity: 0.85;
}and put in the code you provided and it unfortunately didn’t work, it took away the opacity all together.
Sorry I should have provided more info:
The header background is an image and the logo it a PNG image with a transparent background.
I set the opacity of the header to 0.85 which worked fine in both Chrome and IE, but the issue was that in IE it didn’t show the logo or menu items, but successfully showed the header background image with the opacity applied.Hope this info helps explain the problem better, sorry for the vague info from before.
Also, on another question, as im making all these changes to the CSS file, would I be best making a child theme?
Thanks again,
TomFebruary 11, 2016 at 2:10 pm #3021
Tomas SearsParticipantJust had another look and next to the code it has a red x and says
“Expected LBRACE at line 7, col 1
Rule is empty”Line 7 was this: .overlap .site-header:not(.fixed){
February 11, 2016 at 3:37 pm #3022
Andrew MisplonKeymasterHi Tomas
Thanks for all the feedback.
All WordPress themes completely overwrite their own folder during theme updates so if we release an update for Ultra and you run that update you’d lose all changes made to theme files. If you’re only making CSS changes then you don’t need to use a child theme and a plugin like Simple Custom CSS will be perfect.
You’re using SiteOrigin CSS, that’s perfect, so no need to install anything else.
The rule that’s empty can be found at Appearance > Custom CSS. You can remove it there.
February 11, 2016 at 3:40 pm #3023
Andrew MisplonKeymasterTry the following to set opacity of the background image:
/* Header */ .site-header:before { opacity: 0.85; }
February 11, 2016 at 3:40 pm #3024
Andrew MisplonKeymasterInsert the above at Appearance > Custom CSS.
February 11, 2016 at 5:13 pm #3028
Tomas SearsParticipantGreat stuff regarding the child theme, I’m glad I wont be having to tackle that!
Thanks for the new code, it works, but its not as transparent as the original code and if i change it below 0.85, it goes very white
Is there anything else I could try? Don’t worry if not!
Many thanks,
TomFebruary 11, 2016 at 5:21 pm #3029
Andrew MisplonKeymasterSure, try going to Appearance > Customize > Theme Design > Header and set the Header Background to black. Hopefully, that does the trick. Let me know how it goes.
February 15, 2016 at 4:11 pm #3070
Tomas SearsParticipantThanks for all your help – managed to get it to how I wanted!
February 15, 2016 at 4:33 pm #3072
Andrew MisplonKeymasterAwesome 🙂 Thanks for the update.
- AuthorPosts
You must be logged in to reply to this topic.