1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to add shadow at sidebar secondaryContent only

Discussion in 'Styling and Customization Questions' started by bogus, Jan 31, 2011.

  1. bogus

    bogus Guest

    Hi. I wanted to add a shadow to the right and bottom side of the Sidebar sections only.
    But if i add a box shadow into Style Properties: Building Blocks - secondaryContent i also have this shadow around the div class nodeLastPost secondaryContent
    I was trying now to add an own shadow class into the sidebar.css but without any success
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I was able to create this effect:

    Screen shot 2011-01-31 at 5.03.13 AM.png

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this CSS:

    Code:
    .statsList
    {
    	box-shadow: 3px 3px 3px #555555;
    }
    
    .avatarList
    {
    	box-shadow: 3px 3px 3px #555555;
    }
    
    .userList
    {
    	box-shadow: 3px 3px 3px #555555;
    }
    
     
  3. bogus

    bogus Guest

    Ok thanks ;) Well i would like to find a way to get a shadow with just one class added.

    Oh man... sometimes you dont see the wood for the trees.

    Problem here ist that
    Unbenannt.jpg

    Looks like as if the Section is to long?
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I like your method better.

    Note that you only need to specify box-shadow. xenForo automatically fills in the other shadow properties in the page output. For example, this code in the templates:

    Code:
    .sidebar .section .secondaryContent
    {
    	box-shadow: 2px 2px 2px #525152;
    }
    
    Becomes this in the page output:

    Code:
    .sidebar .section .secondaryContent
    {
    	box-shadow: 2px 2px 2px #525152; -webkit-box-shadow:2px 2px 2px #525152; -moz-box-shadow:2px 2px 2px #525152; -khtml-box-shadow:2px 2px 2px #525152;
    }
    
    I am looking at the top box problem right now.
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It's something to do with this overflow in sidebar.css:

    Code:
    .sidebar .visitorPanel
    {
    	overflow: hidden; zoom: 1;
    }
    
    Removing the overflow fixes the problem but changes the organization a bit:

    Screen shot 2011-01-31 at 6.33.47 AM.png
     
  6. bogus

    bogus Guest

    I got it. But i am not sure if i done all correctly because i dont know if the overflow is really needed?!
    I just deleted the whole .sidebar .visitorPanel css class from the sidebar.css template and added the following to extra.css
    Code:
    .sidebar .visitorPanel {
       padding-bottom: 10px;
       width: 250px
    }
     
  7. EQnoble

    EQnoble Well-Known Member

    Revert everything back to original and paste this in extra.css

    The first is the rule for which boxes get the shadow, and the second is adjusting the visitorPanel size so it all looks the same...any changes to the first rule will now apply to all sidebar blocks including visitorPanel in case you want to adjust the shadow color or something.

    HTML:
    .sidebar > div > .secondaryContent {
        box-shadow: 2px 2px 2px #525152;
    }
     
    .sidebar .visitorPanel {
        margin-right: -5px;
        overflow: hidden;
        padding-right: 5px;
    }
    sidebar-shadow-B-R-.png
     
    viper357 likes this.

Share This Page