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 with rounded Corners/Border and Shadow

Discussion in 'Template Modifications [Archive]' started by bogus, Feb 2, 2011.

  1. bogus

    bogus Guest

    Because of the very flat look of the Sidebar i was playing a bit with look of it. Its not a big thing but maybe anyone can use it:)
    This is for the default Sidebar and will also change the setting for jaxel´s Portal Sidebar.

    At the end it will look like in the picture
    new_look.jpg

    First of all open the EXTRA.css Template (Appearance - Templates - Default Style - EXTRA.css) and add the following to it

    Code:
    /* Sidebar Shadow & Visitor Panel without Overflow */
    .sidebar .section .secondaryContent {
       box-shadow:-4px 3px 2px #B3B3B3; // to get a left sided shadow use 4px instead of -4px, to get a darker shadow change #B3B3B3 to your needs
    }
    .sidebar .visitorPanel {
       padding-bottom: 30px; //play with this setting till it fits your needs
       width: 250px
    }
    Then Save and Exit - nothing else to do here anymore

    Now open sidebar.css Template and delete this
    Code:
    .sidebar .visitorPanel
    {
        overflow: hidden; zoom: 1;
    }
    This is needed because the overflow cuts off the shadow and border (credits are going to Jake Bunce). Therefore we´ve added the .sidebar .visitorPanel to the Extra.css
    Save and Exit.

    Open now Appearance - Styles - Default Style - Style Property Groups - Building Blocks - Secondary Content

    and change the settings as shown
    (i have deleted the bottom Border and added the Settings to all. For the Border Color i have choosen @primaryLighterStill)
    Unbenannt.jpg

    Same here, play with the Numbers till they fit.
    If you are done, click on Update Style Properties. No open or refresh your Page.
    You can watch it live here
     
    zaiger, clawsonr, Vodkaholic and 4 others like this.
  2. bogus

    bogus Guest

    Edit: I just got the hint in another Thread
    Because of the changes of the .sidebar .visitorPanel and adding a border, the Profile Pulldown gets messed up. Please add this to the EXTRA.css too
    Thanks to trombones13 and Brogan ;)
     
    clawsonr and Trombones13 like this.
  3. a legacy reborn

    a legacy reborn Well-Known Member

    I have been wondering how to do this thanks ;)
     
  4. EQnoble

    EQnoble Well-Known Member

    Nice thanks to this I was able to do some custom styling work myself with the sidebar.. .good stuff.
     
  5. zaiger

    zaiger Active Member

    I'm having trouble with the shading. I copied just like you said and I change the -4 to a positive number and I am still not getting a shadow. Anyone else have this issue or a fix for it?

    Never mind I got it, just had to add #AccountMenu { width: 276px; } to the top of the extra.css bit. Sorry about that.
     
  6. bogus

    bogus Guest

Share This Page