Need help? Check out our Support site, then


Add border around section of post

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

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

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

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

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

  6. Thanks also for the blockquote suggestion - that's good to know too :)

  7. sensuouscurmudgeon
    Member

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

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

  9. sensuouscurmudgeon
    Member

    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>

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

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

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

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

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

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

  16. 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?

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

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

  19. You are welcome.

  20. 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?

  21. Links in pages and posts would be these:

    .post-entry a {
    color: #990000;
    }
    
    .post-entry a:hover {
    color: #000000;
    }

    Menu text would be these:

    #menu a {
    color: #999999;
    }
    
    #menu a:hover {
    color: #000000;
    }

    Yes, once you purchase the upgrade, make sure that "add to existing..." is selected and then click save stylesheet and your changes and additions will override the existing stuff in the CSS.

  22. The solution that thesacredpath gives you is far superior to mine, for the exact reason he gives: you should really use the right features for the right thing, so by creating a recipe style, you accomplish that. Excellent work!

  23. Yes, thank you thesacredpath for all these solutions - and the clear explanations.

    Might I trouble you for one more?
    I'd like to modify the font and font size for the date stamp... how would that look? :)

  24. I think this will get you going.

    Day (number)

    .post-date strong {
        font-size: 4.9em;
        font-weight: normal;
        letter-spacing: -0.1em;
    }

    Day (name)

    .post-date em {
    font-size: 1.9em;
    }

    M/Y

    .post-date span {
    font-size: 1.1em;
    font-variant: small-caps;
    }

    General

    .post-date {
    font-family: "Adobe Garamond Pro",Garamond,Palatino,"Palatino Linotype",Times,"Times New Roman",Georgia,serif;
    font-style: italic;
    }
  25. Perfect, thanks so much!

  26. Hi again,

    @thesacredpath:
    I have now been trying your solution for the date stamp, but for some reason it is not working. Whenever I enter a new font size or style, no change occurs when I preview. Any ideas what I may be doing wrong? I've copied your code exactly into the CSS.

    I have also just customized the fonts, could this be a factor?

Topic Closed

This topic has been closed to new replies.

About this Topic