Photo Content Block - Image Borders?

Comments

• Options

  Hikin' Mike Registered Users Posts: 5,462 Major grins

  March 11, 2015 edited March 11, 2015

  deelybug wrote: »

  Does anyone know how to add a border around images in a Photo Content Block? I have added a vertical one to a page, but don't see a CSS option in the options for the block.
  
  I can add a border via CSS for the entire page, but that also adds a border around my logo which I do not want.
  
  http://www.jacquelinedeely.com/customize/Pages/News
  
  Any help/suggestions appreciated:D

  
  I clicked on your link, but it took me to Smugmug.
  
  

  - 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

  0
• Options

  deelybug Registered Users Posts: 34 Big grins

  March 11, 2015 edited March 11, 2015

  Hello Mike,
  
  Can you try again? http://www.jacquelinedeely.com/Pages/News
  
  Thanks, Jackie

  Jacqueline

  0
• Options

  Allen Registered Users Posts: 10,013 Major grins

  March 11, 2015 edited March 11, 2015

  deelybug wrote: »

  Hello Mike,
  
  Can you try again? http://www.jacquelinedeely.com/Pages/News
  
  Thanks, Jackie

  This will add them for that page only.
  
  .sm-page-widget-10129967 .sm-tile-photo img {border: 2px solid red;}
  
  Option:
  .sm-page-widget-10129967 .sm-tile-photo img {
  border: 4px double #ccc;
  }

  Al - Just a volunteer here having fun
  My Website index | My Blog

  0
• Options

  Allen Registered Users Posts: 10,013 Major grins

  March 11, 2015 edited March 11, 2015

  You can also add a little padding
  
  .sm-page-widget-10129967 .sm-tile-photo img {
  border: 4px double #ccc;
  padding: 6px;
  }

  Al - Just a volunteer here having fun
  My Website index | My Blog

  0
• Options

  Hikin' Mike Registered Users Posts: 5,462 Major grins

  March 11, 2015 edited March 11, 2015

  Works now. Add this to your theme's CSS or a HTML/CSS block on that page:
  

  .sm-page-widget-10129967 .sm-tiles-fill.sm-tiles-uncropped .sm-image {
      border: 2px solid #f00;
      width:98%;
      }
  

  
  If you increase the border size, you may have to reduce the width size to make it work without cropping.

  - 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

  0
• Options

  deelybug Registered Users Posts: 34 Big grins

  March 11, 2015 edited March 11, 2015

  AWESOME, THANK YOU!!!!:ivar

  Jacqueline

  0
• Options

  deelybug Registered Users Posts: 34 Big grins

  March 11, 2015 edited March 11, 2015

  Me again! I tried to use this for a photo block on another page and it did not work. Would the widget number in the code differ? Also, how would I disable going to original image via clicking?
  
  http://www.jacquelinedeely.com/Pages/About
  
  Thanks again, Jackie

  Jacqueline

  0
• Options

  Allen Registered Users Posts: 10,013 Major grins

  March 11, 2015 edited March 11, 2015

  The widget No. is for About page.
  .sm-page-widget-10141174
  
  There should be "action on click" for the box, set it to none.

  Al - Just a volunteer here having fun
  My Website index | My Blog

  0
• Options

  deelybug Registered Users Posts: 34 Big grins

  March 11, 2015 edited March 11, 2015

  Found it! You have been MOST HELPFUL.
  
  Thank you!!!!

  Jacqueline

  0