Site in read-only mode

This site is now read-only following the release of MyBB 1.8 and the new mods site.

If you are looking for MyBB 1.8 mods please click here to visit the new mods site.

You can continue to download submissions for MyBB 1.6 and earlier here, however new submissions will only be accepted via the new mods site.

Rating

  • Rated /5 with 0 votes
  • 1
  • 2
  • 3
  • 4
  • 5

Scrolling Code and Quotes Section HowTo..,

How to put a scrolling code and quote section in your theme.


So have you downloaded a theme that has fixed Quote and Code sections..., do you have the desire to make those sections scrollable in order to save board space? Have you not been able to find the answer on how to do this easily? Well here is how in a simple instruction.


You can also download these instructions in a text file at the following link:

http://community.mybboard.net/attachment.php?aid=5990



Instructions: Login to Admin Control Panel

In Admin CP > Themes > Modify / Delete > edit theme style

At the bottom there is a section called Additional CSS

Look for the .quote_body and .code_body sections in the Additional CSS for your theme.

Replace those sections with any of the following codes found below.


Code:
/* Advanced Custom Scrolling Quote and Code Sections By: SloDesignz */


.quote_header {
background: url(images/thead_bg.gif) repeat-x top left; /* Quote Header Background Image */
background-color: #E1E4F2;
border-top: 1px solid #0B198C;
border-right: 1px solid #0B198C;
border-left: 1px solid #0B198C;
border-bottom: 0px;
font-weight: bold;
color: #FFFFFF;
padding: 4px;
}

.quote_body {
background-color: #FFFFFF;
border-top: 1px solid #0B198C;
border-left: 1px solid #0B198C;
border-bottom: 1px solid #0B198C;
border-right: 1px solid #0B198C;
overflow: auto; /* Scroll */
height: 150px;  /* Scroll Height */
font-style: italic;
padding: 4px;
}

.code_header {
background: url(images/thead_bg.gif) repeat-x top left; /* Code Header Background Image */
background-color: #E1E4F2;
border-top: 1px solid #0B198C;
border-right: 1px solid #0B198C;
border-left: 1px solid #0B198C;
border-bottom: 0px;
font-weight: bold;
color: #FFFFFF;
padding: 4px;
}

.code_body {
background-color: #FFFFFF;
border-top: 1px solid #0B198C;
border-left: 1px solid #0B198C;
border-bottom: 1px solid #0B198C;
border-right: 1px solid #0B198C;
overflow: auto; /* Scroll */
height: 150px;  /* Scroll Height */
padding: 4px;
}




The above code option gives you the option to have the quote section and the code section to be scrollable and also different in css colors and images if wanted.

If you want them the exact same and don\'t need that option.., well then you could shorten the code as follows:

Code:
/* Combined Custom Scrolling Quote and Code Sections By: SloDesignz */

.quote_header, .code_header {
background: url(images/thead_bg.gif) repeat-x top left; /* Quote Header Background Image */
background-color: #E1E4F2;
border-top: 1px solid #0B198C;
border-right: 1px solid #0B198C;
border-left: 1px solid #0B198C;
border-bottom: 0px;
font-weight: bold;
color: #FFFFFF;
padding: 4px;
}

.quote_body, .code_body {
background-color: #FFFFFF;
border: 1px solid #0B198C;
overflow: auto; /* Scroll */
height: 150px;  /* Scroll Height */
font-style: italic;
padding: 4px;
}


Or for a totally simple bare-bones scrolling Code and Quote section:

Code:
/* Bare-Bones Combined Custom Scrolling Quote and Code Sections By: SloDesignz */

.quote_header, .code_header {
background-color: #FFFFFF;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-bottom: 0px;
font-weight: bold;
color: #000000;
padding: 4px;
}

.quote_body, .code_body {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
overflow: auto; /* Scroll */
height: 150px;  /* Scroll Height */
font-style: italic;
color: #000000;
padding: 4px;
}



Or you can try another trick by setting the max height, rather than making the height an actual value.



Code:
/* Max Height Combined Custom Scrolling Quote and Code Sections By: SloDesignz */

.quote_header, .code_header {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-bottom: 0px;
font-weight: bold;
color: #000000;
padding: 4px;
}

.quote_body {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
overflow: auto;
height: auto;
max-height: 150px;
font-style: italic;
color: #000000;
padding: 4px;
}

.code_body {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
overflow: auto;
height: auto;
max-height: 200px;
color: #000000;
padding: 4px;
font-family: Monaco, Consolas, Courier, monospace;
font-size: 13px;
}