- This topic has 3 replies, 2 voices, and was last updated 10 years, 2 months ago by .
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
Is there a way in CSS to code the white background from the slider to the footer?
When I put the #fff code in for the background for the #wrap, it also adds that little white triangle in the "home" tab navigation and makes the footer background white, too.
Also is there a round the edges of that white space at the top?http://www.project2.spark-collaborative.com/
To remove the white triangle delete the code below around line 274
Then change the footer background color by adding a background around line 1329
You can round any element by adding a border radius. Not 100% sure which white section you are referring to. Are you trying to round the responsive slider?
Hope that helps 🙂
Jeremy! You rock. Been gone a couple days and I forget my brains 😉
Yeah, the last part is trying to slightly round the top of the slider. And now actually the footer widget area. I added the border radius but it doesn't seem to be taking? I added the code to wrap and nada.
The reason you are having issues with the rounding of corners, is the wrap on line 164 applies to the length of the page from header to footer.
Thus if you add background:#fff there as you currently have, this white background sits beneath the other element e.g. slider, inner and footer. Thus trying to add a border radius to the main wrap does nada as the background color you have applied to the header or footer is covering the main wrap white backgorund.
Try removing background: #fff on line 164 and you will see what I mean.
To join the id="inner" and id="footer-widgets" into one white block with rounded corners you might be better off removing the margins applied to these sections, adjusting the padding to your liking and then adding the border-radius-top and border-radius-bottom to get the rounded corners effect.
© 2023 WPEngine, Inc.