Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Adding CSS to Enclose Text in a Box

  1. petstech
    Member

    What can one do to cause text to appear in a shaded box on a WordPress page?

    In a blog on WordPress.org, I used CSS like that, below, to enclose text in a box. Using Custom Design, can CSS code be added to a the theme do do the same thing? If so, how would it differ, as this code doesn't do it in the Wu Wei theme.

    CSS

    /* Inserts<br /> --------------------------------------- */<br /> body .insert { background: #fcfeff; margin: 0 0 1em 0; border: 1px solid #cfdee5; padding: 9px; }<br /> body .insert h3 { border-bottom: 1px solid #cfdee5; }<br />
    HTML

    Boxed Insert<br /> <p class="insert">IMPORTANT: Until further notice,...</p><br />

    The blog I need help with is gotcll.wordpress.com.

  2. timethief
    Member

    @petstech
    All CSS editing is theme specific at WordPress.com. Please post an active link to the blog that you are referring to starting with http://

  3. petstech
    Member

    Here's a link to the prototype-test website/blog (using the Wu Wei template) which is in very early stages of development:
    http://acllpatientswebsite.wordpress.com/

    An alternative prototype, using the Twenty Ten template, is at
    http://gotcll.wordpress.com/

  4. timethief
    Member

    Hi again,
    Currently only one Volunteer and Staff provide CSS support. Staff can view private blogs but Volunteers can't. Please be patient while waiting for assistance and best wishes with your CSS editing.

  5. thesacredpath
    Member

    Both of those sites are set to private which means we volunteers cannot see them and since I've decided I won't pay $30 for the Custom Design Upgrade and not get compensated in anyway, I have to be able to see the site you are talking about. Either set it to the second option under settings > privacy temporarily so that I can see the site, or add me as a user at settings > privacy.

  6. thesacredpath
    Member

    Ok, this is a bit of a guess on my part.

    .insert {
background: none repeat scroll 0 0 #FCFEFF;
border: 1px solid #CFDEE5;
padding: 9px;
}

.insert-title {
border-bottom: 1px solid #CFDEE5;
}

    The h3 stuff is going to have to be separate otherwise it will also take on the background, border and padding settings in .insert which is I suspect designed for the paragraphs only.

  7. thesacredpath
    Member

    And actually, .insert can be done this way instead. Firebug automatically puts in all that other stuff which is not needed.

    .insert {
background: #FCFEFF;
border: 1px solid #CFDEE5;
padding: 9px;
}

  8. petstech
    Member

    @thesacredpath, I have done as you suggested, though I don't yet have any specific boxed text candidates for you to see (other than, possibly, the 'Notes' on the Getting Started page) as the website/blog is in a very early stage of design/development.

    BTW, the first site used Custom Design Font and CSS settings, while the second doesn't. I'm favoring the second as I prefer the sidebar to the footer for the widgets I want to use. Also, you should know, I intent this to be more a website, than a blog; therefore, the posts, which will be infrequent, appear on Occasional Musings, rather than on the Front Page.

    Thanks for responding to my query.

  9. petstech
    Member

    @thesacredpath, I have done as you suggested, though I don't yet have any specific boxed text candidates for you to see (other than, possibly, the 'Notes' on the Getting Started page) as the website/blog is in a very early stage of design/development.

    BTW, the first site used Custom Design Font and CSS settings, while the second doesn't. I'm favoring the second as I prefer the sidebar to the footer for the widgets I want to use. Also, you should know, I intent this to be more a website, rather than a blog; therefore, the posts, which will be infrequent, appear on Occasional Musings, rather than on the Front Page.

    Thanks for responding to my query.

  10. petstech
    Member

    @thesacredpath, as you can see on acllpatientswebsite.wordpress.com, I put in your first suggestion and it worked! Now that I know there's a way, I'll try your second suggestion and also try (1) to center the box and the text in the box, and (2) limit the width of the box so that it's centered and indented, left and right ~10%.

    Again, thanks for the suggestions.

  11. thesacredpath
    Member

    Margin right and left will indent the box on the right and left sides. As far as centering the text (if you are talking center alignment of the text), I would suggest doing that from within the text editor instead since you might not always want the text centered.

    .insert {
background: #FCFEFF;
border: 1px solid #CFDEE5;
margin-left: 10%;
margin-right: 10%;
padding: 9px;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags