I can’t remove these white lines in the middle of my theme

  • Unknown's avatar
    raindropsofsapphire · Member ·

    I just saw your last post, thank you so much!! That’s so kind of you!! You are so helpful, I work in fashion and I work with denim so I don’t know if you are into premium denim at all but if ever you need any help with that I would be happy to :) I hope I can repay the favour sometime!

  • Unknown's avatar
    thesacredpath · Member ·

    On the header image, upload it to your media library and when it finishes uploading, you can get the URL of that image from the grey colored field at the bottom of the upload page. You want to put that into your CSS in the #headerimg background declaration replacing the URL that is there.

    Also, I made a slight adjustment on the sidebar content margins. change the margin declaration in #sidebar ul, #sidebar ul ol to the following. It will keep the text a little off the right edge of the grey area.

    margin:0 10px;

  • Unknown's avatar
    thesacredpath · Member ·

    You are very welcome by the way and thanks for the offer.

  • Unknown's avatar
    raindropsofsapphire · Member ·

    Thank you :) What exact size do I make the new header to fit the header space without any border/margin showing through?

  • Unknown's avatar
    thesacredpath · Member ·

    You want the image to cover all the white at the top, is that right?

  • Unknown's avatar
    raindropsofsapphire · Member ·

    Yeah :)

  • Unknown's avatar
    thesacredpath · Member ·

    OK, let me work on that for you. It will be a few minutes. I just made myself a sandwich.

  • Unknown's avatar
    raindropsofsapphire · Member ·

    Oh take your time!! I’m in no rush :) I’m going to make a brand new banner for my site anyway before I officially put in all the editing, so it will probably be next week I launch it :D Enjoy your sandwhich!!

  • Unknown's avatar
    thesacredpath · Member ·

    I did enjoy the sandwich. Fresh tomatoes and lettuce from the garden, a little turkey and some sharp cheddar cheese with a little mayonnaise and spicy mustard.

    I’ve changed several things to make it all align nicely.

    First off, I changed the height and width for #header and #header image to 192px 810px respectively. Next I widened of #sidebar to 215px so that there is no white shwing to the right of it.

    I took your current image and resized it to the dimensions I put into #header and #headerimg so that I could upload it and get everything right. You can see the results of all that at http://flippintestblog.wordpress.com/ .

    Instead of going through each thing, and telling you change this and add this, I’ve put the entire CSS from my test blog below: You can look at it compared to what we had done previously to see my changes.

    #page {
background:#ffffff none;
width:810px;
}

#header {
background:none;
width:810px;
height:192px;
}

#headerimg {
background:transparent url('http://flippintestblog.files.wordpress.com/2010/06/cropped-raindrops-of-sapphire-logo-2.jpg') no-repeat scroll center top;
width:810px;
margin:0;
}

#sidebar {
background-color:#eeeeee;
margin-left:595px;
width:215px;
}

#sidebar ul,#sidebar ul ol {
margin:0 0 0 10px;
}

#footer {
background:none;
}

.narrowcolumn {
width:500px;
}

    Let me know if there is anything else you wish to change.

  • Unknown's avatar
    thesacredpath · Member ·

    Oh, and the header needs to be 810px x 192px with the current design.

  • Unknown's avatar
    raindropsofsapphire · Member ·

    WOW!! You are truly amazing! Do you work with website design and computer programming? Look how awesome it looks in the preview :D I’m also experimenting with what colour I want my background and sidebar, I found a colour chart to help with that, it’s working great!! I’m SO happy!!!!! I can’t thank you enough :D

    Also I have one last question, you’re gonna kick me in a moment lol! How do I make my side bar background stay that colour all the way to the bottom of the blog? Like on my current theme http://www.raindropsofsapphire.com it’s running all the way down, the new one stops after the text?

  • Unknown's avatar
    thesacredpath · Member ·

    Thanks. I do web design and management mostly working with wordpress and Joomla (if the client needs more horsepower), but wordpress is steadily catching up to the content management packages that now occupy the top of the hill.

    The issue with the grey sidebar is that the grey will only extend down to the bottom of the sidebar, which is determined by the bottom of the last widget in the sidebar (plus whatever bottom padding is declared).

    To make it extend to the bottom of the content area, we would have to create a repeating 810px wide x 1px tall image with the grey on the right end. I can do that rather quickly and was actually thinking of doing even before you asked about it since it makes things look sort of untidy and unfinished.

    I’ll work on that this afternoon and then post a link to that image so you can download it and post the changes needed in the CSS.

  • Unknown's avatar
    raindropsofsapphire · Member ·

    Thank you so much!! You are wonderful :D You must be really good at your job! Do I need to edit the border section too? My one I have right now has a thin grey border around the whole of the blog, which section of the CSS is that one? :)

  • Unknown's avatar
    thesacredpath · Member ·

    Oops I see that now. Add the following to #header (why they would have put 1px of padding there I have no idea)

    padding:0;

    Also, add the following to #footer given that we are going to be using a background images for the content/sidebar area and don’t want it to show in the footer area.

    background:#ffffff;
    width:810px;

  • Unknown's avatar
    thesacredpath · Member ·

    I should have put those between backticks. If you copy and paste, use the following

    padding:0;

    background:#ffffff;
width:810px;
  • Unknown's avatar
    raindropsofsapphire · Member ·

    Yep, that all looks perfect, everything is aligned accurately so far :)

  • Unknown's avatar
    thesacredpath · Member ·

    OK, I did the image and have it up on my test blog. I did a little other tweaking as well and moved the sidebar text over a tad further to the right to give a little more grey space on the left. I think it looks better.

    In particular, look at the footer at the bottom of the page. Right now the grey stops above it, and it looked a little strange, so I put a slightly darker top border line on the footer which I think looks much better.

    The alternative would be to let the grey continue on down to the bottom and then rework the footer to where it was centered in the white area.

    Let me know which way you want to go and I’ll give you the code changes and the link to the background image.

  • Unknown's avatar
    thesacredpath · Member ·

    Another alternat come to think of it would be to put the same grey background on the footer without the top border line.

  • Unknown's avatar
    raindropsofsapphire · Member ·

    I never noticed that before!! Thanks for pointing that out, which do you think would look the best out of all of those options? Whichever blends in best I guess :)

  • Unknown's avatar
    thesacredpath · Member ·

    Sorry for the delay, I had wireless internet issues with my Verizon mi-fi unit. It seems to be working again now. It’s a little fickle.

    Here it is with the sidebar going all the way to the bottom and the footer text centered on the white area.

    Here it is with the sidebar stopping at the top of the footer and the slightly darker grey line.

1 2 3 4
  • The topic ‘I can’t remove these white lines in the middle of my theme’ is closed to new replies.