WordPress.org

1. mattikins
   Member
   Posted 5 years ago #

   I tried posting this elsewhere and after 20 hours got no response. So maybe I posted in the wrong place. I'll try here.

   I tried searching the forums ... if I missed this, I'm sorry ...

   At the bottom of each post, there is a dashed line that goes across my page.

   ------------------------------------------------
   I want it replace it with an small image to act as a divider between posts ... just as the dashed line does.

   But, although I have tried and tried, I can't get the image to show.

   Here's my code now:

   {
   padding:0 0 2em 0;
   border-bottom:#cc6699 1px dashed;
   }

   Here's what I changed it to:

   {
   padding:0 0 2em 0;
   background-color: transparent;
   background-image: url ('http://matrishkas-place.com/WordPress/wp-content/themes/img/tulip_sml.jpg');
   background-repeat:
   no-repeat;
   background-position:
   center;
   }

   I just want the jpg to place once with no repeat across the bottom (like the dash is).

   I have the image on my server. So I know that's not the problem.

   The dashed line disappears but nothing shows up. Is it in my coding? I'm really new at this. my site is http://matrishkas-place.com/WordPress if you need to look at it.

   Thanks.

2. KatGirl
   Member
   Posted 5 years ago #

   So you have an image folder on your server in wp-content/themes folder called: img? Its not inside your current theme folder?

   Try:

   {
   padding:0 0 2em 0;
   background-image: url (/wp-content/themes/img/tulip_sml.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   }

   Also, I've found that some images render correctly while others don't, and they're using the same path. To get around this I created a folder on my server - outside wp folders - called images and that's where I place all my graphics.

   (/images/piccy.gif)

   now all my images render as per that same pathway. [shrug] have no idea why this works and using:

   /currenttheme/images/piccy.gif

   doesn't.

3. mattikins
   Member
   Posted 5 years ago #

   Actually, I mistyped: it IS
   blahblahblah//WordPress/wp-content/themes/mistylook-101/img/tulip_sml.jpg

   But, I'm going to create a separate image folder outside of the themes folder as you suggested. I rather like that idea (easy to remember path name!).

   I'll rework it and let you know if it works.

   Thanks for responding. This was driving me crazy!!!

4. estjohn
   Member
   Posted 5 years ago #

   I used a footer plugin and it includes anything I want it to at the end of each article...

   http://nothing.golddave.com/wp-genericfooter-plugin/

   an example is
   http://www.aleeya.net/wordpress/seo/seo-dagon-design-sitemap-generator-by-aleister-wp2/

   at the bottom of this and every article it displays a
   § symbol. Or I could make it an image , line or whatever

   Is that something like what you are looking for?

5. mattikins
   Member
   Posted 5 years ago #

   Kat ... it didn't work. Thanks anyway.

   estjohn ... your solution is next, I'll let you know if that works!

   Thanks

6. KatGirl
   Member
   Posted 5 years ago #

   I'll check your link and see what's going on

7. mattikins
   Member
   Posted 5 years ago #

   estjohn...

   great plugin, but I can't put an image in it ... only text.

   Thanks anyways.

8. KatGirl
   Member
   Posted 5 years ago #

   okay. Try this:

   #content .post {
   padding:0 0 2em 0;
   /*border-bottom:#663399 1px dashed;*/
   }

   #content .post .hr {
   background-image: url (/images/tulip_sml.jpg);
   background-repeat: no-repeat;
   width: 10px;
   height:10px;
   }

   You'll need to insert <div class="hr"></div> just after your post-meta data / info section but before the closing </div> of your post tag

   oops: sorry, forgot to add that you need to declare the width and height of the image in your code.

9. estjohn
   Member
   Posted 5 years ago #

   sorry mattikins I thought you could use an image too.. :(

10. mattikins
    Member
    Posted 5 years ago #

    Kat:

    Perhaps I should tell you that I have no clue what this means:

    You'll need to insert <div class="hr"></div> just after your post-meta data / info section but before the closing </div> of your post tag

    I've been learning the codes as I go ... so I have no clue what that means or how. I'm REALLY a newbie!!! (but not doing too bad so far). But I'll try to figure it out. I've been teaching myself by redoing the theme I d/L. I've made a ton of changes by changing it to see what happens (always keeping a backup of course) then if it works and I like it, I save it. If not, I put back the old code until I figure out what I do want. It's a slow process, but it's really the best way for ME to learn!

    Thanks for your help. I'll figure it out and get back to you when I do.

    I've looked at other themes that use a graphic at the bottom of the post, one did it in page.php, the other in style.css. Yet, they both did the same thing (put the graphic in).

    this was the page.php entry:

    <!-- E N D O F P O S T I M A G E -->
    <div align="center"><img src="<?php bloginfo('template_directory'); ?>/images/postend.gif" width="100" height="20" alt="end" /></div>
    <!-- E N D O F P O S T I M A G E -->

    this was the style.css entry:

    /* misc */
    .divider {
    background: url('img/divider.gif') no-repeat;
    height: 24px;
    margin: 16px 0
    }
    .clearer {
    clear: both;
    }

    Thanks, sorry to bug you. Maybe I should just stick to my ugly dash until I learn more!

11. mattikins
    Member
    Posted 5 years ago #

    estjohn ... no biggie. I will keep the plug-in anyway because I kinda like it and I know I'll find a use for it eventually ! Have a great evening!

12. billh
    Member
    Posted 5 years ago #

    OK, picking up from your long post above...

    First, you need to put the divider image (divider.gif) in the "img" subdirectory of your theme's directory. Your theme's directory is /wp-content/themes/themename ; the "divider.gif" file should reside in /wp-content/themes/themename/img. That is the folder defined in your CSS file entry.

    Next, let's be a bit more precise with your CSS definition by including an alignment:

    .divider {
background: url('img/divider.gif') no-repeat;
text-align: center;
height: 24px;
margin: 16px 0
}

    Now we need to make the code for the divider use the CSS definition:

    <!-- E N D O F P O S T I M A G E -->
<div class="divider">&nbsp;</div>
<!-- E N D O F P O S T I M A G E -->

    In your CSS file, you've defined the class "divider" with a background image. There's no need to re-use that image. All you need is a non-breaking space to "hold" the divider in place. Also, in your CSS file, make sure that the 24 pixel height defined is tall enough to display the entire divider image. If you need to, resize your divider image to be 24 pixels or smaller in height.

13. mattikins
    Member
    Posted 5 years ago #

    What is &nbsp?

14. estjohn
    Member
    Posted 5 years ago #

    means and non breaking space

    its the way html sees a space

15. mattikins
    Member
    Posted 5 years ago #

    thanks estjohn ...

    billh ... am going to edit tomorrow and try your fix...been too backed up with other things (dang). Didn't want to leave you hanging...

16. mattikins
    Member
    Posted 5 years ago #

    Thanks everyone for your help, but nothing is working. I'll figure it out eventually. I'm frustrated, but I need to learn more. I realize it's difficult to step into someone else template and figure it out so don't feel bad if you offered help and I couldn't do it. It's not you ... it's ME!

Topic Closed

This topic has been closed to new replies.