I need code to add a shadow to ...

brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
edited November 15, 2013 in SmugMug Customization
I need code to add a shadow to my left sidebar...
I know how to do a shadow, but I cannot figure out how to target the sidebar...:dunno

I can make the adjustment in firebug, but the yui div is one of those numbered ones that changes every page load.

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited November 14, 2013
    Try this: 
    .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {}
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited November 14, 2013
    Hikin' Mike wrote: »
    Try this: 
    .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {}

    No idea how you figured it out, but THANKS!!! Worked perfectly.bowdown.gif
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited November 14, 2013
    I put this code in my site CSS and nothing happened. Did I need other code or can someone suggest a fix? I assigned a color to the left sidebar (which exists on the home page only). Thanks.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited November 14, 2013
    brandofamily wrote: »
    No idea how you figured it out, but THANKS!!! Worked perfectly.bowdown.gif

    I just used the Firebug tool from Firefox. ne_nau.gif
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited November 14, 2013
    ChancyRat wrote: »
    I put this code in my site CSS and nothing happened. Did I need other code or can someone suggest a fix? I assigned a color to the left sidebar (which exists on the home page only). Thanks.

    I assume you added the actual 'box-shadow' code. I didn't add that. If you did, I know you didn't unveil your site yet, so I can't help you.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited November 14, 2013
    Hikin' Mike wrote: »
    I assume you added the actual 'box-shadow' code. I didn't add that. If you did, I know you didn't unveil your site yet, so I can't help you.

    Hikin, this is the code I put in:
    .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {}

    What do you mean you didn't add it?
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited November 14, 2013
    ChancyRat wrote: »
    Hikin, this is the code I put in:
    .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {}
    What do you mean you didn't add it?

    Because Anthony knew the code for the drop-shadow, I only gave him the code to target the sidebar, not the actual 'box-shadow' code.

    Try this: 
    .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {box-shadow: 5px 5px 5px #1e1e1e;}
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited November 14, 2013
    Hikin' Mike wrote: »
    I just used the Firebug tool from Firefox. ne_nau.gif

    I tried the firebug tool, but I guess I need to know the correct punctuation.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited November 14, 2013
    Hikin' Mike wrote: »
    Because Anthony knew the code for the drop-shadow, I only gave him the code to target the sidebar, not the actual 'box-shadow' code.

    Try this: 
    .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {box-shadow: 5px 5px 5px #1e1e1e;}

    Ohhh, so nice. Can I ask how to put drop-shadows on all four sides of the block?
    It apparently only looks as nice as brando's does, if the entire site layout is not centered. Center "off" makes the left sidebar stick like glue to the left boundary of the browser.

    Center "on", which I have, causes a section of the background left of the left sidebar, to show. Kind of ugly.
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited November 14, 2013
    ChancyRat wrote: »
    Ohhh, so nice. Can I ask how to put drop-shadows on all four sides of the block?
    It apparently only looks as nice as brando's does, if the entire site layout is not centered. Center "off" makes the left sidebar stick like glue to the left boundary of the browser.

    Center "on", which I have, causes a section of the background left of the left sidebar, to show. Kind of ugly.

    But it's a shadow... where's the light source causing the shadow... to the left of course...:D
    Go live damn it so I can see this stuff you're doing!
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited November 14, 2013
    ChancyRat wrote: »
    Ohhh, so nice. Can I ask how to put drop-shadows on all four sides of the block?
    It apparently only looks as nice as brando's does, if the entire site layout is not centered. Center "off" makes the left sidebar stick like glue to the left boundary of the browser.

    Center "on", which I have, causes a section of the background left of the left sidebar, to show. Kind of ugly.

    http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
    box-shadow: 0px 0px 5px #1e1e1e;
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited November 15, 2013
    Hikin' Mike wrote: »
    http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
    box-shadow: 0px 0px 5px #1e1e1e;

    Thank you! And I played on the W3Schools site also, and modified the code.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited November 15, 2013
    brandofamily wrote: »
    But it's a shadow... where's the light source causing the shadow... to the left of course...:D
    Go live damn it so I can see this stuff you're doing!

    Aww, thanks but you know me, I'm on the outer fringe of Smugmug's real customer base. I'm in lah-lah land, not a photographer, no graphic sense, no design sense, can barely code. If SmugMug had an award for most weird subscriber, I might win because of my critter content. :D

    Anyway I can't unveil until I fix several critical pages with HTML, and they are taking most of my time. This formatting play stuff I'm doing is only 5% of my effort at the moment.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited November 15, 2013
    ChancyRat wrote: »
    Thank you! And I played on the W3Schools site also, and modified the code.

    Slight problem. Now there is a vertical grey bar on all folder and gallery pages. I think this must be this code, and it's a bar only because there's no leftbar to wrap around? I had added the code to the theme main CSS code. Was I supposed to do differently? Example image.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited November 15, 2013
    Sorry I'm so slow sometimes. I tested this and it worked. The code belonged on the homepage-only CSS block. Other pages now all clear.
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited November 15, 2013
    ChancyRat wrote: »
    Sorry I'm so slow sometimes. I tested this and it worked. The code belonged on the homepage-only CSS block. Other pages now all clear.

    Ya. Seeing as I only have the bar on my homepage I'm sure the code was not made specific to the homepage... I'm sure it could be, but you solved the issue...
Sign In or Register to comment.