Want to Add Frame and Background Color Around Part of Post

thebusybibliophile · Member · Aug 25, 2011 at 12:58 pm
Copy link

Add topic to favorites
I’m using the Rounded theme, and I would like to change each post so that part of it, including a picture, is in a frame with a colored background. More specifically, if you look at my blog, I would like the picture and the book’s description to be in a colored box, so it is more separate than the review of the book in the rest of the post. I have upgraded to CSS, but I’m not sure exactly how to do that.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 25, 2011 at 6:51 pm
Copy link
You can do this on a post by post basis by wrapping what you want highlighted in div tags and then you use inline CSS to style things such as the below:

<div style="background-color: #ebeb3d; padding: 5px; margin: 10px; border:3px solid #CC0000;">All the text and such you want in the box here</div>

This could also be added to the custom CSS and then you would again manually wrap the stuff you wanted highlighted in divs and assign a class to that div.

<div class="book">All the text and such you want in the box here</div>
designsimply · Member · Aug 25, 2011 at 10:14 pm
Copy link
That’s what I would recommend too. I like the 2nd option best. It gives you the freedom to change all of them once at a later date if you decide to update the look again.
thebusybibliophile · Member · Aug 26, 2011 at 3:27 pm
Copy link
Thank you for the suggestion. I hate to be that girl, but could be much more specific in those instructions? I’m still learning CSS and I think that’s above my skill level right now.
thesacredpath · Member · Aug 26, 2011 at 4:39 pm
Copy link
The following you would add to the CSS edit window and then adjust the values as you desire.
```
.book {
background-color: #ebeb3d;
border:3px solid #CC0000;
margin: 10px;
padding: 5px;
}
```
In the post HTML tab, you would then wrap the paragraphs/image/etc., with div tags and set the “class” in the opening div like this. You do this each time you need the box around part of the content in a post.

<div class="book">All the text and such you want in the box here</div>
thebusybibliophile · Member · Aug 26, 2011 at 6:45 pm
Copy link
That is exactly what I needed. It works like a charm. Thank you so much!
thesacredpath · Member · Aug 26, 2011 at 8:06 pm
Copy link
You are welcome.

No items found.