• Resolved Leeballz

    (@leeballz)


    I’m still trying to get my blog styled just right and have added some content so that I can get a feel for the layout. After I get that done, I will add the content. But I’m running into an issue with the border.

    https://timeisnotlinear.com/Blog/

    Theme: WordPress Default 1.6 by Michael Heilemann

    How do I get rid of that grey box around the border? I’ve looked around in the style.css, but can’t find it anywhere. Anyone know where I need to go to get rid of this and what code I would need to remove it?

    Thanks in advance for the help.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The grey border is part of your themes images. Look in the /themes/default/images/ directory to find the images that will need editing.

    Thread Starter Leeballz

    (@leeballz)

    Couple of issues.

    If I trim the fat, so to speak, and delete the grey sections, when I replace the image files in /wp-content/themes/default/images/ everything is offset and misaligned, And the funny thing is, I can see the default blue header poking out from behind it (because of the misalignment).

    If I edit the image in paint.NET and set a layer behind the original image, set it to transparent, then erase the area I don’t want, it looks just like it did before, only white. I left this attempt in place so you can see it. (If you look close, you can still see the grey over the white sections of the background. Not sure if that’s fixable.)

    So I’m not sure which way I should be going. Trimming the fat and working on getting it aligned correctly, trying to get the background to fill in the transparent area, or coming up with a different line of attack.

    Trimming the image sizes to get rid of the unwanted color (thus making the images smaller) is not going to be a good solution. Editing the existing images to match your color customizations using image editing software is probably the best attempt.

    The Kubrick theme style usually describes “#header” in more than one place.

    the blue background color that you see.
    around line 253;

    #header {
    background-color: #73A0C5;
    height: 200px;
    margin: 0pt 0pt 0pt 1px;
    padding: 0pt;
    width: 758px;
    }

    I’m afraid the rest might all rely on image editing skills.

    Thread Starter Leeballz

    (@leeballz)

    Well, I’ve tried several solutions like moving the rounded corners of the white border out to the edge (which eliminated the grey on the sides) then filling in the top with black and the section outside of the rounding corners with black. This looked clean, but the spacing just didn’t look right between the top of the header image and the sides. In the end, it looked better just to leave the grey, but round the edges. As you can see, I’ve done that on the header, however, there is still that grey line I mentioned before separating this image from the background and you can see it sticking up from the rounded images.

    How do I remove this?

    Thread Starter Leeballz

    (@leeballz)

    I should state, that grey line is not in the image itself, so must be something in the code having to do with images.

    around line 253;

    #header {
    background-color: #73A0C5;
    height: 200px;
    margin: 0pt 0pt 0pt 1px;
    padding: 0pt;
    width: 758px;
    }

    Try commenting that out – don’t remove it just in case it messes something up and you have to fix it, but just comment it out like this;

    /* #header {
    background-color: #73A0C5;
    height: 200px;
    margin: 0pt 0pt 0pt 1px;
    padding: 0pt;
    width: 758px;
    } */

    See if that makes any difference.

    Thread Starter Leeballz

    (@leeballz)

    Commented that area out and it seems to have done the trick. Now I just need to adjust the footer image and comment out that section and that should take care of that area of redesign for now. Well, except for the fact that the black used in Paint.NET doesn’t seem to exactly match the black used in my background image, but I can live with that.

    Thanks for the help.

    Thread Starter Leeballz

    (@leeballz)

    Actually, I guess I should also comment out the #page section to keep it uniform. I take it the #page section and #footer section I would need to comment out are the one’s on the same section as the #header I commented out earlier.

    I don’t think you will get the desired result if you comment out anything in #page and #footer. I suspect very bad things will happen to your layout.

    Thread Starter Leeballz

    (@leeballz)

    Yeah, and when I rounded the corners of the footer, I had the same grey line across the bottom. Also, though the top (and the black I colored the corners to round them) will never end up on the white portions of the background, the footer will on different resolutions or shorter pages. So in the end it was best to just straighten the rounded sections of the footer. Kind of adds a little style to it too with the top being rounded and the bottom being straight.

    I think that does it, thanks again for the help.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Grey Box Behind Border’ is closed to new replies.