1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Sidebar Enhancement

Discussion in 'Template Modifications [Archive]' started by Shelley, Jan 17, 2012.

  1. Shelley

    Shelley Well-Known Member

    Klaudius, Rost35, R_A and 1 other person like this.
  2. Shelley

    Shelley Well-Known Member

    Same as above except this is a darker blocks. Follow instructions with regard to pasting the code in the extra .css template (code below) and upload sidebar-attachment.png into the /gradients folder

    sidebarblack.png sidebarblack-hover.png

    Code:
    .sidebar .secondaryContent {
        background: url("@imagePath/xenforo/gradients/sidebar-gradient.png") repeat-x scroll center bottom #535353;
        border: 1px solid #161616;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 1px 0 rgba(209, 209, 209, 0.4) inset, 0 0 0 1px rgba(209, 209, 209, 0.2) inset, 0 1px 0 rgba(209, 209, 209, 0.5);
        padding: 10px;
    }
    .sidebar h3, .sidebar h3 a  {
        color: #dcdcdc !important;
        font: bold 12px/14px Arial,sans-serif;
        text-shadow: 0 0 0 transparent, 0 -1px 0 #2d2d2d ;
        border-bottom: 1px solid #2d2d2d !important;
        box-shadow: 0 1px 0 0 #7d7d7d;
    }
    
    .sidebar h3 a:hover {
        text-decoration: none !important;
        opacity: 0.5;
    }
    
    .sidebar .pairsJustified dt, .sidebar .section .secondaryContent .footnote, .sidebar .section .secondaryContent .minorHeading, .sidebar .avatarList  .userTitle{
        color: #c7c7c7 ;
        font:  11px/11px !important;
        text-shadow: 0 -1px 0 #2d2d2d ;
    }
    
    .sidebar .username, .sidebar .pairsJustified dd {
        color: #ffeca0 !important;
    }
    
    .sidebar .avatar img, sidebar .avatar .img.s {
        border: 1px solid #161616;
    }
     

    Attached Files:

    Syndol likes this.
  3. Vincent

    Vincent Well-Known Member

    Can this be done only to the "Your details" block? :)
     
  4. Shelley

    Shelley Well-Known Member

    Not sure what you mean. Are you referring to the .visitorsPanel? If so below will work if you only want to affect the visitor sideblock though you'll have to make the necessary changes if this wasn't the colour your after.

    visitorPanel.png

    Code:
    /*VISITORPANEL ONLY BLOCK ENHANCEMENTS*/
     
    .visitorPanel .secondaryContent{
        background: url("@imagePath/xenforo/gradients/sidebar-gradient.png") repeat-x scroll center bottom #535353;
        border: 1px solid #161616;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 1px 0 rgba(209, 209, 209, 0.4) inset, 0 0 0 1px rgba(209, 209, 209, 0.2) inset, 0 0px 0 rgba(209, 209, 209, 0.5);
        padding: 10px;
    }
     
    .visitorPanel .pairsJustified dt{
        color: #c7c7c7 ;
        font:  11px/11px !important;
        text-shadow: 0 -1px 0 #2d2d2d ;
    }
     
    .visitorPanel .username, .visitorPanel .pairsJustified dd {
        color: #ffeca0 !important;
    }
     
    .visitorPanel .avatar img {
        border: 1px solid #161616;
    }
     
    /*VISITORPANEL ONLY BLOCK ENHANCEMENTS*/
    
     

Share This Page