White Background

Community Forums Forums Design Tips and Tricks White Background

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Jeremy 9 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #49096

    moxiegirl
    Participant
    Post count: 71

    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/
    #49100

    Jeremy
    Participant
    Post count: 55

    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

    #49106

    moxiegirl
    Participant
    Post count: 71

    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!

    #49456

    Jeremy
    Participant
    Post count: 55

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.