Custom BBCode Help

[pyost 0]

I though we could use a topic like this, where you could ask for help considering making custom BBCodes. I'll start first

I was really inspired by the notice bbcode here on Xisto. I wanted to put something like that on my IPB 2.0 forum, and of course, it was a total failure

First I made a simple html code that creates a table with two rows, where in the first row it would say notice and in the second {content}. It worked properly in the testing part in ACP, but when I tried to use it in a topic, the table was... well, you'll see it on an examle in the end. I still have the same problem, but I started messing around with something more complicated.

Since I have no way of limiting the use of the tag to admins and mods (maybe you know of a way) I need a piece of code which would put the username of the person who is editing the post. Similar to the edited by legend, except I want only the username, and inside the table. The current code I am using looks like this.

<table width="350" border="0" align="center" cellpadding="2" cellspacing="0" bgcolor="#99000">  <tr valign="middle">     <td height="30" bgcolor="#99000">       <div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Napomena</font></b></font></div>      </td>  </tr>  <tr valign="top">     <td bgcolor="#990000">       <table width="350" border="0" cellspacing="0" cellpadding="5">        <tr bgcolor="#FFFFFF" valign="top">           <td width="350" bgcolor="#FFFFFF">             <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">{content}</font></p></td>        </tr>    <tr valign="middle">           <td bgcolor="#99000"> <div align="right"><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif"><b>[NAME]</b></font></div></td>  </tr>        </table>          </td>  </tr></table>

'Napomena' means notice

As you can see, it is quite simple, but it still isn't working! Where it says name, IPB should put the username - I need your help with that. And, of course, I would be really happy if you could tell me why it isn't working in the topic view.

You can see how it looks over here:
http://forums.xisto.com/no_longer_exists/

[Houdini 0]

Although 2.0 allows you to create custom BB Code with the ACP is will probably need you to add some code other than what can be done with the ACP

Try putting the following into the Custom BB Code Replacement at the bottom in 2.0 and it will pretty much use the class as used by the CODE box

<div class='codetop'>NOTE</div><div class='codemain' style= white-space:pre;overflow:auto'><center>Napomena</center>{content}</div>

The above is basically the CODE tag replaced except with NOTE for the displayed text, to change the background et cetera then you need to make you a new css class here are the classes for the .codetop and .codemain to guide you along

