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 ] Advanced CSS BBcode
Topic Started: Dec 17 2014, 06:16 AM (818 Views)
Dark Shadow 6
Member Avatar
Member
[ *  * ]
Board Address: Pokemon Universe
Board Software: ZetaBoards
Description: Css BBcode that can allow me to make post like This ( btw i created that topic on pokecommunity )

I'm using this css bbcode:
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>


This code didnt work when i try to make post like This and also it didnt work when i try to put background-image on post so i would like to request a css bbcode that will allow me to make post like that.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
http://support.zathyus.com/topic/5208893/1/#post18081908

Try that code to allow the code to use background images.

As for it not turning out the way you want, post the CSS BBCode you're trying to use.
Offline Profile Goto Top
 
Dark Shadow 6
Member Avatar
Member
[ *  * ]
Ok i'll post it later.
For example I'm using this:
Code:
 

[css=border: solid 2px black; border-radius: 120px; background-color: white]


[nobbcode][size=10]Welcome To My Forum[/size]


[css=border: solid 2px yellow; background-color: black; width: 60%; height: 300px; overflow: auto;]
[color=white]Welcome to my forum this is a example of css code im using[/css]


[/css]

And For This:
Cory
 


Code:
 

<script type="text/javascript">
$('td.c_post').each(function() {
$(this).html($(this).html().replace(/url\(;/ig, 'url(').replace(/;\)/ig, ')'))
});
</script>


Place that above the code. When you want to insert a background image using the CSS BBCode insert a semicolon (;) before and after the image URL.



Should i do like this:
Code:
 

[css=background-image: (;)(Imgae Url)(;);]Text[/css]


Or like this:
Code:
 

[css=background-image: ((;)Image Url(;));]Text[/css]
Edited by Dark Shadow 6, Dec 18 2014, 11:47 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Here's how it appears for me: http://i.imgur.com/ONcdMa0.png

How do you envision it?

Here's how to insert a background image with that code:
Code:
 
background: url(;IMAGE_URL;);
Offline Profile Goto Top
 
Dark Shadow 6
Member Avatar
Member
[ *  * ]
It appears same for me as you and the background image code didnt work
Edited by Dark Shadow 6, Dec 19 2014, 04:12 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this code instead:
Code:
 
<script type="text/javascript">
$('td:contains([/css]):not(:has(textarea)), div.search_results:contains([/css])').each(function() {
$(this).html($(this).html().replace(/url\(;/ig, 'url(').replace(/;\)/ig, ')'));
$(this).html($(this).html().replace(/\[css=(.+?)\]/ig, '<div style="$1">').replace(/\[\/css\]/ig, '</div>'));
});
</script>
Offline Profile Goto Top
 
Dark Shadow 6
Member Avatar
Member
[ *  * ]
Ok and background image also work with this code right?


Background image works but i cant able to move black box in center of the post Preview.
Edited by Dark Shadow 6, Dec 19 2014, 10:05 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this to center the box:
Code:
 
margin: 0 auto;
Offline Profile Goto Top
 
Dark Shadow 6
Member Avatar
Member
[ *  * ]
Thanks it works thanks and it is possible to add css bbcode on posting page.
Edited by Dark Shadow 6, Dec 19 2014, 10:30 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
$('#c_bbcode button:last').after(' <button type="button" onclick="CSS()">CSS</button>');

function CSS() {
var css = window.prompt('Insert the CSS to be used', '');
ZetaTag('css', false, css);
}
</script>
Try that to add the BBCode button functionality.
Offline Profile Goto Top
 
Dark Shadow 6
Member Avatar
Member
[ *  * ]
Ok and should i put this code above the css code or should i put below the css code?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Anywhere in the Below the Board wrapper will be fine.
Offline Profile Goto Top
 
Dark Shadow 6
Member Avatar
Member
[ *  * ]
Thanks for the code and also for your time :)

Moderators you can close this topic thanks :)
Offline Profile Goto Top
 
Helena
Member Avatar
M is for Mod

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