Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

123

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

  1. raindropsofsapphire
    Member

    Hi :) I couldn't see anything about this before so I hope I'm not repeating myself, I'm incredibly sorry if I am!

    I tried editing the CSS of my Kubrick theme blog http://www.raindropsofsapphire.com and I managed to make the main content collumn wider and the header. I want it wide enough to fit images of 500 wide, right now it only accepts 450 wide as standard but for some reason I can't seem to remove the white border lines in the middle of the page now that I made it wider. I attached a screenshot so you can see what I mean. Do you know which parts of the CSS I have to adjust to remove those lines? Also the background for the sidebar no longer seems wide enough either, is that because of those lines in the middle of the page? Once those are gone the side bar will fit correctly in its background? And I know I need to now make my header bigger to fit the new header space. This is all so new to me and so confusing.

    Thank you in advance!

    [IMG]http://i91.photobucket.com/albums/k312/lornaloo17/Picture172.png[/IMG]

    The blog I need help with is raindropsofsapphire.com.

  2. raindropsofsapphire
    Member

    I'm sorry the IMG link didn't work, here is the direct link to the screen shot.

    http://i91.photobucket.com/albums/k312/lornaloo17/Picture172.png

  3. thesacredpath
    Staff

    That is part of the background image for the

    You have to change the background declaration in #page to

    background:none;

    You will have to do the same with the background declaration in #footer.

  4. raindropsofsapphire
    Member

    Thank you so much! I will try it and let you know how it goes.

  5. raindropsofsapphire
    Member

    I still can't shift it, it looks like it's the previous borders from the original width and I don't know how to widen them to fit the new width so they are just stuck in their old position :(

  6. thesacredpath
    Staff

    Hmm, worked in Firefox. Let me do it on my test blog here.

  7. raindropsofsapphire
    Member

    Oh it finally worked!! Thank you :D But now I don't know how to move my side bar content over, haha! Here is what it looks like now:

    http://i91.photobucket.com/albums/k312/lornaloo17/Picture189-1.png

  8. thesacredpath
    Staff

    I added the following CSS to my CSS edit window (with nothing else in the window) and it worked:

    #page {
background:#ffffff none;
}

#footer {
background:none;
}

    I added the #ffffff background color definition otherwise there was no background color, and from looking at the screen cap you posted, that looked like what you were wanting to do.

    Also, did you paste the entire CSS into the CSS edit window? If so, that can cause problems here at wordpress.COM. At .COM, unless you are completely redoing all of the CSS, only paste in the specific selectors and declarations that you are changing or adding such as what I have above.

  9. thesacredpath
    Staff

    Let me look at it. Kurbrick is a very difficult theme to work with as the CSS is well... messy and bizarre.

  10. thesacredpath
    Staff

    If you are just increasing width by 50, then the width in #page should be at 810px by my calculations (760 + 50 = 810). Also, make the following changes.

    #sidebar {
margin-left: 595px;
}

.narrowcolumn {
width: 500px;
}

  11. raindropsofsapphire
    Member

    Yeah I just used my CSS that I had for Kubrick. I used to be .wordpress.com but I bought a domain so I am now just .com :) Although for some reason now I have completely lost all of my edits and previous ones I don't know which to restore as they are all dated the same and exact same time which is odd :( I don't think I'm cut out for this editing stuff. Things that seem simple in general like just making the main content wide enough to fit photos off 500 and then just making the header larger to fit are so complicated. Now when I have tried to do it over again it looks all wrong like a broken jigsaw puzzle as I forgot how to widen the main content column and header accordingly, what a mess lol.

  12. thesacredpath
    Staff

    Ok, my suggestion is to delete everything from the CSS edit window and then paste the below which will get you the wider post area without the background image and grey lines:

    #page {
background:#ffffff none;
}

#sidebar {
margin-left: 595px;
}

#footer {
background:none;
}

.narrowcolumn {
width: 500px;
}

    By putting ONLY the specific selectors, and the specific declarations you are changing into the CSS edit window, it is far easier to see what you have done. Anything that is NOT changing, do not put in the edit window. Also, make sure that "add to existing..." radio button is selected and then your changes are loaded after the original stylesheet and override the original declarations.

  13. raindropsofsapphire
    Member

    I added those exact things :) But I think somethings a little off still?

    http://i91.photobucket.com/albums/k312/lornaloo17/Picture190-1.png

  14. thesacredpath
    Staff

    Oops, I'm sorry, I missed a declaration above. I just went though and completely did the CSS for what I think you want. What you will have to do if this works for you is to create a new header image that is 790px x 192px, upload that new one, get the URL and then replace the URL in the #header image background declaration.

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

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

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

#footer {
background:none;
}

.narrowcolumn {
width:500px;
}

  15. thesacredpath
    Staff

    Take a look with the above, and then we will work from there.

  16. raindropsofsapphire
    Member

    Thank you!! I really really appreciate all of your help with this, you are so kind! I have done that and it looks pretty much perfect now except I still can't get the side bar links further to the right to fit the side bar properly. I haven't added a new header yet because I know that will be fine when I do it :) Is there one simple way to get the side bar links over to the right? Oh and sorry to be a pain again, is there a way to have the side bar with a background colour? It was previously light grey, or is that not possible after the alterations? I can't thank you enough :)

    http://i91.photobucket.com/albums/k312/lornaloo17/Picture191-1.png

  17. thesacredpath
    Staff

    I'm so sorry, that is my fault. I must need more coffee. I forgot to add the sidebar changes. Add the following to the edit window:

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

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

  18. raindropsofsapphire
    Member

    Yay!! Thank you :D That's so kind of you!! Is the background for the side bar right now with the little white bit on the side or do I need to lengthen the background for the side bar? Or will that work out when I upload my new header? I'm so sorry for all the questions and I really am appreciative :D

    I'm having problems uploading my image that's why I took so long, sorry! I will post a photo link in a moment.

  19. thesacredpath
    Staff

    You're welcome.

    Once you upload a new header and put the link to it in the CSS, it should line up with the edge of the grey background.

    After you get the image uploaded, let me know the URL of it and I'll put that into my CSS on my test blog and then if there are any adjustments you want to make, I'll be working from a good base.

  20. raindropsofsapphire
    Member

    Finally here it is :)

    http://i50.tinypic.com/jj8z5w.png

  21. 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!

  22. thesacredpath
    Staff

    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;

  23. thesacredpath
    Staff

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

  24. raindropsofsapphire
    Member

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

  25. thesacredpath
    Staff

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

  26. raindropsofsapphire
    Member

    Yeah :)

  27. thesacredpath
    Staff

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

  28. 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!!

  29. thesacredpath
    Staff

    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.

  30. thesacredpath
    Staff

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags