Post Divider or separator

[Forever Sunshine]

Forum URL: crapthenameescapesme.proboards.com/

Is there a way to use an image as a post divider? Nothing fancy! 

Thanks

[Forever Sunshine]

Bump

Anyone?

[Forever Sunshine]

Hey, jrryan! This is a border that separates one post from the next. It can be found in the Admin> Advanced Styles & CSS> Visual Editor> Threads (Post Lists)> Post> Post Separator. I thought it would be cool to be able to use an image such as a divider rather than just a solid color border.   

How was the game? 

[Tumbleweed]

Forever Sunshine,

I played around with this and this seems to work: (bottom of style sheet)

/*inserts the image between posts*/
.posts .post>td, .posts .labels{
background-image:url(http://storage.proboards.com/2773176/i/QPEbzCpaAj_IC8GQLfAH.png);
background-repeat:no-repeat;
}
/*moves the controls down a bit*/
.posts .post .content-head .controls{
margin-top:10px;
}

It's not perfect but I set my border to zero in the visual editor and it to transparent as well.

[Forever Sunshine]

Yay! Tumbleweed! Thank you so much! You guys really are awesome! I put this in the CSS of the one theme I'm currently working in. I tried manipulating it a bit but no luck. LOL Couple of things:

It's partially hidden by the MP even with the controls padded.  

Is there a way to move it up slightly; perhaps to split the two post colors rather than sit at the top of one post? Hope that makes sense. I have a screen shot . . .



Is there a way to repeat horizontally just the one row?

One other thing is that it also puts it on the very first post at the top of the page, which looks out of place then. LOL This tells me the position of the post separator is located top rather than bottom, since there is no separator on the bottom of the very last post on the page. Can we either have it located bottom or eliminate the one on the very first post? 



Ahhh the challenges of coding!   I really do appreciate your efforts! If I could, I'd buy you dinner! 

[Tumbleweed]

Actually, I'm surprised it worked at all but there just isn't any manipulating the image itself. No repeating (or it will fill up the whole post). No moving because it is a background. You'll have to make your image the exact size you need it.

I was afraid you would ask that about the first post but that is where it puts a line as well when you use the visual editor and I'm using that class. I know I could use the class .item.post.first, possibly to somehow target that first post not to display it, but I haven't found the magic class combinations. As far as the mini-profile, I should think you can move it down with this:

.mini-profile{margin-top:20px;
}

There of course is a possible option of totally doing a template remodel but personally, I have no inclination to take that on. That was where I went first, to see if it could be added there but since it is a continuing table post after post, I just couldn't find a way and that would have been idea because then you could just use an non-background image to manipulate how you wanted.

Sorry, probably the best I can do just using css.

Edit: Just wanted to quickly say, if you add the mini-profile css above, you can probably remove the control css. Looks like moving the mini profile down moves the control buttons too or at least lessen the margin top.

[Forever Sunshine]

Dang! Well Tumbleweed, I was hoping for better news. LOL No wonder I couldn't manipulate it at all. *pouts* I guess it's something I'll just have to do without or figure out how to get the image long enough without distorting it beyond recognition. LOL

It was a great idea though! And, I absolutely appreciate all the effort you put into it. Thank you! 

jrryan, Oh I thought you said it was a game. Well, I hope she does good this weekend!

[Tumbleweed]

Apr 29, 2014 9:00:23 GMT -8 jrryan said:

Apr 28, 2014 18:33:40 GMT -8 Forever Sunshine said:

Hey, jrryan! This is a border that separates one post from the next. It can be found in the Admin> Advanced Styles & CSS> Visual Editor> Threads (Post Lists)> Post> Post Separator. I thought it would be cool to be able to use an image such as a divider rather than just a solid color border.   

How was the game? 

I'll move over for Tumbleweed on this one, she's forgot more about coding than I'll ever know! We didn't have a game today just practice, game this weekend but thanks for asking.

Jrryan, if you have any ideas, go for it, because obviously, I've come to a screeching halt to do exactly what Forever Sunshine was hoping for. It's was a just a simple css solution if you have the exact image width you need and don't mind it on the first post, so that's why I jumped in.

[Forever Sunshine]

jrryan, if one uses a divider image such as    Could that work? It may need a repeat function though if possible. 

[Forever Sunshine]

So, jrryan and Tumbleweed, this seems a bit tedious for the post separator. My next question would be, then, is it just as tedious to say . . . use an image, of sorts, in place of the signature border line (the line above the signature) or post header border line (the line below the Quote, Like and Cog?

If not, no biggie!

Thanks

[Tumbleweed]

Forever Sunshine,

You can go into your thread template and select post list and then either add the image like this: (around line 29)

<div class="controls">
$[post.quote_button]
$[post.edit_button]
$[post.likes.button]
$[post.select_options]
</div>
</div>
<img  src="http://storage.proboards.com/2773176/i/E6m_ZYKS1K2wYMNnfRAp.png">


Now the image I was using I had to go up to the opening div and add a margin statement to get it to lay right on that line below quote,edit,etc.

So I added this: (located on about line 11)

<div class="content-head ui-helper-clearfix" style="margin-bottom:-4px;">

You could also make that a divide the width you want and make the image a background so it would repeat.

<div class="controls">
$[post.quote_button]
$[post.edit_button]
$[post.likes.button]
$[post.select_options]
</div>
</div>
<div style="background-image:url(http://storage.proboards.com/2773176/i/E6m_ZYKS1K2wYMNnfRAp.png);background-repeat:repeat;width:600px;height:12px;margin-top:-10px;"></div>



The second way, I was able to add a margin-top to move it up and didn't need that in the div that has the class "content-head...."

[Forever Sunshine]

Tumbleweed!!! YOU ARE AWESOME! YAY! I just tried the second one and it's exactly what I want. I'll try the first one then.

WOOHOO! Thank you so much! *happy dancin, hap, hap, happy dancin* So cool!

[Forever Sunshine]

Quick question Tumbleweed, if I may . . .

If I wanted the image centered rather than left, how could I do that?

Thanks!

[Tumbleweed]

You can just add center tags around it:

<center> image html here</center>