Custom BBCodes [Deprecated]

[Pony99CA]

Does anyone know where I can find a BBcode for a normal box around text?If it have a different color background, it will be a bonus!

BBCODE

Code: Select all

[Box={COLOR},{NUMBER}]{TEXT}[/Box]

HTML

Code: Select all

<table bgcolor="{COLOR}" border="{NUMBER}"><tr><td>{TEXT}</td></tr></table>

{COLOR} = desired background colour (Red, Blue, etc.)
{NUMBER} = border width (0 for no border)

Tables aren't the best way to do this; CSS is the commonly accepted method. Try the following HTML:

Code: Select all

<div style="border: {NUMBER}px solid; background-color: {COLOR}; padding: 0 1em 0 1em">{TEXT}</div>

Here's a help line if you want one:

Code: Select all

Box: [box=red,5]text[/box] Tip: you can also use hex colors like #FF0000

and here's a BOX tag example.

I added an em-space of horizontal padding for looks. If you want to be able to specify the text color, too, that's easy.

Steve

[triadruid]

That's all fine and good but here is the reality. First let me explain that we no longer allow any cut & pasting of articles from other sites. The reason is that there are companies working with lawyers who use Google to identify copyright vilolaters. They sue you for $150,000 per incident -- and they don't give you a chance to remove it first. Go to http://www.lasvegassun.com and search for "copyright" - that lawyer has already filed over 150 lawsuits against sites that have copied just one article. Incidentally, they also ask for your domain name as part of the settlement.

So what that means is that we can no longer cut & paste articles for discussion purposes, we can only post a link. Now users complain that external links should open in another window so they can have it in front of them while they read and write about it. Now it all makes sense, doesn't it? In this situation, this would be our correct usability.

Bryan

First, I understand the pain of trying to 'teach' users to open new tabs themselves.

Second, what I would do here is just make a simple [cite] (or [site], or whatever) tag that replicates the functionality of the [url] tag, but with the new window/tab function built in. It may be easier to educate your users to a new tag than a new way of using their browser... I have no idea why that is, but it seems to be true.

[Budovi]

Hi all,
I have a problem with custom spoiler, and I hope somebody helps me.

I want spoiler, which content will be formatted as in CODE BBcode tag. That means that links become unclickable. CODE tag in spoiler looks ugly with used theme.

Basic spoiler which I use:

Code: Select all

[spoiler]{TEXT}[/spoiler]

HTML replacement:

Code: Select all

<div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>skryť</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>zobraziť</a>'; }" /><b>Spoiler: </b><a href="#" onClick="return false;">zobraziť</a></span></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

Thanks for answers.

[Jakesie]

Does anyone knows of a BBcode that allows you to add several images to a post as a type of slideshow, where only one image at a time is displayed. Something with a next button, like lightbox or similar?

Thanks,

Jakes

[etkritikonspoudon]

I haven't yet found a working bbcode for google video and vimeo, and I was also wondering whether you know the bbcode to dailymotion...

Thanks.

[Groundy]

I haven't yet found a working bbcode for google video and vimeo, and I was also wondering whether you know the bbcode to dailymotion...

Thanks.

This one works for me:

BBcode

Code: Select all

[dailymotion]{TEXT}[/dailymotion]

HTML Replacement

Code: Select all

<object height="336" width="420"><param name="movie" value="http://www.dailymotion.com/swf/{TEXT}&v3=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.dailymotion.com/swf/{TEXT}&v3=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" height="336" width="420"></object>

Help Line

Code: Select all

Dailymotion: [dailymotion]Put ONLY video ID here. [/dailymotion]

[Groundy]

This is handy code for opening links in a new window
BBcode

Code: Select all

[external={URL}]{TEXT}[/external]

HTML

Code: Select all

<a href="{URL}" target="_blank">{TEXT}</a>

Help line

Code: Select all

External URL links are re-directed to a new window

This an example how you use it

Code: Select all

[external=link]link title[/external]

[etkritikonspoudon]

This one works for me:

BBcode

Code: Select all

[dailymotion]{TEXT}[/dailymotion]

HTML Replacement

Code: Select all

<object height="336" width="420"><param name="movie" value="http://www.dailymotion.com/swf/{TEXT}&v3=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.dailymotion.com/swf/{TEXT}&v3=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" height="336" width="420"></object>

Help Line

Code: Select all

