Theme Author
Derek
(@chiroderek)
Yes, you can to this.
Right now, the lack of ability for the WordPress color picker to choose “transparent” as a color is an issue. You can see it discussed as few as 5 days ago here https://core.trac.wordpress.org/ticket/21059
I think in the future, there will be an option to choose transparent without us having to do “hacky” things with our code. I can’t be sure though.
The best way to make the changes you’re describing would be to create a child theme.
https://codex.wordpress.org/Child_Themes
Adding the following to your child theme “style.css” page would change all of those areas, as well as your footer, to transparent, and your background image would show through.
Right now, clearing the value from the background color in the customizer didn’t actually make it transparent. It still has a white background, but your image shows over the top of that white background.
Using a child theme and adding the code below to your style.css page will override the customizer with your desired changes.
code for style.css: (xxxxxx is the 6 digit hash tag for the desired color of your title bar – http://www.computerhope.com/htmcolor.htm )
———————————————————————–
#wrapper1, #wrapper2, #container1, #container3, #container4{
background-color: transparent !important;
}
#container2{
background-color: #xxxxxx !important
}
Thread Starter
Wootie
(@wootie)
Thanks, I’ll try playing with that.
Theme Author
Derek
(@chiroderek)
It will work. Just let me know if you need any help.
Thread Starter
Wootie
(@wootie)
OK…that did indeed work…but brings up a couple follow-on issues…
1. It removes the content area background for all pages – ideally I’d only want the content area to be transparent on the home page, and otherwise have the normal white background on all other pages. I think there’s a way to specify such .css stuff only for explicit pages…?
2. The title bar for non-home pages did indeed have it’s background color limited to only the width of the content area…but the border for that bar still extends edge-to-edge. Would like to have that also be just the width of the content area.
Thread Starter
Wootie
(@wootie)
Oh…and I noticed that the button on the home page to get the forms forces the link to open in a new tab…whereas the others open in the same tab. Don’t see anywhere to change that…would like that to just stay in the same tab too.
Theme Author
Derek
(@chiroderek)
The page and post titles are inside a wrapper id called “wrapper2”. So to call them out with CSS you use “#wrapper2”. So if you want the border to be transparent you would use:
#wrapper2{
border-color:transparent !important
}
To make changes specifically to a page or post, you just need to prepend with the page or post body class, which in WordPress use a post or page id #. So if I want to change the wrapper border color of “#wrapper2” just for the home page, and my home page body class is “page-id-8” I would use:
.page-id-8 #wrapper2{
border-color:transparent !important
}
If you’re wondering how to find the page or post id of a page you want to change, look here: http://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/
If you’re wondering how you would find out which ids or classes you need use (in other words – how would you know to use #wrapper2 instead of #wrapper3 or .container1) you can take a look at this article: http://kb.oboxthemes.com/articles/how-to-get-css-styles-for-elements/
Also, you’ll probably need to add the “!important” to most changes. It’s just the nature of the way the WordPress customizer works. It overrides the stylesheets. Adding !important tells the browser that we want to use that change even if it comes before another change in the style sheet cascade.
Theme Author
Derek
(@chiroderek)
Regarding the button opening in a new tab, I have submitted an update that changes that. Keep an eye out for that update to go through.
Thread Starter
Wootie
(@wootie)
Thanks! So far I have this…
.page-id-2 #wrapper1, #wrapper2, #container1, #container3, #container4{
background-color: transparent !important;
}
#wrapper1, #wrapper2, #container1, #container4{
background-color: transparent !important;
}
#container3{
background-color: #ffffff !important;
}
#container2{
background-color: #81d742 !important
}
#wrapper2, #wrapper3{
border-color: transparent !important
}
The bottom part is me trying to kill the little border/line left at the bottom of wrapper2 and/or top of wrapper3, but must be something else…can’t figure out what that is…
Theme Author
Derek
(@chiroderek)
When you made wrapper2 transparent, the box shadow from wrapper3 is showing through. (It’s what makes the shadow effect between the main body and the footer. Try adding this
#wrapper3 {
box-shadow: 1px 3px 3px #505050;
}
Thread Starter
Wootie
(@wootie)
Monkeyed with that a bit and seem to have something that will work.
Thanks!
