Image as container border

[Forever Sunshine]

crapthenameescapesme.proboards.com/

I'm wondering if it would be possible for someone to make a plugin that would enable using an image as a border for around containers or category title box, etc.

Thanks! 

[Chris]

The border-image CSS property was created to do this, unfortunately Proboards does not support its use in posts, but since you are asking specifically for its use on elements located in layout templates (not posts) you can employ it by adding CSS. The generator located here might make it a bit easier to create the necessary CSS rules.

[Forever Sunshine]

Thanks Chris, but is there no way to employ this as a plugin to make it easier for those of us who don't have a clue how css works or what to do with it?

[Chris]

Although possible, I'm not seeing how a plugin could make it any easier though Forever Sunshine, you would still need to supply an image to be used and then tell where to slice up the image and whether to tile, stretch or round. It would be no simpler than the generator I linked but would have the additional overhead of a code running on the forum to slow it down just a little bit more despite the fact that a pure CSS solution exists without the unnecessary overhead. That coupled with the fact that a plugin would have no tool to give you a preview based on the values you've entered or draggable sliders to quickly and easily slice up the image makes the generator a superior product.

It's not necessary to understand CSS in order to use it, the copy and paste model used in the previous Proboards version still works and that was successfully used for years by those who had no idea what javascript and css was only instructions on where to paste it. Pasting the CSS the generator has generated to the bottom of your theme's style sheet tab doesn't really strike me as a daunting task.

SPOILER: Click to show

[Forever Sunshine]

Well, Chris, I think perhaps the issue is then that I'm not really looking to use an image as you've described but rather an image more like a divider . . . So there would be no splicing necessary, in my mind, but rather a positioning of the divider such as rotation and repeating necessity, etc. And I'm not really wanting to do it around the whole forum but rather containers such as perhaps title bars, or content areas, etc. 

[Pebble]

I'm not understanding completely , but do you mean like here at my test site?
pebbleplugins.proboards.com/

[Forever Sunshine]

Hiya, Pebble! I'm not talking about the one around the whole forum, which, btw, I downloaded your plugin for that and it didn't adjust properly so I deleted it. LOL

Anyway, so yes to the ones around the title bar or content container where the boards are listed on the main page or where threads are listed on subsequent pages. Or even for posts within a thread. But, I'm not sure if the image you're using is a solid image or a divider of such. What I'd like to use are as I posted above with a line of something rather than a square image spliced up. Of course the "line image" would have to be rotated for left and right side use and perhaps repeated.

So an image such as this . . . 

Does that make sense?

[Pebble]

The images around the 'containers' are a head, base and side images and they are added via template mod.
When V5 launched I did a plugin to do this but never released it into the wild as the template mod is much more reliable and easier to handle.

Maybe that's not what you're looking for as the image above wouldn't work with the plugin, or template mod.

[Forever Sunshine]

Well, I guess that's my problem as I can't seem to find a way to use a line image or divider as a border rather than splicing a whole image up to make it work. So a border such as the faint border around the MP or the black lines surrounding posts here or, etc.

So it would be let's say this in the Visual Editor . . . 

Content Areas

Background Color

Background Image

Background AttachmentFixed Scroll with Page

Background Repeat

Background Position

Border Width

Border Style

Border Color

Border Radius

[Chris]

edit:I apparently missed a few posts between Pebbles a Sunshine since my last visit to this thread, disregard this post for now

Apr 16, 2014 17:22:39 GMT -8 Forever Sunshine said:

Well, I guess that's my problem as I can't seem to find a way to use a line image or divider as a border rather than splicing a whole image up to make it work. So a border such as the faint border around the MP or the black lines surrounding posts here or, etc.

So it would be let's say this in the Visual Editor . . . 

Content Areas

Background Color

Background Image

Background AttachmentFixed Scroll with Page

Background Repeat

Background Position

Border Width

Border Style

Border Color

Border Radius

The borders you see around the mini-profile, quotes, etc are line drawn, not images and yes they can be tweaked with the bolded properties you've listed above. In this box for example, I've set a border width of "1px"
border style of "solid"
border color of "#D7D7D7"
border radius of '10px'

In this box I've set a border width of "10px"
border style of "solid"
border color of "lime"
border radius of '25px'

In this box for example, I've set a border width of "35px"
border style of "outset"
border color of "#D7D7D7"
border radius of 'none'

It's all done through CSS

[Forever Sunshine]

Hiya Chris! I am aware of how to do all of the above effects to the border through the Visual Editor. LOL

[Chris]

