Adding post divider and border to R755 template

  • I have two separate issues I believe are related to the template I’m using- R755. First: I’ve tried placing an image between my posts using the suggestions listed on the boards below, to no avail:

    adding the following code to my stylesheet:
    div.post {
    border-bottom:1px solid #000;
    }

    Upload your image (called bar.jpg in the example below) to your current theme’s images folder. Then try changing:

    .post_author {
    border-bottom:0 solid red;
    font-family:Times,serif;
    font-size:12px;
    font-style:italic;
    margin:0 64px 20px;
    text-align:center;
    }

    to:

    .post_author {

    font-family:Times,serif;
    font-size:12px;
    font-style:italic;
    margin:0 64px 20px;
    text-align:center;
    padding-bottom:15px;
    background:url(images/bar.jpg) no-repeat bottom center;
    }

    Under the ‘main index’ page, instead of div class=”post” it’s div class=”content” in the loop, yet attempts to change anything listed as ‘content’ in the style sheet changes nothing.

    Similarly, I’ve attempted to modify the various content wrappers to add a simple black border around the entirety of the shown posts, and haven’t succeeded. I think this template may be set up differently than most, and would appreciate any suggestions on how to best add an image between the posts and a border overall.

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

  • A link to your site would be helpful if that’s possible..

    Thread Starter rarerborealis

    (@rarerborealis)

    Ah! Silly me, I knew I forgot something. The site’s located here.

    Ok, well from what i can see you do not have an element with the class “content”, but you do have one with an ID of “content”.. and several elements inside that (including elements with the post class).

    In CSS..

    .iAmAClass {}
#iAmAnId {}

    Below is the area that handles the background for the content element, is this where you’ve been adding your own background?

    #outerWrapper #contentWrapper #content {
background: #fff;
margin:0 220px 0 0;
padding:30px 30px 10px 10px;
}

    This is where you should set a background image if you want one for that element…

    Regarding the “post” class, they certainly do exist in your page, so you can apply style to them…

    The problem you’re facing is just due to other stylesheet definitions applying to said elements.

    Rather then explain the inner workings of CSS, i’d suggest the easier route of just forcing your own definition(i’ll cover a little CSS below though).

    Example:

    .post { color:red!important; }

    You have several elements (1 for each post), that look like this in the output source..

    <div class="post-369 post hentry category-wtf tag-kitten tag-random-imagery tag-wtf" id="post-369">

    That’s just a snippet taken from one piece of you code…

    Now bear in mind that particular element has 7 classes, if you apply style to the post class, so..

    .post {}

    .. then depending on where you place that code, and whether definitions exist for the other classes, per the example others would be…

    .hentry {}
.post-369 {} /* specific to that post */
.category-wtf {} /* cat specific class */

    .. will effect what gets applied and what doesn’t…

    When the stylesheet is read, the code is read from top to bottom… (off the top of my head, i’m not sure but i think IDs have a higher priority over classes, even if they are placed before)

    Let’s take this example element…

    <div class="white red" id="blue">hello world!</div>

    If mutiple sets of definitions existed for this element, let’s say the following…

    #blue {background:#0f0}
.white {background: #fff}
.red {background: #f00}

    The end result would be a blue background, without the ID red would take presidence over white, since it comes last.

    This all becomes alot more complicated once you have lots of IDs and Classes all over the place, and tracking them down can be a chore unless you have some grasp of CSS and how it works..

    So what i’d suggest is applying what you need to initially using !important just to get what you need working, then set about removing those !important tags you don’t need… (you’ll know because your style will stop working once it’s removed if another definition is setting the given property).

    So to sum it up… if you want to style the “content” element, it’s this one (which exists in your stylesheet already).

    #outerWrapper #contentWrapper #content

    If you want to target post elements (1 for each post), then target the post element by adding in a class to the stylesheet for it and apply some styling.. ex..

    .post { border: 1px solid red!important }

    So if i yabbered on a bit, was trying to cover as much as i could because i’m off to bed now and don’t want to leave you hanging with half a solution… ??

    Hope that helps… ??

    Thread Starter rarerborealis

    (@rarerborealis)

    Yow. Very helpful and thorough. I’ll try this and see how it goes. Thank you very much for the tips and advice! I’ve actually never worked with CSS coding before so most of what I’m doing is educated guessing. Thanks again!

    No worries, let me know how you get on.. ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding post divider and border to R755 template’ is closed to new replies.