remove/insert/edit divider graphic between posts

singinkuz · Member · Feb 11, 2014 at 7:37 am
Copy link

Add topic to favorites
Hi
here’s my blog http://musicampto.wordpress.com/
i want to
i) insert the divider graphic after my 1st sticky post
and
ii) remove space between the end of a post and the divider graphic and possibly insert space after as well.

I would also like to make the graphic slightly thiner.

If none of the above is possible, I would like to remove the divider all together.

Been searching through the forum and elsewhere and haven’t had any luck. advice would be much appreciated.

thanks in advance.

The blog I need help with is: (visible only to logged in users)
kaniamea · Member · Feb 11, 2014 at 9:53 am
Copy link
Hello,

I think the extra space is coming from space you have in your posts. For example I see this:





So check your posts and make sure there is no any extra space at the end.
singinkuz · Member · Feb 11, 2014 at 10:00 am
Copy link
Ah, yes I forgot about I did that (doh!) before i customized – to leave room between my blog content and the metadata…Thanks!
but now my metadata is gone and I still need room after the divider. Also would like the divider a little smaller… and would like the divider after my sticky post… sorry for asking so many questions.
thesacredpath · Member · Feb 11, 2014 at 5:55 pm
Copy link
Do you want the graphic above or below the meta at the bottom of the sticky post? It kind of makes sense to have it after the meta. Give the following a try and see what you think. I just used the existing graphic URL as a placeholder. Replace the URL with the URL of the image you wish to use. I also included a margin top declaration in case you wish to space the graphic down a little.
```
.sticky.hentry:after {
    background: url("http://s0.wp.com/wp-content/themes/pub/chalkboard/images/postseparator2.png?m=1391150877i") no-repeat scroll center bottom rgba(0, 0, 0, 0);
    display: block;
    margin-top: 10px;
}
```
For the image size, I would suggest creating the image at the size you want it rather than trying to manipulate the size via CSS. If you do it via CSS, then you are relying on the browsers to resize the graphic and they don’t do a very good job of that and it will lose quality. If it is a graphic style image as opposed to photographic, I would also suggest saving it as a PNG rather than a JPG since the PNG will remain more sharp and clear with graphical type images.
singinkuz · Member · Feb 11, 2014 at 6:58 pm
Copy link
yes, thank you sacredpath – it worked. It even gave me some space after the divider/graphic, but i don’t know how it did this.
I would like to apply this space to all the other dividers. Can you advise me?

btw, following the code from the style sheet for Chalkboard (url included in my original post) I was able to make it make it the same size as all the other dividers.
```
.sticky.hentry:after {
    background: url("http://s0.wp.com/wp-content/themes/pub/chalkboard/images/postseparator2.png?m=1391150877i") no-repeat scroll center bottom rgba(0, 0, 0, 0);
	background-size: 335px auto;
    display: block;
    margin-top: 10px;
}
```
But, i would like to make ALL the dividers/graphics a touch smaller (about 275px), so if you can advise me on this too, i would greatly appreciated it.

Thanks again!
thesacredpath · Member · Feb 12, 2014 at 3:40 am
Copy link
Give this a try and see what you think. Paste it in at the bottom of your existing custom CSS, in the order shown. I’ve declared an image for non-sticky posts as well, so if you replace the existing images, replace the URLs for both the sticky and non-stickies.
```
.hentry:after {
    background: url("http://s0.wp.com/wp-content/themes/pub/chalkboard/images/postseparator2.png?m=1391150877i") no-repeat scroll center bottom / 335px auto rgba(0, 0, 0, 0);
}
.hentry {
    margin-top: 70px;
}
.sticky.hentry {
    margin-bottom: -50px;
}
```
singinkuz · Member · Feb 12, 2014 at 9:44 am
Copy link
Thanks Again!
thesacredpath · Member · Feb 13, 2014 at 1:17 am
Copy link
You are welcome.

No items found.