• 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

  • Thread starter Thread starter bogus
  • Start date Start date
B

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.webp

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.webp

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
 
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
#AccountMenu { width: 276px; }
Thanks to trombones13 and Brogan ;)
 
Nice thanks to this I was able to do some custom styling work myself with the sidebar.. .good stuff.
 
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.
 
Top Bottom