Add border around section of post
-
Hello,
I’m working on a food blog where a section of each post contains a recipe. I would like to add a colored border around the recipe to help it stand out from the rest of the post. Just a simple 1-pixel blue border. Is this possible and if so, how? Would I need to insert this code every time I write a post? I’m working with the Chateau theme. Any help much appreciated! Thanks!The blog I need help with is: (visible only to logged in users)
-
Hi there,
You may get better and stronger answers following mine, but perhaps an easy solution would be to use the “blockquote” feature. You could modify just that CSS to style how you would like to see the recipe (perhaps stripping out any other style it has now and replacing it just with “border: 1px solid blue;”
It’s a hack, more so than a solution, but it would be quick and easy.
Good luck!
-Z -
What you can do is to define a rule in the CSS that will style things as you wish and then enclose the recipe in a div and declare that class in the opening div tag like this:
<div class="recipe">All the recipe stuff here</div> -
I’ll mention that the blockquote rework would also work, but then if you wished to have a standard blockquote in a post or page, it would take on the styling of your recipe.
If you want to do the CSS and the div suggestion I gave, just let us know and we can help you with that.
-
-
-
You don’t need CSS, and you don’t need to use blockquote. The code for a border is this:
<div style="border:3px solid blue;padding:1em;"><p style="margin-top:5px;margin-bottom:5px;">your text here</div>You can tinker with the color of the border, its thickness, and even the style (it can be dotted, for example), and the padding (space between border and text).
-
It would be better, since it appears they have the Custom Design Upgrade (they’ve posted in the CSS forum) to put it into the CSS and that way you don’t have to do all the HTML in the post each time you want to use it.
Just my opinion, but yes you are right. You can carve it into the post HTML each time you add a recipe.
BTW, missing ending “p” tag in your example. Oh and also, if you have 10 paragraphs in your recipe, you have to add the opening p styling to each of those paragraphs individually. Far more work than a single class declaration in the opening div tag as I suggested.
-
You’re right, sacredpath. It’s easier for single paragraphs. In case someone without the CSS upgrade looks at this thread, the correct code is this:
<div style="border:3px solid blue;padding:1em;"><p style="margin-top:5px;margin-bottom:5px;">your text here</p></div> -
Thanks for all the suggestions!
@sacredpath: I am planning to get the Custom Design Upgrade, so could you help me with the specifics of the CSS solution? The recipes tend to be quite long with multiple paragraphs, so would be great not to have to tinker with too much code everytime I post. Thanks!
-
Certainly. If it is ok, I’m off to bed now as it is past midnight here in the middle of the Pacific. I’ll work on that in the morning for you.
-
-
Hi! Absolutely, here is a link:
http://themuffintest4.wordpress.com/2012/05/25/mostly-whole-wheat-no-knead-pizza-dough/
The recipe starts at the 3rd paragraph.
Thanks!!
-
-
Here is the CSS to add as a starting point:
.recipe { border: 2px solid #CC0000; padding: 8px 10px 0 10px; margin-bottom: 25px; }You can edit the color and also the padding. The padding values are top, right, bottom, left.
After adding this to the CSS, you would add this at the beginning of the first line of the recipe in the HTML tab in the editor:
<div class="recipe">and then add the closing div tag to the end of the last line:
</div>Any questions, or additional styling you want to do, or if you have a problem, just post back here and I’ll keep an eye on this thread.
-
That works perfectly, thank you so much!
I do have some other styling changes I’d like to try, and there’s a very good chance I may need some additional help, so I will definitely post back here over the next few days. Would be super grateful if you could keep your eye on it, as you’ve been incredibly helpful :)
PS. In the middle of the Pacific…. curious where you are located?
-
You are welcome, and I keep an eye on the CSS forums and help out when I can.
I live on Hawai’i Island, on the west side.
-
Ah, Hawaii! Sounds lovely. Thanks again and I’m sure I’ll be posting more questions soon…
-
-
Some more styling questions!
I would like to change the colour of the links within posts, and also the colour of the menu headers. Since I know so little about coding in general, I’ve just been trying to identify these bits and pieces within the original CSS, and then copying/pasting/modifying. But I’m having trouble locating these in particular, and I still find it a bit hard to write lines of code from scratch – can you help?
Have just been testing things out so far in the Design upgrade preview. Once I purchase the upgrade, if I just add in my changes, will they then just override the original styling?
- The topic ‘Add border around section of post’ is closed to new replies.
WordPress.com Forums 