Add border around section of post

  • Author
    Posts
  • #925383

    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 thelittlestpollard.wordpress.com.

    #925558

    zandyring
    Staff

    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

    #925563

    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>

    #925579

    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.

    #925588

    Hi! If you could help me with the specifics of the div suggestion, that would be super!

    #925590

    Thanks also for the blockquote suggestion – that’s good to know too :)

    #925615

    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).

    #925634

    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.

    #925644

    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>

    #925683

    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!

    #925684

    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.

    #925685

    Can you give me a link to a post with a recipe on your site?

    #925686

    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!!

    #925687

    Got it and I’ll work on the CSS and such here in a few minutes.

    #925688

    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.

    #925689

    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?

    #925690

    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.

    #925691

    Ah, Hawaii! Sounds lovely. Thanks again and I’m sure I’ll be posting more questions soon…

    #925692

    You are welcome.

    #925700

    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.