.codetop,.sqltop,.htmltop{	width:98%;	color: #000;	margin: 0px auto 0px auto;	font-weight:bold;	padding: 3px;	background-color:#FDDBCC;	background-image: url(1/css_img_code.gif);	background-position: right;	background-repeat: no-repeat;}.codemain,.sqlmain,.htmlmain{	font-family: Courier, Courier New, Verdana, Arial;	color: #465584;	background-color: #FAFCFE;	border: 1px dotted #000;	padding: 2px;	width:98%;	margin: 0px auto 0px auto;	/*overflow: auto;	height: 200px;*/}

That css is in the style_images/css_2.css folder so you would make a new class for background and all then alter your [note] code as shown above, you will probably have to use {username}

Here is what the above code would look like:

 

Let me go back to hard code for BB Codes and I will help you with the 2.0 version I have been mostly using the 1.3 (which doesn't have that feature. It will take some time but hopefully what you have above will at least get you started.

[pyost 0]

The things with div work really good, it's showing the same as code, but I don't seem to have css_2.css. Furthermore, I can't find (when I search through files) that is the same as you wrote it here. I don't know what could be the problem, but if I solved that, I believe that I could handle some css, it looks easy

[Houdini 0]

The css_2.css file is in the style_images folder see the illustration below, it and the index.htl file will be the only files in that folder;

If you will read a little about making a CSS class say a .notecode and a .notebody just use the code that was included in the first post as an example of how classes are defined and as you saw in the code that I gave to use for the sample note if you make a new class and make up the font solor family size background color and all you will end up with what you want with the exception of the {username} which might be called by IPB a different way.

 

In your root folder with IPB 2.0 you should have the following folders;

cache, ipb_kernal, jscripts, lang, lofiversion, retal, skin_acp, skin_cache, sources, skin_acp, skin_cache,sources, style_avatars, style_emoticons,and style_images which is the folder that has the css_2.css, if there is a css file in yours by another name that is most likely the file you wont know til you open it up.

[pyost 0]

I'm not that stupid I just don't get it, but when I search all the things in the upload folder (TC search *.css) I get three files for lofiversion and one in skin_acp. If I could find it I believe that I could do something, it looks quite understandable.

[Houdini 0]

To find that file use your Window search and just tell it to browse the 2.0 ipb folder, that is if you have the upload directory on your local hard drive (note) that file is created when you install IPB so if you have an uninstalled copy on your hard drive you will not see it. If you have cPanel on your host (I will assume you do and that you use Xisto) just use file manager and look at the style_images folder and you should only see two files css_2.css and index,html and a 1 folder with a bunch of images.

[pyost 0]

This is so unbelievable! See for yourself, the attatched picture. There is one from the upload folder, one on the server, and one from cpanel.

Anyway, just to make sure i understood what I need to do if I somehow find that file.
I should create something like this and adjust it to my needs:

.notetop,.sqltop,.htmltop{width:98%;color: #000;margin: 0px auto 0px auto;font-weight:bold;padding: 3px;background-color:#FDDBCC;background-image: url(1/css_img_code.gif);background-position: right;background-repeat: no-repeat;}.notemain,.sqlmain,.htmlmain{font-family: Courier, Courier New, Verdana, Arial;color: #465584;background-color: #FAFCFE;border: 1px dotted #000;padding: 2px;width:98%;margin: 0px auto 0px auto;/*overflow: auto;height: 200px;*/}

And then in the BBCode replacement put notetop and notemain, right?

I can change the size, the background image ('ph'), the background colour, font, etc. A few more questions.

color: #000;

border: 1px dotted #000;

Why are there only three characters here and not six?

/*overflow: auto;height: 200px;*/

If I am not mistaken this is a comment, and not a part of the code. So, what does the comment want to say?

Thanks a lot for this, you really cleared out some things to me.

[Houdini 0]

/* <---Everything inside the forward slash * (asterick) and a following -->*/ is a comment normally used for multiple line instead of the // Comment for a single line If you were to uncomment the line in that code it would produce a 200 pixel box regardless of the lines in that box (a real waste of space) even if there were only one.

 

If you find the file it is possible that it is called something else because you might be using a different version and it is entirely possible that it is in another folder. What you need to do is review all the .css files because that is how the forum gets its information on how to display certain areas of the forum. It is possible to have one large .css file that contains all the information to set the style, and if that is the case then you would create your .notetop and .notebody within that file seperate from the other because your .notetop and notebody should have different characteristics from the html and sql boxes. You might want a solid border or a dashed border for your box, and you might want it to have different dimensions from other.

 

So you are on the right track and just need to find the .css that contains the html and sql classes in it and in that file is where you would, I will install that version on my site and see what it is that is going on because I believe that my 2.0 version is different than the one that Xisto or in your case that you are using. Do you have a server on your local PC or Mac? It would help a lot if you did (it also needs at least PHP just to run PHP).

[pyost 0]

I don't have a home server, because I tried using xammp, and didn't like it a lot. But never mind, I have managed to solve the problem!

Since I wasn't able to find the css file, I looked at the index.php source code because I was hoping to find a link to the css file that it uses. What I found in there was the complete css structure between

<style type="text/css"></style>

So I decided to try something different. I thought that the BBCode would work if I put the custom css between the tags and into the BBCode replacement. It looked like this:

<style type="text/css">.notetop,.sqltop,.htmltop{width:300px;height:20px;color: #000;margin: 0px auto 0px auto;font-weight:bold;padding: 3px;color: #FFFFFF;background-color:#4A6A75;background-image: url(style_images/1/note_back.gif);background-position: left;background-repeat: repeat;}.notemain,.sqlmain,.htmlmain{font-family: Courier, Courier New, Verdana, Arial;color: #000000;background-color: #CAD7DD;border: 1px dotted #000;padding: 2px;width:300px;margin: 0px auto 0px auto;/*overflow: auto;height: 200px;*/}</style><div class='notetop'>NAPOMENA</div><div class='notemain' style= white-space:pre;overflow:auto'>{content}</div>

And fortunately, it worked! Thanks a lot for you help, now I have a better understanding of css and how it is used. This will help me with building websites, I am sure!

[Houdini 0]

Great to hear about that , as you said css is not that difficult and makes it so you can create a class for just about anything you want and either import them or embed them into documents and where you want certain thing to happen just call that name in a tag where you want to use them.

[pyost 0]

Need help with one more thing. When I type some logner texts, instead of breaking it into a few lines, it creates a horizontal scroll bar. How to solve this? I see that the code tag works properly.

[miCRoSCoPiC^eaRthLinG 0]

Horizontal scroll bar, eh ?

You should use these two properties together for that div:

overflow: auto;word-wrap: break-word;

That should see you through.

[Houdini 0]

Hey pyost when you get it the way you want and all why dont you let us know how everything is working. Glad you discovered how simple and powerful just using a little css is. What you are using in this case is embedded style, and there is also inline css where you apply the style to an individual element, and you can import a seperate style sheet that you could use on what ever page you want by importing the style sheet you created by

<style type='text/css'>  <!--      @import url(your.css)  --></style>

That way you make the style sheet with all kind of classes etcetera once and just import it into those pages where you want to use it. Then if you want to add more changes that effect the look of all those pages you just change the one style sheet instead of messing with all the pages individually.

[pyost 0]

2Houdini

Useful, I'm sure that will come in handy.

2m^e

Let me check if I got this right. The div part should look like this:

<div class='notetop'>NAPOMENA</div><div class='notemain' style= white-space:pre;overflow:auto;word-wrap: break-word'>{content}</div>

Cause it's not working

Here's a link to how it looks

[Houdini 0]

Use this pyost and it will work, I dont have the color scheme you used but here is the out put using the following

<div class='codetop'>Napomena:</div><div class='codemain' style= overflow:auto;word-wrap:normal'>{content}</div>

Drop the word-wrap:break-word; and the white-space:pre; as shown above and you will fix it just as shown. Sorry I use illustration so much but it is easier than my misspelled words and such.