Background color for post/page text

  • Resolved VSH.si

    (@vshsi)


    10 years, 2 months ago

    I have created a transparent body background. Now I would like a white box behind the page and post text. I tried this code:

    p {
    background-color: ffffff;}

    But it creates a box that is only as big as the text. If I put a border comand in the code then it creates another white box on top of the page, under the header image.

    This code is also very impractical for other page users that won’t use the <p> code in tiping posts.

    Is there a better way to make this work?

    The page

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi,

    You could add your #fff background like this:

    .col-lg-9 {
width: 75%;
background-color: #fff;
}

    and then nudge your sidebar up a tad to align with your “content” area:

    widget-inner {
margin-top: -10px;
}

    As you add more content to the page it should drop your white block down to fill the empty space. Another Alternative would be to make your entire container white and use a opaque background:

    background: rgba(255,255,255, 0.5);

    Cheers.

    Thread Starter VSH.si

    (@vshsi)

    Thank you for the quick reply.

    This code also changes the static first page and adds a white container. On this page I want only the icons to be coloured.
    The page

    Only the text on the other pages should have a white background.

    hannah

    (@hannahritner)

    @vsh.si,
    I don’t know of an easy way to do this because every widget/shortcode/text have different classes. I think your code above is the best bet and you can just add some padding like this:

    p {
background: #fff;
padding: 10px;
}

    To remove the white bar beneath the header you can add this:

    .kad_tagline {
display: none;
}

    Then for the widgets and such that do not apply you’ll have to separately add their classes.
    Probably not the answer you were hoping for, but hope it helps nonetheless.
    Happy New Year!
    Hannah

    I will just say that if your wanting it to be different on each page I recommend using your own class and div tags. So where you want the white background just surround the text in a div with a custom class. For example:

    <div class="myclass">
<p>text</p>
</div>

    Then use css like:

    .myclass {
background: #fff;
padding: 10px;
}
    Thread Starter VSH.si

    (@vshsi)

    The division option is the easiest and best. As usual I tried to over complicate the process.

    Thank you and have a good year

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Background color for post/page text’ is closed to new replies.