White Background

[moxiegirl]

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/

[Jeremy]

Hi Moxiegirl,

To remove the white triangle delete the code below around line 274
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Then change the footer background color by adding a background around line 1329
background: #111;

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 🙂

---

If you want to say thanks Follow me on Twitter | My Website

[moxiegirl]

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.

Gracias!

[Jeremy]

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.

🙂

---

If you want to say thanks Follow me on Twitter | My Website

[Author]

Posts