REGISTER or LOGIN to have the annoying ads removed.
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Scrolling Code and Quotes Section HowTo..,
#1
Question 
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;
}


Attached Files
.txt   Less than 1 minute ago">Scrolling_Code_and_Quote_howto_MyBB.txt (Size: 4.79 KB / Downloads: 1)
Reply
#2
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;
}
Reply
#3
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.
Reply
#4
looks good thank you
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  support needed for editing the code colour creators 1 852 Mar 06, 2017, 06:32 AM
Last Post: Jodirhanna
  Remove rep - Authorization code mismatch... SysQ0re 0 1,066 Mar 16, 2013, 06:33 PM
Last Post: SysQ0re
  Using some MyCode in [CODE] boxes. Tekno Venus 2 1,025 Aug 26, 2012, 04:19 PM
Last Post: Tekno Venus
  Mapovifog (Max Post Views For Guests) help with code edit NO BAIL 2 1,174 Aug 10, 2012, 04:13 AM
Last Post: NO BAIL
  Coupon code gen. mbt131 0 536 Jun 21, 2012, 09:08 AM
Last Post: mbt131

Forum Jump:


Users browsing this thread: 1 Guest(s)