MyBB Central

Full Version: Scrolling Code and Quotes Section HowTo..,
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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.



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;
}

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:

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;
}
There is no need to double up the css.

Try this instead:


Code:
.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;
}
labrocca Wrote:There is no need to double up the css.

Try this instead:


Code:
.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;
}

Good deal yeah..., the only reason I wrote it doubled up is just in case they wanted the option to have the quote section and code section as two different styles.
looks good thank you