Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Sweet Blooming Roots

    (@sweet-blooming-roots)

    I would prefer the front page to have no border. Instead I’d like the whole page to be of one color. Can anyone help me? Please and thank you! ??

    CrouchingBruin

    (@crouchingbruin)

    It’s always helpful to include a link to your site when posting a question. It makes it easier to give specific suggestions.

    You can add this CSS rule in your child theme’s style.css file (if you created a child theme) or use a CSS plugin like Jetpack or Custom CSS Manager):

    body.home.custom-background,
    .home #header,
    .home #page:before,
    .home #page:after,
    .home #main,
    .home #prefooter
    {
       background-image: none;
    }

    The use of the .home class in the selectors will limit the rule to just the front (home) page; all of your other pages should remain the same.

    Thread Starter Sweet Blooming Roots

    (@sweet-blooming-roots)

    Thank you so much!!! It totally worked! I haven’t launched my website yet, that’s why I didn’t include my link, cause it would probably just say coming soon…

    Maybe you also know how to get rid of the white space between the logo and the very top of the page? I would prefer to have no white space here. I’m using the sugar and spice theme. I’m not very familiar at all with this whole coding thing, but I’m slowly learning. Thanks so much for your time!

    CrouchingBruin

    (@crouchingbruin)

    There are two rules you can add that will affect the amount of space between the header and the top of the page:

    .home #page:before {
       height: 35px;
    }
    .home #page {
       margin-top: 2em;
    }

    The values listed are the current values. Reduce them as desired. I would probably start on the first rule, first, and if 0 isn’t small enough, adjust the second rule. For the second rule, values can be listed in px (pixels) or em, which is basically the equivalent of the height of the current font, i.e., 1em is the same size as the current font, 2em would be twice the size of the current font. Fractional values can also be used, like 1.5em. Pixels (px) requires whole numbers. If you use 0 for either of the two values, you can leave off the units (px or em).

    Thread Starter Sweet Blooming Roots

    (@sweet-blooming-roots)

    Thanks a million! Once again it worked! Changing the 35px to 0 only reduced it, and then I couldn’t find “margin-top”, only margin: 2em auto 0. When I changed this it definitely took away the white space at the top of the page, but it also shifted the whole page content to the left. So I just typed in or added the following on my own and that fixed the problem:

    #page {
    margin-top: 0;
    }

    CrouchingBruin

    (@crouchingbruin)

    In my original post, I made mention of using a child theme or using a CSS plugin. That’s the way you should be adding the CSS, and not modifying the theme’s style.css file directly. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core, then your changes to the theme files will be lost. You can read about creating a child theme here, but since you’re just making CSS changes now, a plugin like Custom CSS Manager will work.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Getting rid of the home page border’ is closed to new replies.