///////////////////////////////////////////////////////////////

Custom Code and Quote sections with Scrolling

For MyBB Forum Software

Created by: Vintagedaddyo
Created by: SloDesignz

Website: http://wwww.slodesignz.com


//////////////////////////////////////////////////////////////


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.



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, and replace those sections 

with the following code found below.



//////////////////////////////////////////////////////////////


/* Begin 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;
}


/* End Code: */

////////////////////////////////////////////////////////////////////////


That previous 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:

/* Begin 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;
}



/* End Code */



////////////////////////////////////////////////////////////////////////


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

/* Begin 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;
}

/* End Code */


///////////////////////////////////////////////////////////////////////////


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



/* Begin 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: 200px;
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;
}


/* End Code */