Forums

[resolved] Few (hopefully simple) css questions to edit default theme (11 posts)

  1. helenbonner
    Member
    Posted 3 years ago #

    Hello,

    My siteis : http://www.storeyshop.co.uk and I would love some help on a couple of things I'd like to edit but can't work out..

    1) I am editing the default theme and am stuck on how to stop the white rectangle behind my banner image from showing/overlapping the edge of my page on the left?

    2) I'd like to lose the grey borders between my white page and my patterned background or make them thinner? I'd also like to make my white page be a closed-in rectangle with rounded corners rather than open at each end?

    Any help appreciated. I am new to WP and coding but I am learning fast!
    Thank you very much

  2. buddha trance
    Member
    Posted 3 years ago #

    1 - Lining up the overlapping white, increase left margin pixels in header

    #header {
    	background-color: white;
    	margin: 0 0 0 10px;
    	padding: 0;
    	height: 120px;
    	width: 740px;
    	}
  3. buddha trance
    Member
    Posted 3 years ago #

    2 - To remove the grey borders, delete the embedded style

    #page { background: url("http://www.storeyshop.co.uk/wp-content/themes/default/images/kubrickbgwide.jpg") repeat-y top; border: none; }

    3 - To close the page to the top and create rounded corners, under
    "Begin Structure"

    #page {
    	background-color: white;
    	margin: 0 auto;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
    	padding: 0;
    	width: 760px;
    	border: 1px solid #959596;
    	}
  4. helenbonner
    Member
    Posted 3 years ago #

    Thank you so much for your help!

    The only thing I can't find is where I go to delete the embedded style to lose the grey borders?

  5. buddha trance
    Member
    Posted 3 years ago #

    Check header.php of the Default theme, it's in there. :-)

  6. t31os
    Member
    Posted 3 years ago #

    Fair bit of styling is also handled in the functions.php file to...

  7. figaro
    Member
    Posted 3 years ago #

    If you are talking about the border on the right and left of the content area, that is part of the kubrickbgwide.jpg that makes up the content background in Kubrick. You'll need to edit that image to remove them. See it at the link below.

    http://www.storeyshop.co.uk/wp-content/themes/default/images/kubrickbgwide.jpg

  8. buddha trance
    Member
    Posted 3 years ago #

    Figaro,

    why editing the image? The entire embedded # page styling calling the image can be deleted, as there is already #page background white, with a 1px border. It did work, when I tested it...

  9. figaro
    Member
    Posted 3 years ago #

    If that works cool. I've never really dug into the css much...preferring to just edit the images. But, when I remove the page background in the past, it just filled with the gray background...I'm sure either process will work.

  10. buddha trance
    Member
    Posted 3 years ago #

    @figaro,

    I see, maybe the way I did it works only on Firefox... just wondering, though there is a page background color set as well... never know. I find the Default theme css to be built in kind of a weird way. :-)

  11. helenbonner
    Member
    Posted 3 years ago #

    Thank you again for your help :)

Topic Closed

This topic has been closed to new replies.

About this Topic