We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
[ C ] [Request] CSS BBcode
Topic Started: Jun 22 2011, 10:42 PM (1,231 Views)
Mouvelian
Member Avatar
Skinner
[ * ]
Board Address: RMS
Board Software: Zetaboards
Description: A CSS BB Code.
As in E.G [css-div=background:url('http://www.website.com/image.jpg'); background:url('http://www.website.com/image.jpg') ]TEXT HERE[/css-div]
Basically, i've found a css code but i wanted to add more than one css per paragraph. The current code im using won't allow me to add more than one CSS per paragraph.
*By Alam of Outlineforum
Code:
 
<script type="text/javascript">
/*CSS BBCode
* By Alam of Outlineforum.com */
$("td.c_post:contains([/css])").html(function(p, h) {
return h.replace(/\[css=(.+?)\[\/css\]/gi, function(o, i) {
i = i.split("]"), i[0] = i[0].replace(/position(.+?);/gi, "");
return "<div style='" + i[0] + "'>" + i[1] + "</div>";
});
});
</script>

Currently, his current code can only do this.[css=<properties>; value]text[/css]
What im requesting for is this.[css=<properties>; value][css=<properties>; value]text[/css][/css]
Multiple css bbcodes per paragraph.

Or to make it easier, a code that allows HTML-CSS to be used in posts.

Thank you for reading my requests.
Edited by Mouvelian, Jun 22 2011, 10:46 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
That one does allow you to use multiple properties, for example:
Code:
 
[css=background: #000; border: 3px solid red]Test[/css]
Offline Profile Goto Top
 
Mouvelian
Member Avatar
Skinner
[ * ]
No no. I know that but sometimes, i wish to add some tables/borders in between the css. The current css bbcode doesn't allow any bbcodes in between. :/

E.g [css=properties: values; properties: values; properties: values;]Now i want to add another css e.g like a border. [css= border: 2px dashed;]Text inside border[/css][/css]
But i can't add another bbcode. When i add the [css] or another bbcode in between the first [css] code, it won't let me.
Edited by Mouvelian, Jun 22 2011, 11:00 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Sorry, I don't know how to fix that, I bet one of the experts do though.
Code:
 
<script type='text/javascript'>
$('.c_post, #topic_review td').each(function(){
$(this).html($(this).html().replace(/\[css=(.+?)](.+?)\[\/css\]/gi,"<div style='$1'>$2</div>"));
});
</script>
There's a slightly shorter version, however.

If you're just wanting the inner CSS tag to deposit background, border, and color for example, that can already be accomplished with default BBCode tags. There's also a table BBCode.
Offline Profile Goto Top
 
Mouvelian
Member Avatar
Skinner
[ * ]
I wanted the css bbcode cause there's much much more i can do. Like alpha: opacity and much more.
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
using Regular Expressions (the thing that finds the BBCode) and nested elements (putting one inside the other) is not possible as it doesn't have a memory and will either look for the nearest match (ungreedy, with a ? ) or look for the longest match (greedy, without a ? ) allow me to demonstrate:

Ungreedy is best for nested elements as it will get the largest match and the resulting text will be the 'next level', able to repeat the process and find all the nested tags.
[bbc_code][css=color:red;]red text[css=font-weight:700;]red text and bold[/css][/css][/bbc_code]

but if the same process is used on tags which are not nested, then it will match the first tag with the last.
[bbc_code][css=color:red;]red text[/css]lorem ipsum dolor sit amet lorem ipsum dolor sit amet [css=color:blue]blue text[/css][/bbc_code]

So what about ungreedy matches? well that will work for multiple tags but not nested tags
[bbc_code][css=color:red;]red text[css=font-weight:700;]red text and bold[/css][/css]

[css=color:red;]red text[/css]lorem ipsum dolor sit amet lorem ipsum dolor sit amet [css=color:blue]blue text[/css][/bbc_code]
Edited by Quozzo, Jun 23 2011, 12:14 PM.
Offline Profile Goto Top
 
Mouvelian
Member Avatar
Skinner
[ * ]
Hmm, okay thanks for the tip.
Offline Profile Goto Top
 
RedBldSandman
Member Avatar
Asante sana Squash banana
[ *  *  *  * ]
Try this in the Below the Board section of your Board Template:
Code:
 
<script type="text/javascript">
(function($) {
var regex = [/\[css\s*=([^"']+?)\]([\s\S]+?)\[\/css\]/gi, /position\s*:(?:[^;:]+?;|[^;:]+$)?/i];
$('td.c_post').each(function() {
var $t = $(this),
html = $t.html(),
change = false;

while (regex[0].test(html)) {
change = true;
html = html.replace(regex[0], function(f, o, t, p) {
return '<div style="' + o.replace(regex[1], '') + '">' + t + '</div>';
});
}
if (change)
$t.html(html);
});
})(jQuery);
</script>
That should work :)
Offline Profile Goto Top
 
Mouvelian
Member Avatar
Skinner
[ * ]
Thanks! It works (:
Offline Profile Goto Top
 
Minato
Member Avatar
Let Me Be With You
[ *  *  *  *  * ]
Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic