Image border to the page template

  • Resolved parpfarp

    (@greenflyaphid)


    13 years ago

    Can i add an image border to the page template? I want the page content area to have a repeating image. is this possible?

    i have seen the following forum topic http://wordpress.org/support/topic/page-border-1 but cannot get this to work

    in your header, under the body but before everything else, add this:

    <div id=”wrapper”>

    At the end, after the closing footer division and before the closing </body> tag, add this:

    </div><!– /wrapper –>

    That should do it.

    i am using 3.5.1 and pagelines but would like this to work without pagelines if possible.

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    Sorry, CSS is completely theme-specific.
    Which theme is it you’re looking to customise?

    Thread Starter parpfarp

    (@greenflyaphid)

    13 years ago

    Hi Andrew – thanks for the response – i am using Pagelines Framework 2.4.1. i could ask them for support but i was wondering if this was something that wordpress could handle in case i wanted to do a similar thing on standard themes.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    This is generic to WordPress:
    Install this Custom CSS Manager plugin and use its section of the dashboard to hold CSS modifications.

    Can you link the Pagelines webpage where you want the image border?

    Thread Starter parpfarp

    (@greenflyaphid)

    13 years ago

    PAgelines has the ability to do this already (CSS)

    http://www.thecaseofthecuriousbride.com/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    These changes (below) are specific to your Pagelines theme:

    Try adding this for image borders:

    img {
 border: 5px solid deeppink;
}

    And this for your content to have a background:

    body #page .page-canvas {
 background: url("/wp-content/themes/pagelines/path-to-image/et-cetera/image.png");
}

    –
    The image border may or may not work on other themes. It depends on how they are coded.

    Thread Starter parpfarp

    (@greenflyaphid)

    13 years ago

    wow! that is amazing – what amazing support. Blown Away – let me try it out 🙂

    Peace ☮

    Thread Starter parpfarp

    (@greenflyaphid)

    13 years ago

    i think i mislead you – what i want (and i am not 100% sure how to convey it) is to have a ‘frilly’ or paper stamped image as the border of the page with the background underneath. something like this — http://imgur.com/jqHk2q0

    you can see the border on the left – i would want it on both sides. is this possible?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    Just trying to remember what your site looked like.
    If you want your frilly image as the border, what you’d do is assign it as a background image to a surrounding <div> and then apply padding to that <div> – Difficult to envisage I know.

    Look at this CSSDesk page I made to help illustrate it: http://cssdesk.com/SbXhW .

    If I have misunderstood what you mean by the ‘frilly’ image, please can you draw a box around it and then send another screenshot?

    Thread Starter parpfarp

    (@greenflyaphid)

    13 years ago

    Ok thanks – now a little bit closer to the goal.

    here is what i have now http://d.pr/i/i916

    what i am trying to do is have this as the border on the left hand side of the page content. You can see it is repeated over and over again over the background. Does this make sense?

    I have tried repeat:none; but that doesn’t work and is obviously wrong.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    Sorry, I cannot see your website anymore.

    Thread Starter parpfarp

    (@greenflyaphid)

    13 years ago

    sorry i will remove the holding page.

    this is the example of what i want to achieve http://d.pr/i/eSzo

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    Try adding this CSS:

    body.fixed_width #page,
body.fixed_width #footer,
body.canvas .page-canvas {
 max-width: 1140px;
 background: url("/the-url-to-your-frilly-background-image") repeat-y;
 padding: 0 20px;
}

    Thread Starter parpfarp

    (@greenflyaphid)

    13 years ago

    ok thanks – slightly modifying that

    #page {
    background-image:url(http://www.thecaseofthecuriousbride.com/wp-content/uploads/2013/05/border-curious-small.png);
    background-position:initial initial;
    background-repeat:no-repeat repeat;
    padding:0 20px;
    }

    i get the frill to the left of the page. i can move the frill but only within the 20px. so i cannot get it to the right as well as the left. i undertsand i need the opposite image to get it to appear on the left the other way around and i can use the CSS to move it alongside the content border. Now i have to figure out a way to get it to the right as well.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    You can remove the “repeat-y” if you want it on both sides.
    What I would do here is make the frilly background image 1140px wide so you can just repeat it on the Y axis.

    Thread Starter parpfarp

    (@greenflyaphid)

    13 years ago

    of course – that is the answer.

    Thank you very much

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

The topic ‘Image border to the page template’ is closed to new replies.