1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Adding sidebar to mybb forums

Discussion in 'Forum Management' started by highlow, Oct 9, 2015.

  1. #1
    ACP > Templates & Style > Templates > Your Theme > Index Page Templates > index.

    Hello, Everything went well for my sidebar but the links are colored white so it cant be read because mybb has a light background unless you will highlight them. Even the username of the posters cant be seen except for those who customized their username to different colors. The base color of my theme is "leaf". The main forum is fine because the color of the usernames and topics are green so it can be seen unlike with the side bar . Please guide me what else i should add so it can be seen. Maybe i should change the colors of the usernames and links of topics at the sidebar. Make it the same color with the main forum. thank you
    SEMrush
    {$header}
    <div class="side" style="float: right; width: 19%">
    
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    
    <tr>
      <td class="thead">
           {$boardstats}
    {$topStats['LastThreads']}
    {$topStats['LastActiveThreads']}
    {$topStats['MostViews']}
    {$topStats['Posters']}
    {$topStats['Reputation']}
    {$topStats['Referrals']}
    {$topStats['Timeonline']}
    {$topStats['NewestUsers']}
      </td>
    </tr>
    
    <tr>
      <td class="trow2">
       Text Here
      </td>
    </tr>
    </table>
    </div>
    {$announcement}
    <div class="forum" style="float: left; width: 80%;">{$forums}</div>
    Code (markup):
     
    highlow, Oct 9, 2015 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,626
    Likes Received:
    719
    Best Answers:
    151
    Trophy Points:
    420
    #2
    You should edit the CSS to add something like this:
    
    .side a {
    color: green;
    }
    
    Code (markup):
     
    PoPSiCLe, Oct 10, 2015 IP
  3. highlow

    highlow Member

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    Thank you but may i know where exactly? I am using mybb. Newbie here :) thanks

    global.css
    Attached to all pages
    usercp.css (Inherited from MyBB Master Style)
    Attached to usercp.php, usercp2.php and private.php
    modcp.css (Inherited from MyBB Master Style)
    Attached to modcp.php
    star_ratings.css (Inherited from MyBB Master Style)
    Attached to forumdisplay.php and showthread.php
    showthread.css (Inherited from MyBB Master Style)
    Attached to showthread.php
    thread_status.css (Inherited from MyBB Master Style)
    Attached to usercp.php, forumdisplay.php and search.php css3.css (Inherited from MyBB Master Style)
    Attached to all pages color_black.css
    Attached to color setting Black
    color_calm.css
    Attached to color setting Calm
    color_dawn.css
    Attached to color setting Dawn
    color_earth.css
    Attached to color setting Earth
    color_flame.css
    Attached to color setting Flame
    color_leaf.css
    Attached to color setting Leaf
    color_night.css
    Attached to color setting Night
    color_sun.css
    Attached to color setting Sun
    color_twilight.css
    Attached to color setting Twilight
    color_water.css
    Attached to color setting Water
    avatarep.css (Inherited from MyBB Master Style)
    Attached to all pages
    notemoderator.css (Inherited from MyBB Master Style)
    Attached to showthread.php
     
    Last edited: Oct 10, 2015
    highlow, Oct 10, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,626
    Likes Received:
    719
    Best Answers:
    151
    Trophy Points:
    420
    #4
    Holy crap. That's a LOT of css-files.since I know nothing about how mybb works, I don't know how updates works, for instance. I would guess adding it to global will work, but that might be deleted on an update (if mybb does incremental updates).
     
    PoPSiCLe, Oct 11, 2015 IP
  5. highlow

    highlow Member

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #5
    Thank you for giving attention to my problem. Here is what inside the global.css. I hope you may tell me what i should add there. thanks


    body {
    background: #fff;
    color: #333;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    overflow-y: scroll;
    }

    a:link {
    color: #0072BC;
    text-decoration: none;
    }

    a:visited {
    color: #0072BC;
    text-decoration: none;
    }

    a:hover,
    a:active {
    color: #0072BC;
    text-decoration: underline;
    }

    #container {
    text-align: left;
    line-height: 1.4;
    margin: 0;
    min-width: 990px;

    #topmenu {
    margin: 30px 0 -14px 0;
    position: relative;
    font-size: 15px;
    text-align: right;
    }

    #topmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #topmenu ul li {
    display: inline;
    margin: 0 1px;
    }

    #topmenu ul li a {
    padding: 5px 10px 5px;
    display: block;
    text-decoration: none;
    border-bottom: 4px solid #3a3a3a;
    }

    #topmenu ul li a:hover {
    border-bottom: 4px solid #ff7500;
    color: #ff7500;
    }

    color: #333;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    }

    #topmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #topmenu ul li {
    display: inline-block;
    margin: 0 1px;
    }

    #topmenu ul li a {
    padding: 5px 10px 5px;
    display: block;
    text-decoration: none;
    border-bottom: 4px solid #3a3a3a;
    }

    #topmenu ul li a:hover {
    border-bottom: 4px solid #ff7500;
    color: #ff7500;
    }

    color: #333;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    }

    .wrapper {
    width: 85%;
    min-width: 970px;
    max-width: 1500px;
    margin: auto auto;
    }

    #logo {
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #263c30;
    }

    #content {
    background: #fff;
    width: auto !important;
    padding: 20px 10px;
    overflow: hidden;
    }

    #header ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #header ul.menu li {
    margin: 0 7px;
    display: inline;
    }

    #header ul.menu li a {
    padding-left: 20px;
    background-image: url(images/headerlinks_sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    }

    #logo ul.top_links {
    font-weight: bold;
    text-align: right;
    margin: -10px 5px 0 0;
    }

    #logo ul.top_links a.search {
    background-position: 0 0;
    }

    #logo ul.top_links a.memberlist {
    background-position: 0 -20px;
    }

    #logo ul.top_links a.calendar {
    background-position: 0 -40px;
    }

    #logo ul.top_links a.help {
    background-position: 0 -60px;
    }

    #logo ul.top_links a.portal {
    background-position: 0 -180px;
    }

    #panel .upper a.logout {
    font-weight: bold;
    background: url(images/headerlinks_sprite.png) right -80px no-repeat;
    padding-right: 20px;
    margin-left: 10px;
    }

    #panel .upper a.login,
    #panel .upper a.lost_password {
    background: url(images/headerlinks_sprite.png) 0 -100px no-repeat;
    padding-left: 20px;
    margin-left: 10px;
    font-weight: bold;
    }

    #panel .upper a.register {
    background: url(images/headerlinks_sprite.png) right -80px no-repeat;
    padding-right: 20px;
    margin-left: 10px;
    font-weight: bold;
    }

    #panel .lower ul.panel_links {
    float: left;
    }

    #panel .lower ul.panel_links a.usercp {
    background-position: 0 -120px;
    }

    #panel .lower ul.panel_links a.modcp {
    background-position: 0 -140px;
    }

    #panel .lower ul.panel_links a.admincp {
    background-position: 0 -160px;
    }

    #panel .lower ul.user_links {
    float: right;
    }

    #panel .lower ul.user_links li a {
    padding: 0;
    background-image: none;
    }

    #panel .upper {
    background: #0f0f0f url(images/tcat.png) repeat-x;
    color: #fff;
    border-top: 1px solid #444;
    border-bottom: 1px solid #000;
    padding: 7px;
    clear: both;
    }

    #panel .upper a:link,
    #panel .upper a:visited,
    #panel .upper a:hover,
    #panel .upper a:active {
    color: #fff;
    }

    #panel .lower {
    background: #efefef;
    color: #999;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    }

    #panel .lower a:link,
    #panel .lower a:visited,
    #panel .lower a:hover,
    #panel .lower a:active {
    color: #666;
    }

    #search {
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    vertical-align: middle;
    }

    #search input.button,
    #search input.textbox {
    border-color: #000;
    }

    #search input.button {
    background: #0066a2 url(images/thead.png) top left repeat-x;
    color: #fff;
    }

    #search input {
    margin: -3px 0;
    }

    #quick_login .remember_me input {
    vertical-align: middle;
    margin: -3px 0 0 5px;
    }

    #footer {
    clear: both;
    }

    #footer ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #footer ul.menu li {
    margin: 0 5px;
    display: inline;
    }

    #footer .upper {
    background: #efefef;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 6px;
    font-size: 12px;
    overflow: hidden;
    }

    #footer a:link,
    #footer a:visited,
    #footer a:hover,
    #footer a:active {
    color: #777;
    }

    #footer .upper .language {
    float: right;
    margin: -1px;
    margin-left: 15px;
    }

    #footer .upper .language select {
    border-color: #ccc;
    }

    #footer .upper .theme {
    float: right;
    margin: -1px;
    margin-left: 15px;
    }

    #footer .upper .theme select {
    border-color: #ccc;
    }

    #footer .upper ul.bottom_links {
    float: left;
    margin: 4px 0 0 0;
    }

    #footer .lower {
    color: #666;
    padding: 6px 6px 12px 6px;
    overflow: hidden;
    font-size: 11px;
    }

    #footer .lower a:link,
    #footer .lower a:visited {
    color: #444;
    font-weight: bold;
    }

    #footer .lower a:hover,
    #footer .lower a:active {
    color: #333;
    text-decoration: underline;
    font-weight: bold;
    }

    #footer .lower #current_time {
    float: right;
    color: #888;
    }

    #debug {
        float: right;
        text-align: right;
        margin-top: 20px;
        font-size: 11px;
    }
    
    .scaleimages img {
        max-width: 100%;
    }
    
    .forum_status {
        height: 30px;
        width: 30px;
        background: url(images/forum_icon_sprite.png) no-repeat 0 0;
        display: inline-block;
    }
    
    .forum_on {
        background-position: 0 0;
    }
    
    .forum_off {
        background-position: 0 -30px;
    }
    
    .forum_offlock {
        background-position: 0 -60px;
    }
    
    .forum_offlink {
        background-position: 0 -90px;
    }
    
    .subforumicon {
        height: 10px;
        width: 10px;
        display: inline-block;
        margin: 0 5px;
        background: url(images/mini_status_sprite.png) no-repeat 0 0;
    }
    
    .subforum_minion {
        background-position: 0 0;
    }
    
    .subforum_minioff {
        background-position: 0 -10px;
    }
    
    .subforum_miniofflock {
        background-position: 0 -20px;
    }
    
    .subforum_miniofflink {
        background-position: 0 -30px;
    }
    
    table {
        color: #333;
        font-size: 13px;
    }
    
    .tborder {
        background: #fff;
        width: 100%;
        margin: auto auto;
        border: 1px solid #ccc;
        padding: 1px;
    }
    
    .tfixed {
        table-layout: fixed;
        word-wrap: break-word;
    }
    
    .thead {
        background: #0066a2 url(images/thead.png) top left repeat-x;
        border-bottom: 1px solid #263c30;
        padding: 8px;
      
        color: #ffffff;
    }
    
    .thead a:link {
        color: #ffffff;
        text-decoration: none;
    }
    
    .thead a:visited {
        color: #ffffff;
        text-decoration: none;
    }
    
    .thead a:hover,
    .thead a:active {
        color: #ffffff;
        text-decoration: underline;
    }
    
    .tcat {
        background: #0f0f0f url(images/tcat.png) repeat-x;
        color: #fff;
        border-top: 1px solid #444;
        border-bottom: 1px solid #000;
        padding: 6px;
        font-size: 12px;
    }
    
    .tcat a:link {
        color: #fff;
    }
    
    .tcat a:visited {
        color: #fff;
    }
    
    .tcat a:hover,
    .tcat a:active {
        color: #fff;
    }
    
    .trow1 {
        background: #f5f5f5;
        border: 1px solid;
        border-color: #fff #ddd #ddd #fff;
    }
    
    .trow2 {
        background: #efefef;
        border: 1px solid;
        border-color: #fff #ddd #ddd #fff;
    }
    
    .trow_shaded {
        background: #ffdde0;
        border: 1px solid;
        border-color: #fff #ffb8be #ffb8be #fff;
    }
    
    .no_bottom_border {
        border-bottom: 0;
    }
    
    .post.unapproved_post {
        background: #ffdde0;
    }
    
    .post.unapproved_post .post_author {
        border-bottom-color: #ffb8be;
    }
    
    .post.classic.unapproved_post .post_author {
        border-color: #ffb8be;
    }
    
    .post.unapproved_post .post_controls {
        border-top-color: #ffb8be;
    }
    
    .trow_deleted,
    .post.deleted_post {
        background: #E8DEFF;
    }
    
    .trow_selected,
    tr.trow_selected td {
        background: #FFFBD9;
        color: #333;
        border-right-color: #F7E86A;
        border-bottom-color: #F7E86A;
    }
    
    .trow_selected a:link,
    .trow_selected a:visited,
    .trow_selected a:hover,
    .trow_selected a:active {
        color: #333;
    }
    
    .trow_sep {
        background: #ddd;
        color: #333;
        border-bottom: 1px solid #c5c5c5;
        padding: 6px;
        font-size: 12px;
        font-weight: bold;
    }
    
    .tfoot {
        border-top: 1px solid #fff;
        padding: 6px;
        background: #ddd;
        color: #666;
    }
    
    .tfoot a:link {
        color: #444;
        text-decoration: none;
    }
    
    .tfoot a:visited {
        color: #444;
        text-decoration: none;
    }
    
    .tfoot a:hover,
    .tfoot a:active {
        color: #444;
        text-decoration: underline;
    }
    
    .thead input.textbox,
    .thead select {
        border: 1px solid #263c30;
    }
    
    .bottommenu {
        background: #efefef;
        color: #333;
        border: 1px solid #4874a3;
        padding: 10px;
    }
    
    .navigation {
        color: #333;
        font-size: 12px;
    }
    
    .navigation a:link {
        text-decoration: none;
    }
    
    .navigation a:visited {
        text-decoration: none;
    }
    
    .navigation a:hover,
    .navigation a:active {
        text-decoration: underline;
    }
    
    .navigation .active {
        color: #333;
        font-size: small;
        font-weight: bold;
    }
    
    .smalltext {
        font-size: 11px;
    }
    
    .largetext {
        font-size: 16px;
        font-weight: bold;
    }
    
    fieldset {
        padding: 12px;
        border: 1px solid #ddd;
        margin: 0;
    }
    
    fieldset.trow1,
    fieldset.trow2 {
        border-color: #bbb;
    }
    
    fieldset.align_right {
        text-align: right;
    }
    
    input.textbox {
        background: #ffffff;
        color: #333;
        border: 1px solid #ccc;
        padding: 3px;
        outline: 0;
        font-size: 13px;
        font-family: Tahoma, Verdana, Arial, Sans-Serif;
    }
    
    textarea {
        background: #ffffff;
        color: #333;
        border: 1px solid #ccc;
        padding: 2px;
        line-height: 1.4;
        outline: 0;
        font-family: Tahoma, Verdana, Arial, Sans-Serif;
        font-size: 13px;
    }
    
    select {
        background: #ffffff;
        padding: 3px;
        border: 1px solid #ccc;
        outline: 0;
        font-family: Tahoma, Verdana, Arial, Sans-Serif;
        font-size: 13px;
    }
    
    button,
    input.button {
        padding: 3px 8px;
        cursor: pointer;
        font-family: Tahoma, Verdana, Arial, Sans-Serif;
        font-size: 13px;
        background: #eee url(images/buttons_bg.png) repeat-x;
        border: 1px solid #bbb;
        color: #333;
        outline: 0;
    }
    
    button:hover,
    input.button:hover {
        border-color: #aaa;
    }
    
    form {
        margin: 0;
        padding: 0;
    }
    
    form input.error {
        border: 1px solid #f30;
        color: #f30;
        background: #ffffff;
        padding: 3px;
        outline: 0;
        font-size: 13px;
        font-family: Tahoma, Verdana, Arial, Sans-Serif;
    }
    
    form input.valid {
        border: 1px solid #0c0;
        background: #ffffff;
        padding: 3px;
        outline: 0;
        font-size: 13px;
        font-family: Tahoma, Verdana, Arial, Sans-Serif;
    }
    
    form label.error {
        color: #f30;
        margin: 5px;
        padding: 0px;
        display: block;
        font-weight: bold;
        font-size: 11px;
    }
    
    form #message {
        width: 500px;
    }
    
    .editor {
        background: #f1f1f1;
        border: 1px solid #ccc;
    }
    
    .editor_control_bar {
        background: #fff;
        border: 1px solid #ccc;
    }
    
    .post .editor_control_bar {
        background: #f5f5f5;
    }
    
    .popup_menu {
        background: #fff;
        border: 1px solid #ccc;
    }
    
    .popup_menu .popup_item {
        background: #efefef;
        color: #333;
    }
    
    .popup_menu .popup_item:hover {
        background: #0072BC;
        color: #fff;
    }
    
    .trow_reputation_positive {
        background: #ccffcc;
    }
    
    .trow_reputation_negative {
        background: #ffcccc;
    }
    
    .reputation_positive {
        color: green;
    }
    
    .reputation_neutral {
        color: #444;
    }
    
    .reputation_negative {
        color: red;
    }
    
    .repbox {
        font-size:16px;
        font-weight: bold;
        padding:5px 7px 5px 7px;
    }
    
    ._neutral {
        background-color:#FAFAFA;
        color: #999999;
        border:1px solid #CCCCCC;
    }
    
    ._minus {
        background-color: #FDD2D1;
        color: #CB0200;
        border:1px solid #980201;
    }
    
    ._plus {
        background-color:#E8FCDC;
        color: #008800;
        border:1px solid #008800;
    }
    
    img {
        border: none;
    }
    
    img.attachment {
        border: 1px solid #E9E5D7;
        padding: 2px;
    }
    
    hr {
        background-color: #000000;
        color: #000000;
        height: 1px;
        border: 0px;
    }
    
    .clear {
        clear: both;
    }
    
    .float_left {
        float: left;
    }
    
    .float_right {
        float: right;
    }
    Code (markup):
    .hidden {
        display: none;
        float: none;
        width: 1%;
    }
    
    .hiddenrow {
        display: none;
    }
    
    .selectall {
        background: #FFFBD9;
        border-bottom: 1px solid #F7E86A;
        color: #333;
        text-align: center;
    }
    
    .expcolimage {
        float: right;
        width: auto;
        vertical-align: middle;
        margin-top: 3px;
    }
    
    .tcat_menu > .expcolimage {
        margin-top: 0;
    }
    
    blockquote {
        border: 1px solid #ccc;
        margin: 0;
        background: #fff;
        padding: 10px;
    }
    
    blockquote cite {
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        font-style: normal;
        display: block;
        padding-bottom: 3px;
        margin: 0 0 10px 0;
    }
    
    blockquote cite span {
        float: right;
        font-weight: normal;
        font-size: 12px;
        color: #666;
    }
    
    blockquote cite span.highlight {
        float: none;
        font-weight: bold;
        padding-bottom: 0;
    }
    
    .codeblock {
        background: #fff;
        border: 1px solid #ccc;
        padding: 10px;
    }
    
    .codeblock .title {
        border-bottom: 1px solid #ccc;
        font-weight: bold;
        padding-bottom: 3px;
        margin: 0 0 10px 0;
    }
    
    .codeblock code {
        overflow: auto;
        height: auto;
        max-height: 200px;
        display: block;
        font-family: Monaco, Consolas, Courier, monospace;
        font-size: 13px;
    }
    
    .smilie {
        vertical-align: middle;
    }
    
    .smilie_pointer {
        cursor: pointer;
    }
    
    .separator {
        margin: 5px;
        padding: 0;
        height: 0px;
        font-size: 1px;
        list-style-type: none;
    }
    
    .popup_menu .popup_item_container {
        margin: 1px;
        text-align: left;
    }
    
    .popup_menu .popup_item {
        display: block;
        padding: 4px;
        white-space: nowrap;
        text-decoration: none;
    }
    
    .popup_menu a.popup_item:hover {
        text-decoration: none;
    }
    
    .subject_new {
        font-weight: bold;
    }
    
    .highlight {
        background: #FFFFCC;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    
    .pm_alert {
        background: #FFF6BF;
        border: 1px solid #FFD324;
        text-align: center;
        padding: 5px 20px;
        margin-bottom: 15px;
        font-size: 11px;
    }
    
    .red_alert {
        background: #FBE3E4;
        border: 1px solid #A5161A;
        color: #A5161A;
        text-align: center;
        padding: 5px 20px;
        margin-bottom: 15px;
        font-size: 11px;
        word-wrap: break-word;
    }
    
    .red_alert a:link,
    .red_alert a:visited,
    .red_alert a:hover,
    .red_alert  a:active {
        color: #A5161A;
    }
    
    .high_warning {
        color: #CC0000;
    }
    
    .moderate_warning {
        color: #F3611B;
    }
    
    .low_warning {
        color: #AE5700;
    }
    
    .online {
        color: #15A018;
    }
    
    .offline {
        color: #C7C7C7;
    }
    Code (markup):
    div.error {
        padding: 5px 10px;
        border-top: 2px solid #FFD324;
        border-bottom: 2px solid #FFD324;
        background: #FFF6BF;
        font-size: 12px;
    }
    
    div.error p {
        margin: 0;
        color: #333;
        font-weight: normal;
    }
    
    div.error p em {
        font-style: normal;
        font-weight: bold;
        padding-left: 24px;
        display: block;
        color: #C00;
        background: url(images/error.png) no-repeat 0;
    }
    
    div.error ul {
        margin-left: 24px;
    }
    
    .pagination {
        font-size: 11px;
        padding-top: 10px;
        margin-bottom: 5px;
    }
    
    .tfoot .pagination,
    .tcat .pagination {
        padding-top: 0;
    }
    
    .pagination .pages {
        font-weight: bold;
    }
    
    .pagination .pagination_current,
    .pagination a {
        padding: 3px 6px;
        margin-bottom: 3px;
    }
    
    .pagination a {
        background: #f5f5f5;
        border: 1px solid #ccc;
    }
    
    .pagination .pagination_current {
        background: none;
        color: #333;
        border: none;
        font-weight: bold;
    }
    
    .pagination a:hover {
        background: #0072BC;
        color: #fff;
        border-color: #263c30;
        text-decoration: none;
    }
    
    .pagination .go_page img {
        margin-bottom: -4px;
    }
    
    .drop_go_page {
        background: #f5f5f5;
        padding: 4px;
    }
    
    .pagination_breadcrumb {
        background-color: #efefef;
        border: 1px solid #fff;
        outline: 1px solid #ccc;
        padding: 5px;
        margin-top: 5px;
        font-weight: normal;
    }
    
    .pagination_breadcrumb_link {
        vertical-align: middle;
        cursor: pointer;
    }
    
    .thread_legend,
    .thread_legend dd {
        margin: 0;
        padding: 0;
    }
    
    .thread_legend dd {
        padding-bottom: 4px;
        margin-right: 15px;
    }
    
    .thread_legend img {
        margin-right: 4px;
        vertical-align: bottom;
    }
    
    .forum_legend,
    .forum_legend dt,
    .forum_legend dd {
        margin: 0;
        padding: 0;
    }
    
    .forum_legend dd {
        float: left;
        margin-right: 10px;
        margin-top: 7px;
    }
    
    .forum_legend dt {
        margin-right: 10px;
        float: left;
    }
    
    .success_message {
        color: #00b200;
        font-weight: bold;
        font-size: 10px;
        margin-bottom: 10px;
    }
    
    .error_message {
        color: #C00;
        font-weight: bold;
        font-size: 10px;
        margin-bottom: 10px;
    }
    
    #posts_container {
        padding: 0;
    }
    
    .ignored_post {
        border-top: 3px solid #333;
        padding: 15px;
    }
    
    .ignored_post .show_ignored_post {
        margin-top: -15px;
    }
    
    .ignored_post .show_ignored_post a.button span {
        background-position: 0 -400px;
    }
    
    .post {
        overflow: hidden;
    }
    
    .post.classic {
        padding-top: 15px;
    }
    
    .post .post_author {
        border-bottom: 1px solid #ccc;
        border-top: 2px solid #ccc;
        background: #f5f5f5;
        padding: 5px;
        overflow: hidden;
    }
    
    .post.classic .post_author {
        border: 1px solid #ddd;
        float: left;
        width: 15%;
        margin: 0 1% 15px 0;
        border-left: 0;
        padding: 5px 1%;
    }
    
    .post .post_author .buddy_status {
        vertical-align: middle;
        margin-top: -4px;
    }
    
    .post .post_author div.author_avatar {
        float: left;
        margin-right: 3px;
    }
    
    .post.classic .post_author div.author_avatar {
        float: none;
        text-align: center;
        margin-bottom: 8px;
    }
    
    .post .post_author div.author_avatar img {
        padding: 5px;
        border: 1px solid #ddd;
        background: #fff;
    }
    
    .post .post_author div.author_information {
        float: left;
        padding: 6px 8px;
    }
    
    .post.classic .post_author div.author_information {
        float: none;
        padding: 0;
        text-align: center;
    }
    
    .post .post_author div.author_statistics {
        float: right;
        font-size: 11px;
        padding: 3px 10px 3px 5px;
        color: #666;
        line-height: 1.3;
    }
    
    .post.classic .post_author div.author_statistics {
        border-top: 1px dotted #ccc;
        margin: 6px 0 0 0;
        padding: 6px 6px 3px 6px;
        float: none;
    }
    
    .post .post_head {
        font-size: 11px;
        padding-bottom: 4px;
        border-bottom: 1px dotted #ddd;
        margin-bottom: 4px;
    }
    
    .post .post_head span.post_date {
        color: #666;
    }
    
    .post .post_head span.edited_post {
        font-size: 10px;
        color: #999;
    }
    
    .post .post_head span.edited_post a {
        color: #666;
    }
    
    .post_body {
        font-size: 14px;
        padding: 12px 0;
    }
    
    .post.classic .post_content {
        float: left;
        width: 79%;
        padding: 0 1% 5px 1%;
    }
    
    .post_content {
        padding: 9px 10px 5px 10px;
    }
    
    .post_content .signature {
        margin-top: 5px;
        border-top: 1px dotted #ddd;
        padding: 10px 0 4px 0;
    }
    
    .post .post_meta {
        margin: 4px 0;
        font-size: 11px;
        color: #999;
    }
    
    .post .post_meta a:link,
    .post .post_meta a:visited {
        color: #777;
    }
    
    .post .post_meta a:hover,
    .post .post_meta a:active {
        color: #777;
    }
    
    .post_controls {
        clear: both;
        background: #f5f5f5;
        border-bottom: 1px solid #ccc;
        padding: 5px;
        overflow: hidden;
    }
    
    .postbit_buttons > a:link,
    .postbit_buttons > a:hover,
    .postbit_buttons > a:visited,
    .postbit_buttons > a:active {
        display: inline-block;
        padding: 2px 5px;
        margin: 2px;
        font-size: 11px;
        background: #eee url(images/buttons_bg.png) repeat-x;
        border: 1px solid #ccc;
        color: #555;
    }
    
    .postbit_buttons > a:hover {
        border-color: #bbb;
    }
    
    .postbit_buttons a span {
        padding-left: 20px;
        display: inline-block;
        height: 16px;
        background-image: url(images/buttons_sprite.png);
        background-repeat: no-repeat;
    }
    
    .postbit_buttons a.postbit_find span {
        background-position: 0 0;
    }
    
    .postbit_buttons a.postbit_reputation_add span {
        background-position: 0 -20px;
    }
    
    .postbit_buttons a.postbit_email span {
        background-position: 0 -40px;
    }
    
    .postbit_buttons a.postbit_website span {
        background-position: 0 -60px;
    }
    
    .postbit_buttons a.postbit_pm span {
        background-position: 0 -80px;
    }
    
    .postbit_buttons a.postbit_quote span {
        background-position: 0 -100px;
    }
    
    .postbit_buttons a.postbit_multiquote span {
        background-position: 0 -120px;
    }
    
    .postbit_buttons a.postbit_multiquote_on span {
        background-position: 0 -140px;
    }
    
    .postbit_buttons a.postbit_edit span {
        background-position: 0 -160px;
    }
    
    .postbit_buttons a.postbit_qdelete span {
        background-position: 0 -180px;
    }
    
    .postbit_buttons a.postbit_qrestore span {
        background-position: 0 -200px;
    }
    
    .postbit_buttons a.postbit_report span {
        background-position: 0 -220px;
    }
    
    .postbit_buttons a.postbit_warn span {
        background-position: 0 -240px;
    }
    
    .postbit_buttons a.postbit_purgespammer span {
        background-position: 0 -540px;
    }
    
    .postbit_buttons a.postbit_reply_pm span {
        background-position: 0 -260px;
    }
    
    .postbit_buttons a.postbit_reply_all span {
        background-position: 0 -280px;
    }
    
    .postbit_buttons a.postbit_forward_pm span {
        background-position: 0 -300px;
    }
    
    .postbit_buttons a.postbit_delete_pm span {
        background-position: 0 -320px;
    }
    Code (markup):
    a.button:link,
    a.button:hover,
    a.button:visited,
    a.button:active {
        background: #0f0f0f url(images/tcat.png) repeat-x;
        color: #fff;
        display: inline-block;
        padding: 4px 8px;
        margin: 2px 2px 6px 2px;
        border: 1px solid #000;
        font-size: 14px;
    }
    
    a.button.small_button {
        font-size: 13px;
        margin: 0;
        padding: 3px 6px;
    }
    
    a.button span {
        padding-left: 20px;
        display: inline-block;
        background-image: url(images/buttons_sprite.png);
        background-repeat: no-repeat;
    }
    
    a.button.new_thread_button span {
        background-position: 0 -340px;
    }
    
    a.button.new_reply_button span {
        background-position: 0 -360px;
    }
    
    a.button.closed_button span {
        background-position: 0 -380px;
    }
    
    a.button.rate_user_button span {
        background-position: 0 -400px;
    }
    
    a.button.add_buddy_button span {
        background-position: 0 -440px;
    }
    
    a.button.remove_buddy_button span {
        background-position: 0 -480px;
    }
    
    a.button.add_ignore_button span {
        background-position: 0 -460px;
    }
    
    a.button.remove_ignore_button span {
        background-position: 0 -500px;
    }
    
    a.button.report_user_button span {
        background-position: 0 -520px;
    }
    
    .quick_jump {
        background: url(images/jump.png) no-repeat 0;
        width: 13px;
        height: 13px;
        padding-left: 13px; /* amount of padding needed for image to fully show */
        margin-top: -3px;
        border: none;
    }
    
    .pollbar {
        background: url(images/pollbar.png) top left repeat-x;
        border: 1px solid #3f3f3f;
        height: 10px;
    }
    
    .pollbar .percent {
        display: none;
    }
    
    .posticons_label {
        white-space: nowrap;
    }
    
    /** jGrowl Start **/
    
    /** Special IE6 Style Positioning **/
    .ie6 {
        position: absolute;
    }
    
    .ie6.top-right {
        right: auto;
        bottom: auto;
        left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
        top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
    
    .ie6.top-left {
        left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
        top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
    
    .ie6.bottom-right {
        left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
        top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
    
    .ie6.bottom-left {
        left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
        top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
    
    .ie6.center {
        left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
        top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
        width: 100%;
    }
    
    /** jGrowl Styling **/
    .jGrowl {
        z-index: 9999;
        color: #fff;
        font-size: 12px;
        position: fixed;
    }
    
    .jGrowl.top-left {
        left: 0px;
        top: 0px;
    }
    
    .jGrowl.top-right {
        right: 0px;
        top: 0px;
    }
    
    .jGrowl.bottom-left {
        left: 0px;
        bottom:    0px;
    }
    
    .jGrowl.bottom-right {
        right: 0px;
        bottom: 0px;
    }
    
    .jGrowl.center {
        top: 0px;
        width: 50%;
        left: 25%;
    }
    
    /** Cross Browser Styling **/
    
    .center .jGrowl-notification,
    .center .jGrowl-closer {
        margin-left: auto;
        margin-right: auto;
    }
    
    .jGrowl .jGrowl-notification,
    .jGrowl .jGrowl-closer {
        background-color: #000;
        opacity: .85;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
        zoom: 1;
        width: 235px;
        padding: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size: 1em;
        text-align: left;
        display: none;
        border-radius: 5px;
    }
    
    .jGrowl .jGrowl-notification {
        min-height: 40px;
    }
    
    .jGrowl .jGrowl-notification,
    .jGrowl .jGrowl-closer {
        margin: 10px;
    }
    
    .jGrowl .jGrowl-notification .jGrowl-header {
        font-weight: bold;
        font-size: .85em;
    }
    
    .jGrowl .jGrowl-notification .jGrowl-close {
        z-index: 99;
        float: right;
        font-weight: bold;
        font-size: 1em;
        cursor: pointer;
    }
    
    .jGrowl .jGrowl-closer {
        padding-top: 4px;
        padding-bottom: 4px;
        cursor: pointer;
        font-size: .9em;
        font-weight: bold;
        text-align: center;
    }
    
    /** Hide jGrowl when printing **/
    [USER=124521]@media[/USER] print {
        .jGrowl {
            display: none;
    }
    
    
    }
    
    /** jGrowl End **/
    
    /** Modal Start **/
    
    .modal {
        display: none;
        width: 400px;
        text-align: left;
        background: #fff;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        -ms-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 0 10px #000;
        -moz-box-shadow: 0 0 10px #000;
        -o-box-shadow: 0 0 10px #000;
        -ms-box-shadow: 0 0 10px #000;
        box-shadow: 0 0 10px #000;
    }
    
    .modal a.close-modal {
        position: absolute;
        top: -12.5px;
        right: -12.5px;
        display: block;
        width: 30px;
        height: 30px;
        text-indent: -9999px;
        background: url(images/close.png) no-repeat 0 0;
    }
    
    .modal-spinner {
        display: none;
        width: 64px;
        height: 64px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-right: -32px;
        margin-top: -32px;
        background: url(images/spinner_big.gif) no-repeat center center;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        -ms-border-radius: 8px;
        border-radius: 8px;
    }
    
    /** Modal End **/
    
    /** Impromptu Start **/
    
    
    .jqifade {
        position: absolute;
        background-color: #777777;
    }
    
    div.jqi {
        width: 400px;
        max-width:90%;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        position: absolute;
        background-color: #ffffff;
        font-size: 11px;
        text-align: left;
        border: solid 1px #eeeeee;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        padding: 7px;
    }
    
    div.jqi .jqiclose {
        position: absolute;
        top: 4px; right: -2px;
        width: 18px;
        cursor: default;
        color: #bbbbbb;
        font-weight: bold;
    }
    
    div.jqi .jqistate {
        background-color: #fff;
    }
    
    div.jqi .jqititle {
        padding: 5px 10px;
        font-size: 16px;
        line-height: 20px;
        border-bottom: solid 1px #eeeeee;
    }
    
    div.jqi .jqimessage {
        padding: 10px;
        line-height: 20px;
        color: #444444;
    }
    
    div.jqi .jqibuttons {
        text-align: right;
        margin: 0 -7px -7px -7px;
        border-top: solid 1px #e4e4e4;
        background-color: #f4f4f4;
        border-radius: 0 0 6px 6px;
        -moz-border-radius: 0 0 6px 6px;
        -webkit-border-radius: 0 0 6px 6px;
    }
    
    div.jqi .jqibuttons button {
        margin: 0;
        padding: 6px 20px;
        background-color: transparent;
        font-weight: normal;
        border: none;
        border-left: solid 1px #e4e4e4;
        color: #777;
        font-weight: bold;
        font-size: 12px;
    }
    
    div.jqi .jqibuttons button.jqidefaultbutton {
        color: #489afe;
    }
    
    div.jqi .jqibuttons button:hover,
    div.jqi .jqibuttons button:focus {
        color: #287ade;
        outline: none;
    }
    
    .jqiwarning .jqi .jqibuttons {
        background-color: #b95656;
    }
    
    /* sub states */
    
    div.jqi .jqiparentstate::after {
        background-color: #777;
        opacity: 0.6;
        filter: alpha(opacity=60);
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }
    
    div.jqi .jqisubstate {
        position: absolute;
        top: 0;
        left: 20%;
        width: 60%;
        padding: 7px;
        border: solid 1px #eeeeee;
        border-top: none;
        border-radius: 0 0 6px 6px;
        -moz-border-radius: 0 0 6px 6px;
        -webkit-border-radius: 0 0 6px 6px;
    }
    
    div.jqi .jqisubstate .jqibuttons button {
        padding: 10px 18px;
    }
    
    /* arrows for tooltips/tours */
    
    .jqi .jqiarrow {
        position: absolute;
        height: 0; width: 0;
        line-height: 0;
        font-size: 0;
        border: solid 10px transparent;
    }
    
    .jqi .jqiarrowtl {
        left: 10px;
        top: -20px;
        border-bottom-color: #ffffff;
    }
    
    .jqi .jqiarrowtc {
        left: 50%;
        top: -20px;
        border-bottom-color: #ffffff;
        margin-left: -10px;
    }
    
    .jqi .jqiarrowtr {
        right: 10px;
        top: -20px;
        border-bottom-color: #ffffff;
    }
    
    .jqi .jqiarrowbl {
        left: 10px;
        bottom: -20px;
        border-top-color: #ffffff;
    }
    
    .jqi .jqiarrowbc {
        left: 50%;
        bottom: -20px;
        border-top-color: #ffffff;
        margin-left: -10px;
    }
    
    .jqi .jqiarrowbr {
        right: 10px;
        bottom: -20px;
        border-top-color: #ffffff;
    }
    
    .jqi .jqiarrowlt {
        left: -20px;
        top: 10px;
        border-right-color: #ffffff;
    }
    
    .jqi .jqiarrowlm {
        left: -20px;
        top: 50%;
        border-right-color: #ffffff;
        margin-top: -10px;
    }
    
    .jqi .jqiarrowlb {
        left: -20px;
        bottom: 10px;
        border-right-color: #ffffff;
    }
    
    .jqi .jqiarrowrt {
        right: -20px;
        top: 10px;
        border-left-color: #ffffff;
    }
    
    .jqi .jqiarrowrm {
        right: -20px;
        top: 50%;
        border-left-color: #ffffff;
        margin-top: -10px;
    }
    
    .jqi .jqiarrowrb {
        right: -20px;
        bottom: 10px;
        border-left-color: #ffffff;
    }
    
    /** Impromptu End */
    Code (markup):
     
    Last edited by a moderator: Dec 22, 2015
    highlow, Oct 13, 2015 IP