-
Posts
-
I’m transitioning my old theme to Enfold. I wish to retain the header from my old theme: http://www.quirkontour.com/wpms-html-sitemap/
I’m running on a local server under MAMP. WordPress 5.0, Enfold 4.5.1If I add this css code in Quick CSS (Enfold > General Styling) I obtain the desired result.
.logo, .logo a {
margin-top: 30px;
}
#header_main_alternate {
background-color: rgba(255, 255, 255, 0.8)!important;
}
#header_main_alternate.container_wrap {
border-top-width: 0px;
}First issue:
As I plan to make more changes I would prefer to enter the css code directly in a css file eg. style.css, custom.css etc. When I enter the above css code into the child style.css nothing happens!
I also tried my css code in enfold-child > css > layout.css but that didn’t work either :-)
Could you point me in the right direction please.Second issue:
I have a Custom Background Image in Enfold > General Styling > Logo Area. I would like the background image to resize as the browser window resizes. Is that possible?Thanks for your help,
Iain
Hey Iain,
Often if someone adds css into their child theme style.css via WordPress > Appearance > Editor > Child Theme > Stylesheet and then checks their site it seems that the css is not working, this is because adding the css this way doesn’t rebuild the merged files to add the new css.
One way to resolve this is to disable the Performance > JS & CSS file merging and compression option until they are done developing the site, in the same way that it is not recommend in using a caching plugin until they are done developing the site, clearing cached css can be a pain sometimes.
Another option is to rebuild the merged files after adding css to the child theme styles file, this is done by clicking the blue “save all changes” button in the theme options, if this button is not clickable, then go the Enfold Theme Options > General Styling > Quick CSS field and add a blank space, this will activate the button so you can click it.
Then please clear your browser cache for the changes to take effect.Best regards,
VictoriaHi Victoria
Thanks very much! That solved my css problem :-)My second issue was not answered?
I have a Custom Background Image in Enfold > General Styling > Logo Area. I would like the background image to resize as the browser window resizes. Is that possible?Regards
IainHi Iain,
Your site header background image seems to resize well when resizing the browser or using a smaller device.
Is this already done?Best regards,
NikkoHi Nikko,
Aah! You’re looking at quirkontour.com and yes the header background resizes. That’s my old theme that the developer rarely updated. I’m now in the process of transitioning to Enfold.
I’m running Enfold on a local server.So if I have a Custom Background Image in Enfold Child> General Styling > Logo Area is it possible to make the image resize as the browser window resizes?
Thank you for your help,
IainHi Nikko
I think I found the answer, could you see if you agree. Make sure you read my previous reply!.header_color .header_bg {
background-size: cover;
}Whats the name of the file that has the responsive.css I have to do some tweaking.
I haven’t done any of this for a couple of years so I’m pretty rusty.
Regards,
IainHi Iain,
I apologize for the late response.
We don’t recommend modifying responsive.css or anything in the Enfold theme (but if you use a child theme, you can put it there).
Otherwise, just go to the WordPress Dashboard > Enfold > General Styling and add the css code in Quick CSS.Best regards,
NikkoHi Iain,
Thanks for the feedback and a Merry Christmas to you too :-)
Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
- The topic ‘Where to place css code?’ is closed to new replies.