Decorative Page Borders

  • xamublack

    (@xamublack)


    11 years, 10 months ago

    Hello you all, I am not very well versed in WP so please bear with me.

    I’ve been trying to find the best method to do decorative page content borders similar to this theme:

    http://themeforest.net/item/elegantia-restaurant-and-cafe-wordpress-theme/full_screen_preview/3678945

    I have found bits and pieces of code around the web like this:

    #page {
    background-image:url(http://www.domain/myimage.png);
    background-position:initial initial;
    background-repeat:no-repeat repeat;
    padding:0 20px;
    }

    but they have only been partial solutions and broken.

    I could easily create and cut the transparent artwork in Photoshop, but was hoping that someone had done this before and could just paste a full CSS code snip for #page (or whatever) you used to accomplish this and hopefully I can reverse engineer it.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 10 months ago

    It’s still not clear what you want to do;

    decorative page content borders

    What does that mean, specifically? In the theme you linked can you take a screenshot and cut out the bit you’re referring to?

    Michael

    (@alchymyth)

    11 years, 10 months ago

    what theme are you working with?

    your question seems to be referring to pure formatting, which is not specicifally related to WordPress.

    have you tried to ask in a CSS forum like http://csscreator.com/forum ?

    using a browser inspection tool like Firefox’ web developer add-on should give you enough information about the html and CSS structure of those content borders.

    Thread Starter xamublack

    (@xamublack)

    11 years, 10 months ago

    Thanks Andrew and alchymyth. Here is a screenshot of the area I’m talking about.

    http://bustedlip.com/images/border.jpg

    I just want to surround the page content (and post content I guess) with an image border that has a little decorative graphic flourish at the top and bottom with matching side images.

    The graphics are no problem for me but the CSS has proven a bit above my skill level.

    I never thought to pursue help from a pure CSS community because part of my problem was not knowing enough about which CSS to edit in WP.

    I was hoping someone had done this before and could post a block of code showing what they had done and where they put it. That way I could dissect it, use my own imagery and padding etc.

    Thread Starter xamublack

    (@xamublack)

    11 years, 10 months ago

    Oh and I wanted it to be pretty independent of the theme so that I could reuse it for any design or theme I choose.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 10 months ago

    Okay so you can use CSS border to achieve the golden thin border you see, as it is done on that themeforest them: http://snag.gy/lSKrs.jpg

    Then you can use an image for the fiddly bits: http://inspirythemesdemo.com/elegantia/wp-content/themes/elegantia-theme/images/container-top.png

    Michael

    (@alchymyth)

    11 years, 10 months ago

    simply dissect the html structure and CSS of your posted example site;

    they have an extra div at the top and bottom of the content div, formatted with absolute positioning and a background image -the ‘bumps’, and some border CSS for the content div.

    using a browser inspection tool like the mentioned Firefox web developer add-on should be of great help examining the formatting.

    Thread Starter xamublack

    (@xamublack)

    11 years, 10 months ago

    Thanks again guys. What you are saying to do appears to be the best course of action, but it is likely a bit above what I’m capable of just yet. I do use Firebug a lot but only for smaller tasks like finding where to apply text color and padding.

    One more quick question if I can. Andrew, just outside the golden thin border that you mentioned it appears there is a drop shadow around the whole thing. How were they able to have that shadow fall only around the outside of the ‘fiddly bits’ (and not around the little image square itself). Did you see the chunk of code that addresses that?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 10 months ago

    If you look closely the shadow no longer appears to be on the fiddly bits, it’s just an illusion. What seems to be a shadow is just a solid border made in the image itself http://snag.gy/iZhmg.jpg

    The squared shadow around the content is made using CSS3 ‘box-shadow’ and you can generate some of that code for you with this tool http://css3generator.com/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 10 months ago

    Then again if you want a shadow on the fiddly-bit image you put it on using an image manipulating tool like Photoshop

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Decorative Page Borders’ is closed to new replies.