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

  • Author
    Posts
  • #488466

    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.

    #488650

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

    #488685

    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.

    #488713

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

    #488725

    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 :(

    #488726

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

    #488727

    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:

    #488733

    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.

    #488734

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

    #488737

    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;
    }
    #488740

    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.

    #488745

    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.

    #488749

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

    #488751

    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;
    }
    #488752

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

    #488766

    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 :)

    #488767

    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;
    }
    #488774

    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.

    #488776

    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.

    #488778

    Finally here it is :)

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