Dailymotion: [dailymotion]Put ONLY video ID here. [/dailymotion]

Thanks a lot Groundy.
I will give it a try, but I was looking for a "full URL" BBCode of vimeo/dailymotion/google video, primarily ...it's much more easier and it saves time (from explaining to other people how to use it also)

[krafyt]

Hi,

Can anyone help me in making a bbcode to embed videos from this site:

http://www.ted.com

Here an example of a html-embedding taken from the site:

Code: Select all

<!--copy and paste--><object width="446" height="326"><param name="movie" value="http://video.ted.com/assets/player/swf/EmbedPlayer.swf"></param><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always"/><param name="wmode" value="transparent"></param><param name="bgColor" value="#ffffff"></param> <param name="flashvars" value="vu=http://video.ted.com/talks/dynamic/ZainabSalbi_2010G-medium.flv&su=http://images.ted.com/images/ted/tedindex/embed-posters/ZainabSalbi-2010G.embed_thumbnail.jpg&vw=432&vh=240&ap=0&ti=1013&introDuration=15330&adDuration=4000&postAdDuration=830&adKeys=talk=zainab_salbi;year=2010;theme=war_and_peace;theme=new_on_ted_com;theme=a_taste_of_tedglobal_2010;event=TEDGlobal+2010;&preAdTag=tconf.ted/embed;tile=1;sz=512x288;" /><embed src="http://video.ted.com/assets/player/swf/EmbedPlayer.swf" pluginspace="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" bgColor="#ffffff" width="446" height="326" allowFullScreen="true" allowScriptAccess="always" flashvars="vu=http://video.ted.com/talks/dynamic/ZainabSalbi_2010G-medium.flv&su=http://images.ted.com/images/ted/tedindex/embed-posters/ZainabSalbi-2010G.embed_thumbnail.jpg&vw=432&vh=240&ap=0&ti=1013&introDuration=15330&adDuration=4000&postAdDuration=830&adKeys=talk=zainab_salbi;year=2010;theme=war_and_peace;theme=new_on_ted_com;theme=a_taste_of_tedglobal_2010;event=TEDGlobal+2010;"></embed></object>

Thanks in advance.

[bitsandpcs]

Forgive me if this is in the wrong section please, can this code be used or altered to work as a counter?

Code: Select all

<html>
<head>
<style type="text/css">
.numbers {
    width: 55px;
    text-align: center; 
    font-family: Arial; 
    font-size: 28px; 
    font-weight: bold;   /* options are normal, bold, bolder, lighter */
    font-style: normal;  /* options are normal or italic */
    color: #FFFF00;      /* change color using the hexadecimal color codes for HTML */
}
.title {    /* the styles below will affect the title under the numbers, i.e., "Days", "Hours", etc. */
    width: 55px;
    text-align: center; 
    font-family: Arial; 
    font-size: 10px; 
    font-weight: bold;   /* options are normal, bold, bolder, lighter */
    color: #CCFF66;      /* change color using the hexadecimal color codes for HTML */
}
#table {
    width: 400px;
    height: 68px;
    border-style: none;
    background-color: transparent;
}
</style>
</head>

<body>
<center>
<table id="table" border="0">
    <tr>
        <td align="center" colspan="6"><div class="numbers" id="count2" style="padding: 5px 0 0 0; "></div></td>
    </tr>
    <tr id="spacer1">
        <td align="center" ><div class="numbers" ></div></td>
        <td align="center" ><div class="numbers" id="dday"></div></td>
        <td align="center" ><div class="numbers" id="dhour"></div></td>
        <td align="center" ><div class="numbers" id="dmin"></div></td>
        <td align="center" ><div class="numbers" id="dsec"></div></td>
        <td align="center" ><div class="numbers" ></div></td>
    </tr>
    <tr id="spacer2">
        <td align="center" ><div class="title" ></div></td>
        <td align="center" ><div class="title" id="days">Days</div></td>
        <td align="center" ><div class="title" id="hours">Hours</div></td>
        <td align="center" ><div class="title" id="minutes">Minutes</div></td>
        <td align="center" ><div class="title" id="seconds">Seconds</div></td>
        <td align="center" ><div class="title" ></div></td>
    </tr>
</table>
</center>

<script type="text/javascript">

/*
Count down until any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
Modified by Robert M. Kuhnhenn, D.O. 
on 5/30/2006 to count down to a specific date AND time,
and on 1/10/2010 to include time zone offset.
*/

