Marmbi: Lovely Code/HTML/PHP bbcode looks - Marmbi

Jump to content


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Lovely Code/HTML/PHP bbcode looks Basic Rate Topic: ***** 1 Votes

#1 User is offline   Dan Icon

  • Administrator
  • Icon
  • Group: Administrators
  • Posts: 12
  • Joined: 02-September 09

Posted 18 September 2009 - 05:27 PM

In this tutorial you will learn how to create the following looking bbcode:
Code:
This is how the CODE bbcode looks :)

PHP Code:
This is how the PHP bbcode looks :)

HTML Code:
This is how the HTML bbcode looks :)

To start with go to Admin Control Panel --> Look & Feel Tab --> Manage Templates & CSS --> (YOUR SKIN NAME) --> CSS --> ipb_styles.css

Scroll to the bottom and add the following CSS:

Code:
/* ***** new code styles by Dan @ marmbi.com ***** */
.bbcode{
 background: #FFF;
 border: 1px solid #FFCC66;
 border-top: 4px solid #FFCC66;
 padding: 5px;
 color: #996600;
 overflow: auto;
 font-size: 11px;
 line-height: 110%;
}
.bbcodetitle{
 font-weight: bold;
 font-size: 10px;
 border: 0px;
 border-bottom: 1px dashed #CC6600;
 color: #CC6600;
 padding-bottom: 3px;
 margin-bottom: 5px;
 overflow: auto;
 font-size: 12px;
 line-height: 110%;
}
/* ***** new html styles by Dan @ marmbi.com ***** */
.bbhtml{
 background: #FFF;
 border: 1px solid #c3ffa8;
 border-top: 4px solid #c3ffa8;
 padding: 5px;
 color: #7fa66e;
 overflow: auto;
 font-size: 11px;
 line-height: 110%;
}
.bbhtmltitle{
 font-weight: bold;
 font-size: 12px;
 border: 0px;
 border-bottom: 1px dashed #82cc00;
 color: #82cc00;
 padding-bottom: 3px;
 margin-bottom: 5px;
 overflow: auto;
 font-size: 11px;
 line-height: 110%;
}
/* ***** new php styles by Dan @ marmbi.com ***** */
.bbphp{
 background: #FFF;
 border: 1px solid #ffa8a8;
 border-top: 4px solid #ffa8a8;
 padding: 5px;
 color: #990000;
 overflow: auto;
 font-size: 11px;
 line-height: 110%;
}
.bbphptitle{
 font-weight: bold;
 font-size: 12px;
 border: 0px;
 border-bottom: 1px dashed #cc0000;
 color: #cc0000;
 padding-bottom: 3px;
 margin-bottom: 5px;
 overflow: auto;
 font-size: 11px;
 line-height: 110%;
}


Save it.

Next go to Admin Control Panel --> Look & Feel Tab --> BBCode Management --> Click on the 'Code' Dropdown Button --> Edit BBCode

Tick 'yes' to drop all 'xx' cached items
Attached File  ishot-2.jpg (34.87K)
Number of downloads: 1
Then scroll down to the 'Custom BBCode Replacement' box and insert this code:

Code:
<div class="bbcode">
<div class="bbcodetitle">Code:</div>
<pre>{content}</pre>
</div>

Attached File  ishot-3.jpg (97.73K)
Number of downloads: 0
Click the 'Edit BBCode' button at the bottom and thats the Code bbcode done.

Next go to Admin Control Panel --> Look & Feel Tab --> BBCode Management --> Click on the 'HTML' Dropdown Button --> Edit BBCode

Tick 'yes' to drop all 'xx' cached items
Attached File  ishot-2.jpg (34.87K)
Number of downloads: 1
Then scroll down to the 'Custom BBCode Replacement' box and insert this code:

Code:
<div class="bbhtml">
<div class="bbhtmltitle">HTML Code:</div>
<pre>{content}</pre>
</div>

Attached File  ishot-4.jpg (96.98K)
Number of downloads: 0
Right, right click this small HTML icon Posted Image and save it to your computer. Now upload it to: forum root/public/style_images/(skin_directory)/rte_icons/

Next go down to 'BBCode Image' and in the field add 'html.png'

Click the 'Edit BBCode' button at the bottom and thats the HTML bbcode done.

Next go to Admin Control Panel --> Look & Feel Tab --> BBCode Management --> Click on the 'PHP' Dropdown Button --> Edit BBCode

Tick 'yes' to drop all 'xx' cached items
Attached File  ishot-2.jpg (34.87K)
Number of downloads: 1
Then scroll down to the 'Custom BBCode Replacement' box and insert this code:

Code:
<div class="bbphp">
<div class="bbphptitle">PHP Code:</div>
<pre>{content}</pre>
</div>

Attached File  ishot-5.jpg (96.3K)
Number of downloads: 0
Right, right click this small PHP icon Posted Image and save it to your computer. Now upload it to: forum root/public/style_images/(skin_directory)/rte_icons/

Next go down to 'BBCode Image' and in the field add 'php.png'

Click the 'Edit BBCode' button at the bottom and thats the PHP bbcode done.

And we are done!

Enjoy :)
0

#2 User is offline   cnmoore Icon

  • Newbie
  • Pip
  • Group: Members
  • Posts: 5
  • Joined: 20-October 09

Posted 20 October 2009 - 04:27 PM

Checking this out. Want to see code box.

Code:
want to        see code box


Good! It preserved the spaces inside the box, but the box has no margins? and no colored top bar?
0

#3 User is offline   Dan Icon

  • Administrator
  • Icon
  • Group: Administrators
  • Posts: 12
  • Joined: 02-September 09

Posted 20 October 2009 - 04:37 PM

Yea i am messing with the skin atm >.<

Ill set your skin as the one with the current colored bars :)
0

#4 User is offline   cnmoore Icon

  • Newbie
  • Pip
  • Group: Members
  • Posts: 5
  • Joined: 20-October 09

Posted 20 October 2009 - 04:40 PM

This will be perfect - thank you again -
And of course feel free to delete my posts..
0

#5 User is offline   Dan Icon

  • Administrator
  • Icon
  • Group: Administrators
  • Posts: 12
  • Joined: 02-September 09

Posted 20 October 2009 - 04:40 PM

Update**

Should be fixed on the CleanCut skin as well now :)

Edit**

Your posts are fine!

Plus your the 1st member i have while setting this all up :D

Like i said on IPB if you need help with any others, feel free to PM/Email me :)

This post has been edited by Dan: 20 October 2009 - 04:42 PM
Reason for edit:: Tesssstttt 2

0

#6 User is offline   Mortenrb Icon

  • Newbie
  • Pip
  • Group: Members
  • Posts: 8
  • Joined: 29-December 09
  • LocationNorway

Posted 30 December 2009 - 12:07 AM

This is very nice, I could acctually use this for my own made forum, I am not too good with CSS you see :)
Posted Image
Posted Image
0
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users