|
|
|
|
![]() ![]() |
Jan 25 2006, 09:16 AM
Post
#1
|
|
|
Nenad Bozidarevic Group: [MODERATOR] Posts: 994 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
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 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 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 |
|
|
|
Jan 25 2006, 03:34 PM
Post
#2
|
|
|
Super Member 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 alongCODE .codetop, 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}.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;*/ } 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. |
|
|
|
Jan 25 2006, 07:41 PM
Post
#3
|
|
|
Nenad Bozidarevic Group: [MODERATOR] Posts: 994 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
|
|
|
|
Jan 25 2006, 10:14 PM
Post
#4
|
|
|
Super Member 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;
![]() 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. |
|
|
|
Jan 25 2006, 10:40 PM
Post
#5
|
|
|
Nenad Bozidarevic Group: [MODERATOR] Posts: 994 Joined: 7-November 05 From: Belgrade, Serbia Member No.: 9,500 |
I'm not that stupid
|
|
|
|
Jan 25 2006, 10:49 PM
Post
#6
|
|
|
Super Member 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.
|
|
|
|
Jan 26 2006, 08:40 AM
Post
#7
|
|
|
Nenad Bozidarevic Group: [MODERATOR] Posts: 994 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? Thanks a lot for this, you really cleared out some things to me.
Attached File(s)
|
|
|
|
Jan 26 2006, 12:14 PM
Post
#8
|
|
|
Super Member 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). |
|
|
|
Jan 26 2006, 06:37 PM
Post
#9
|
|
|
Nenad Bozidarevic Group: [MODERATOR] Posts: 994 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! |
|
|
|
Jan 26 2006, 08:06 PM
Post
#10
|
|
|
Super Member 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.
|
|
|
|
![]() ![]() |
Similar Topics
|
Lo-Fi Version | Time is now: 9th July 2008 - 05:08 AM |