/*  Change the items below to create your countdown target date and announcement once the target date and time are reached.  */
var current="Winter is here!"        //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters
var year=2010        //—>Enter the count down target date YEAR
var month=12          //—>Enter the count down target date MONTH
var day=21           //—>Enter the count down target date DAY
var hour=18          //—>Enter the count down target date HOUR (24 hour clock)
var minute=38        //—>Enter the count down target date MINUTE
var tz=-5            //—>Offset for your timezone in hours from UTC (see http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)

//—>    DO NOT CHANGE THE CODE BELOW!    <—
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countdown(yr,m,d,hr,min){
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000) { todayy+=1900 }
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60)
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring
var dday=Math.floor(dd/(60*60*1000*24)*1)
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
document.getElementById('count2').innerHTML=current;
document.getElementById('count2').style.display="inline";
document.getElementById('count2').style.width="390px";
document.getElementById('dday').style.display="none";
document.getElementById('dhour').style.display="none";
document.getElementById('dmin').style.display="none";
document.getElementById('dsec').style.display="none";
document.getElementById('days').style.display="none";
document.getElementById('hours').style.display="none";
document.getElementById('minutes').style.display="none";
document.getElementById('seconds').style.display="none";
document.getElementById('spacer1').style.display="none";
document.getElementById('spacer2').style.display="none";
return;
}
else {
document.getElementById('count2').style.display="none";
document.getElementById('dday').innerHTML=dday;
document.getElementById('dhour').innerHTML=dhour;
document.getElementById('dmin').innerHTML=dmin;
document.getElementById('dsec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}
}

countdown(year,month,day,hour,minute)
</script>
</body>
</html>

[Michael Regan]

Tables aren't the best way to do this; CSS is the commonly accepted method. Try the following HTML:

Nice! I was just looking for an alternate to using a table!

It does not appear to adjust properly to the width in some cases... but I'll see if I can adjust it somehow.
- nope, it fills the full width for some reason. Any ideas?

[Michael Regan]

My "table box" code, though not preferable does automatically conform to the shape of the boxed contents in question. The prefered "HTML box" expands to the full width of the screen for reasons that I am unable to determine.

The only problem with using the "table box" coding which is causing difficulties is that the code forces the display onto a line of its own so that additional boxes cannot be displayed side-by-side, but instead one above the other. I would like to be able to alter the code in some way to have the boxes display side-by-side.

Further help with adjustments would be greatly appreciated.

[miniu81]

Because there are some questions about custom BBCodes for video players/live channels etc. I have tried to make for the most common players a code and put it in my forum/message board... and it works. So I want to share this information with all of you and paste the codes below. Have fun!! Hope it helps.

If you want a custom BBCode for your video player PM me and I will update my post with another code.

--==www.livestream.com==--
BBcode

Code: Select all

[livestream]http://{TEXT1}livestream.com/{IDENTIFIER}{TEXT2}[/livestream]

HTML

Code: Select all

<object width="500" height="375" id="lsplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="http://cdn.livestream.com/grid/LSPlayer.swf?channel={IDENTIFIER}&autoPlay=false"></param>
<param name="allowScriptAccess" value="always"></param>
<param name="allowFullScreen" value="true"></param>
<embed name="lsplayer" wmode="transparent" src="http://cdn.livestream.com/grid/LSPlayer.swf?channel={IDENTIFIER}&autoPlay=false" width="500" height="375" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash"></embed></object>

Example

Code: Select all

[livestream]http://livestre.am/tjuc[/livestream]

--==www.justin.tv==--
BBcode

Code: Select all

[justin]http://{TEXT1}justin.tv/{IDENTIFIER}{TEXT2}[/justin]

HTML

Code: Select all

<object type="application/x-shockwave-flash" height="375" width="500" id="jtv_flash" data="http://www.justin.tv/widgets/live_embed_player.swf?start_volume=1.0&backgroundImage=&channel={IDENTIFIER}&auto_play=false" bgcolor="#000000">
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://www.justin.tv/widgets/live_embed_player.swf" />
<param name="flashvars" value="start_volume=1.0&backgroundImage=&channel={IDENTIFIER}&auto_play=false" /> </object>

Example

Code: Select all

[justin]http://es.justin.tv/zdfaaadgf[/justin]

--==www.zonein.tv==--
BBCode

Code: Select all

[zonein]http://{TEXT1}zonein.tv/{NUMBER}{TEXT2}[/zonein]

HTML

Code: Select all

<script type='text/javascript'>id='{NUMBER}'; width='500'; height = '375';</script><script type='text/javascript' src='http://embed.zonein.tv/player.js'></script>

Example

Code: Select all

[zonein]http://zonein.tv/25332[/zonein]

--==www.mips.tv==--
BBcode

Code: Select all

[mips]http://{TEXT1}mips.tv/channel.php?u={NUMBER}{TEXT2}[/mips]

HTML

Code: Select all

<script type='text/javascript'> width=480, height=380, id='{NUMBER}', e='1';</script><script type='text/javascript' src='http://www.mips.tv/player/doitlive_embed.js'></script>

Example

Code: Select all

[mips]http://www.mips.tv/channel.php?u=55[/mips]

--==www.ustream.tv==--
BBCode

Code: Select all

[ustream]{NUMBER}[/ustream]

HTML

Code: Select all

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="390">
<param name="flashvars" value="autoplay=false&brand=embed&cid={NUMBER}"/>
<param name="allowfullscreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="movie" value="http://www.ustream.tv/flash/live/1/{NUMBER}?v3=1"/>
<embed flashvars="autoplay=false&brand=embed&cid={NUMBER}" width="500" height="390" allowfullscreen="true" allowscriptaccess="always" src="http://www.ustream.tv/flash/live/1/{NUMBER}?v3=1" type="application/x-shockwave-flash" /></object>

Example

Code: Select all

[ustream]1234567[/ustream]

--==www.boxlive.tv==--
BBcode

Code: Select all

[boxlive]http://www.boxlive.tv/channels/{SIMPLETEXT}{TEXT}[/boxlive]

HTML

Code: Select all

<script type="text/javascript" src="http://embed.boxlive.tv/channel.php?file={SIMPLETEXT}&width=500&height=450&autoplay=false"></script>

Example

Code: Select all

[boxlive]http://www.boxlive.tv/channels/fut412[/boxlive]

--==www.dailymotion.com==--
BBCode

Code: Select all

[dailymotion]{IDENTIFIER}[/dailymotion]

HTML

Code: Select all

<object height="336" width="420"><param name="movie" value="http://www.dailymotion.com/swf/{IDENTIFIER}&v3=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.dailymotion.com/swf/{IDENTIFIER}&v3=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" height="336" width="420"></object>

Example

Code: Select all

[dailymotion]xfq12g[/dailymotion]

--==www.vimeo.com==--
BBCode

Code: Select all

[vimeo]http://www.vimeo.com/{IDENTIFIER}[/vimeo]

HTML

Code: Select all

<object type="application/x-shockwave-flash" width="500" height="350" data="http://www.vimeo.com/moogaloop.swf?clip_id={IDENTIFIER}"><param name="quality" value="best" /><param name="allowfullscreen" value="true" /><param name="scale" value="showAll" /><param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id={IDENTIFIER}" /></object>

Example

Code: Select all

[vimeo]http://www.vimeo.com/17172062[/vimeo]

--==www.veoh.com==--
BBCode

Code: Select all

[veoh]{IDENTIFIER}[/veoh]

HTML

Code: Select all

<embed src="http://www.veoh.com/videodetails2.swf?permalinkId={IDENTIFIER}&id=1886803&player=videodetailsembedded&videoAutoPlay=0" allowFullScreen="true" width="425" height="350" bgcolor="#000000" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Example

Code: Select all

[veoh]v1540131RrTDGWb3[/veoh]

[Pony99CA]

Tables aren't the best way to do this; CSS is the commonly accepted method. Try the following HTML:

It does not appear to adjust properly to the width in some cases... but I'll see if I can adjust it somehow.
- nope, it fills the full width for some reason. Any ideas?

You need to be more specific about the problem (specifically what "some cases" are). The box code adjusts until the window becomes "too small" at which point phpBB seems to get truncated. Maybe they have a minimum width set in their CSS, but I don't know.

Steve

[HonorKitten]

I am totally lost! I have no clue how to install BBCodes, and it seems that there are no tutorials via the search to install them.

Can someone either point me to the right thread or explain here how to do it?

Also, I'm looking for a few specific codes.

• Strikethrough
  Spoiler (maybe a different style from the one here?)
  Youtube embed
  Music player embed of some kind