Apr 16, 2014 17:02:02 GMT -8 Forever Sunshine said:

Well, Chris, I think perhaps the issue is then that I'm not really looking to use an image as you've described but rather an image more like a divider . . . So there would be no splicing necessary, in my mind, but rather a positioning of the divider such as rotation and repeating necessity, etc. And I'm not really wanting to do it around the whole forum but rather containers such as perhaps title bars, or content areas, etc. 

You are correct, that image you posted would not be conducive to the border-image CSS to which I am referring. The solution Pebble suggested was used quite successfully in the previous version of Proboards and would better suit that particular image you wish to use.

The image however could be edited to allow proper side definitions, for example:



It would then be a matter of inputting it into the generator to get the required CSS which can then be applied to just about any HTML element you wish

SPOILER: Click to show

border-style: solid;
border-width: 20px;
-moz-border-image: url(heartpinksmlg_blk.png) 20 27 round;
-webkit-border-image: url(heartpinksmlg_blk.png) 20 27 round;
-o-border-image: url(heartpinksmlg_blk.png) 20 27 round;
border-image: url(heartpinksmlg_blk.png) 20 27 round;


[Forever Sunshine]

That looks cool, Chris! Is it possible the image, or an image, could be rotated to use for the sides?

So, being clueless as to where the code would go . . . where DOES the code go? *hangs head* How does it get applied and where? Sorry if I'm being a bit dense here. I know you all say V5 is easier but it really isn't for me.  I guess I was hoping for something so simple that I could just plop the image url in and it (a plugin or whatever) would figure it all out for me as to where it goes and how. LOL 

Thanks

[Chris]

Apr 18, 2014 4:03:58 GMT -8 Forever Sunshine said:

That looks cool, Chris! Is it possible the image, or an image, could be rotated to use for the sides?

So, being clueless as to where the code would go . . . where DOES the code go? *hangs head* How does it get applied and where? Sorry if I'm being a bit dense here. I know you all say V5 is easier but it really isn't for me.  I guess I was hoping for something so simple that I could just plop the image url in and it (a plugin or whatever) would figure it all out for me as to where it goes and how. LOL 

Thanks

The images you are offering as examples are suitable for dividers (i.e separate one section from another) as you've already mentioned but if it is to be used to "frame" an element then there would have to be accompanying images for all 4 sides. In the older method these were discrete images commonly referred to as head, side and base images.  I understand what you're saying about using transform to rotate at perpendicular angles to create sides but that solution is rife with problems not the least of which is the [lack of an] ability to fluidly grow or tile for varying dimensions. One of the tricks used in the previous version was to set the image as a background on a transparent div then use background sizing to shrink/grow as needed, but that would not be currently possible using a transform (there are hacks but they do not solve all the problems). The border-image property that I am speaking of takes quite a few of these pesky concerns that that plagued earlier attempts at image borders and automatically handles them making it much (relatively) simpler.

In Proboards V5, each theme has its own visual editor tab which is simply a user-friendly front-end for the the down and dirty data present on the Style Sheet tab, it is this Style Sheet tab where every editable CSS applicable to a theme is kept, it is there where one would paste new CSS rules such as this. The key here though is to get an image that presents all four sides as I demonstrated in the last post with your hearts image (I used the freeware irfanview to triple up on the image). Once you have the appropriate image you can then plug that into the generator and choose your sides. The generated CSS will then stretch it, tile it, fold it, chop it and serve it up with gravy.

I inserted the CSS as inline to the element's style for the demo in my last post but if you drop it in the style sheet then you could give it a class so it can then simply be added to any element of your choice simply by editing the layout template and adding the class to the element.

SPOILER: Click to show

The Texas two-step

1. Add the CSS to your Style Sheet
   _{note: this is just an example since it refers to a fictional image, you'd need to upload your own}
   .border-hearts {
   
border-style: solid;
border-width: 20px;
-moz-border-image: url(heartpinksmlg_blk.png) 20 27 round;
-webkit-border-image: url(heartpinksmlg_blk.png) 20 27 round;
-o-border-image: url(heartpinksmlg_blk.png) 20 27 round;
border-image: url(heartpinksmlg_blk.png) 20 27 round;

   }
   
   
   
2. 
   add the class created in the previous step to any HTML element (the thread container for example) :
   
   <div class="container threads border-hearts">...</div>
   
   We get this
   
   

[Forever Sunshine]

Chris! Thank you so much for taking the time and having the patience to explain all this to me. You're totally awesome!

Still not quite sure I get it but I'll mess around with it and see what happens!

Thanks again!