Convert BBCode Images to Buttons

[Stinky666]

Is there a simple way (I assume using css?) to convert all bbcode images into the same sized button styles, as the ones in the shoutbox and for "quote" etc?

[Stinky666]

bumpety bump.

[Stinky666]

Bump?

[Relic]

I would love this as well.

[Stinky666]

Jan 28, 2013 12:58:51 GMT -8 Relic said:

I would love this as well.

Glad I'm not the only one.
For me at least, because I want to make lots of themes for forums (as in for "pre-made), this will be EXTREMELY useful to have, especially as a template mod or changing the CSS.

If it can't be done (though I am sure it can be) with the mod/css please let me know.
Will love anyone who can do this for me.

[Stinky666]

A nice bump up. If anyone can confirm whether this is even possible via the template mod, would be brilliant.
Brian, or anyone - sorry to pick on you Brian, i don't mean to be too annoying

[Brian]

Not sure I understand. The images for the shoutbox BBCode are already the same size, but these CSS selectors should affect all the button images in the reply page if you need them for whatever reason.

.visual-editor .button img,
.bbcode-editor .button img { width: 26px; }

[Stinky666]

Jan 31, 2013 13:25:14 GMT -8 Brian said:

Not sure I understand. The images for the shoutbox BBCode are already the same size, but these CSS selectors should affect all the button images in the reply page if you need them for whatever reason.

.visual-editor .button img,
.bbcode-editor .button img { width: 26px; }

You see the buttons for "Add Attachment" and the gears icon, and "create post", and then IN threads you have "quote", "edit", "delete".
Well, they are controlled using some CSS from the Visual Editor in Colors and Styles (Admin > Colors and Styles >
For them, you have 3 options: None selected (normal), Hover, and Selected.

The BBCode images by default are exactly that, IMAGES. I want to be able to make it so they convert FROM images to the same CSS style as the buttons in posts. So the none selected would take those properties, and selected/active would take those properties.

So, I want my bbcode images to take on the role as:

/* Buttons */
@buttons_background_image: url('http://images.proboards.com/v5/gradients/light.png');
@buttons_background_attachment: @empty;
@buttons_background_repeat: repeat-x;
@buttons_background_position: center center;
@buttons_border: 1px solid #138091;
@buttons_border_radius: 5px;
@buttons_text_font: normal 400 small Arial, Helvetica, sans-serif;
@buttons_text_decoration: none;
@buttons_hover_background: lighten(@buttons_background_color, 5%) url('http://images.proboards.com/v5/gradients/top-light-40-trans.png') center repeat-x;
@buttons_hover_border: 1px solid darken(@buttons_background_color, 20%);
@buttons_hover_text_color: #138091;
@buttons_hover_text_font: normal 400 small Arial, Helvetica, sans-serif;
@buttons_hover_text_decoration: @buttons_text_decoration;
@buttons_active_background: #138091   scroll;
@buttons_active_border: 1px solid #555555;
@buttons_active_text_color: #eaeaea;
@buttons_active_text_font: normal 400 1em Arial, Helvetica, sans-serif;
@buttons_active_text_decoration: @buttons_text_decoration;

[Brian]

I have no idea. You might want to request a plugin.

[Stinky666]

Feb 3, 2013 18:10:46 GMT -8 Brian said:

I have no idea. You might want to request a plugin.

is there absolutely no way to do it via template mods + style sheets, or heck, even the headers and footers?
I plan to make a lot of themes and this would be so useful, for myself and people who use my pre-made themes. BBCode images are always annoying to make, so to do lots is horrible.
Making people use a plugin too, with there being a limit, is something I don't want to do

Can anyone think of a way this could be done without a plugin? Chris, Peter, pawl, Todge, Simie..

Anyone?

[Todge]

There's nothing to stop you putting a code in the Global Footer the old fashioned way instead of using a plugin. But I'm unsure of what you're after.



Try this in your Global Header, but I doubt it covers all that you want.




<style type="text/css">

a.button { width: 80px; }

</style>




That can probably be added to to cover most, if not all, that you are wanting to target.

[Peter]

Feb 5, 2013 15:49:15 GMT -8 Stinky666 said:

Feb 3, 2013 18:10:46 GMT -8 Brian said:

I have no idea. You might want to request a plugin.

is there absolutely no way to do it via template mods + style sheets, or heck, even the headers and footers?
I plan to make a lot of themes and this would be so useful, for myself and people who use my pre-made themes. BBCode images are always annoying to make, so to do lots is horrible.
Making people use a plugin too, with there being a limit, is something I don't want to do

Can anyone think of a way this could be done without a plugin? Chris, Peter, pawl, Todge, Simie..

Anyone?

Can't do it within the template or just CSS, as the buttons are dynamically created, so you will need a code that is ran after they are generated.

The other problem is that converting them will use a lot more space up and just look a mess.

Example code...

$(".bbcode-editor, .visual-editor").find("img").each(function(){
   $(this).replaceWith($("<input type='button' value='" + this.parentNode.title + "' />"));
});
If you have a browser that has a console (Firebug, Chrome console etc), run that code on the reply page to see what I mean.  Or wrap script tags around it and put it into the footer (will only work if the BBCode buttons have been created already).

[Stinky666]

Feb 5, 2013 17:47:42 GMT -8 Peter said:

Feb 5, 2013 15:49:15 GMT -8 Stinky666 said:

is there absolutely no way to do it via template mods + style sheets, or heck, even the headers and footers?
I plan to make a lot of themes and this would be so useful, for myself and people who use my pre-made themes. BBCode images are always annoying to make, so to do lots is horrible.
Making people use a plugin too, with there being a limit, is something I don't want to do

Can anyone think of a way this could be done without a plugin? Chris, Peter, pawl, Todge, Simie..

Anyone?

Can't do it within the template or just CSS, as the buttons are dynamically created, so you will need a code that is ran after they are generated.

The other problem is that converting them will use a lot more space up and just look a mess.

Example code...

$(".bbcode-editor, .visual-editor").find("img").each(function(){
   $(this).replaceWith($("<input type='button' value='" + this.parentNode.title + "' />"));
});
If you have a browser that has a console (Firebug, Chrome console etc), run that code on the reply page to see what I mean.  Or wrap script tags around it and put it into the footer (will only work if the BBCode buttons have been created already).

Hi Peter. By plugin would it be a mess, or would they load extremely fast?
Also, I did put that in script tags, and into my G.Footer, but nothing happened (not sure exactly what you meant/mean by your last bit, about buttons being created already).

[Peter]

Feb 5, 2013 18:19:47 GMT -8 Stinky666 said:

Feb 5, 2013 17:47:42 GMT -8 Peter said:

Can't do it within the template or just CSS, as the buttons are dynamically created, so you will need a code that is ran after they are generated.

The other problem is that converting them will use a lot more space up and just look a mess.

Example code...

$(".bbcode-editor, .visual-editor").find("img").each(function(){
   $(this).replaceWith($("<input type='button' value='" + this.parentNode.title + "' />"));
});
If you have a browser that has a console (Firebug, Chrome console etc), run that code on the reply page to see what I mean.  Or wrap script tags around it and put it into the footer (will only work if the BBCode buttons have been created already).

Hi Peter. By plugin would it be a mess, or would they load extremely fast?
Also, I did put that in script tags, and into my G.Footer, but nothing happened (not sure exactly what you meant/mean by your last bit, about buttons being created already).

Sorry, I forgot to respond to this.

Here's a screen shot of what happens when you convert them...



Don't need a plugin, you can add the script directly into the template, but it needs to be run after the UBBC buttons have been generated, as they are dynamically created on the fly when the page loads.  But as you can see in the image, it's a mess.

[Stinky666]

Feb 17, 2013 6:17:28 GMT -8 Peter said:

Feb 5, 2013 18:19:47 GMT -8 Stinky666 said:

Hi Peter. By plugin would it be a mess, or would they load extremely fast?
Also, I did put that in script tags, and into my G.Footer, but nothing happened (not sure exactly what you meant/mean by your last bit, about buttons being created already).

Sorry, I forgot to respond to this.

Here's a screen shot of what happens when you convert them...



Don't need a plugin, you can add the script directly into the template, but it needs to be run after the UBBC buttons have been generated, as they are dynamically created on the fly when the page loads.  But as you can see in the image, it's a mess.

Luckily you quoted me, because for some reason this hasn't shown up in my "participated" as being updated.

Yeah I definitely see what you mean about it being a mess. How about 1 of 2 other alternatives:

1) Can you rename the buttons individually, so they can be 1 or 2 letters rather than their full names?
or, which I think could be good
2) BBCode images are split into 3 (or 5) categories:
The first 7: colour, bold, italic etc
Then you have the 2nd set, of 7: alignment, tables, list, HR
and thirdly, you have your "misc" sort of stuff: email, url, etc

Could these be placed into a dropdown list (so you'd have 3 new drop down lists) ?
Except exclude maybe colour, and emotes.

Just trying to think any ways to make it less time consuming in the long run for creating themes haha.