Welcome Guest ( Log In | Register )



3 Pages V   1 2 3 >  
Reply to this topicStart new topic
> Custom BBCode, Help
pyost
post Jan 25 2006, 09:16 AM
Post #1


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 993
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500



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

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

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.

CODE
<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 wink.gif

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://www.forumiranje.com/forum/index.php...findpost&p=4776
Go to the top of the page
 
+Quote Post
Houdini
post Jan 25 2006, 03:34 PM
Post #2


Super Member
Group Icon

Group: Members
Posts: 572
Joined: 25-April 05
From: Nashville Tennessee
Member No.: 4,340



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
CODE
<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
CODE
.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:

user posted image
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.
Go to the top of the page
 
+Quote Post
pyost
post Jan 25 2006, 07:41 PM
Post #3


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 993
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500



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 smile.gif
Go to the top of the page
 
+Quote Post
Houdini
post Jan 25 2006, 10:14 PM
Post #4


Super Member
Group Icon

Group: Members
Posts: 572
Joined: 25-April 05
From: Nashville Tennessee
Member No.: 4,340



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;
user posted image
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.
Go to the top of the page
 
+Quote Post
pyost
post Jan 25 2006, 10:40 PM
Post #5


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 993
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500



I'm not that stupid smile.gif 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.
Go to the top of the page
 
+Quote Post
Houdini
post Jan 25 2006, 10:49 PM
Post #6


Super Member
Group Icon

Group: Members
Posts: 572
Joined: 25-April 05
From: Nashville Tennessee
Member No.: 4,340



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 astahost) 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.
Go to the top of the page
 
+Quote Post
pyost
post Jan 26 2006, 08:40 AM
Post #7


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 993
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500



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:

CODE
.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.

CODE
color: #000;

CODE
border: 1px dotted #000;


Why are there only three characters here and not six?

CODE
/*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? smile.gif

Thanks a lot for this, you really cleared out some things to me.
Attached File(s)
Attached File  no_file.jpg ( 94.86k ) Number of downloads: 65
 
Go to the top of the page
 
+Quote Post
Houdini
post Jan 26 2006, 12:14 PM
Post #8


Super Member
Group Icon

Group: Members
Posts: 572
Joined: 25-April 05
From: Nashville Tennessee
Member No.: 4,340



/* <---Everything inside the forward slash * (asterick) and a following -->[B]*/ is a comment normally used for multiple line instead of the // Comment for a single line[/B] 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 astahost 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).
Go to the top of the page
 
+Quote Post
pyost
post Jan 26 2006, 06:37 PM
Post #9


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 993
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500



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

CODE
<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:

CODE
<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!
Go to the top of the page
 
+Quote Post
Houdini
post Jan 26 2006, 08:06 PM
Post #10


Super Member
Group Icon

Group: Members
Posts: 572
Joined: 25-April 05
From: Nashville Tennessee
Member No.: 4,340



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.
Go to the top of the page
 
+Quote Post

3 Pages V   1 2 3 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. New Introductions & Tests Of Custom Bbcodes(53)
  2. How To #3: Custom BBCdes For This Board (Note)(15)
  3. Mid-autumn: Dragons In The Streets(1)
  4. Custom Windows Boot Screen(10)
  5. Custom Error Pages(11)
  6. Windows Live Custom Domain: Question(4)
  7. Handle New Custom Protocol(0)
  8. First-custom Brush Based "sig"(6)
  9. Upgraded The Note Bbcode(4)
  10. Photoshop Tutorial: Sunblind's Custom Style #2 - Oh-so-blue(0)
  11. Photoshop Tutorial: Sunblind's Custom Style #3 - The DM.Net Style(3)
  12. Photoshop Tutorial: Sunblind's Custom Style #4 - The Bi-Polar Attraction Set(4)
  13. Photoshop Tutorial: Sunblind's Custom Style #5 - Incredible Orange(0)
  14. Photoshop Tutorial: Sunblind's Custom Style #6 - Satin Pillow(0)
  15. Photoshop Tutorial: Sunblind's Custom Style #7 - Rubber(1)
  1. Custom Built PC - No Sound(8)
  2. Photoshop Tutorial: Sunblind's Custom Style #8 - EyeHeartGold(5)
  3. Photoshop Tutorial: Sunblind's Custom Style #9 - Watery(0)
  4. Photoshop Tutorial: Sunblind's Custom Style #10 - Fiery(4)
  5. Custom Error Pages(4)
  6. Any BBCode Editor Around?(1)
  7. Custom 404 Errorpages : How ?(10)
  8. Diy Fan Controller(4)
  9. Ajaxload Creates For You Free Custom Animated Ajax "loading" Icons(0)
  10. Custom Icon For Your Hard Disk Drives ( For Cds Also)(2)
  11. Help: Multi-threading Trouble In Custom Socket Component(2)
  12. Bbcode Help(9)
  13. Easiest Free Forum To Create Custom Skin For?(2)


 



- Lo-Fi Version Time is now: 6th July 2008 - 10:06 AM