4

When I click the image, shadowbox initialises and the image appears in the middle of the screen with the title. The problem is that the title is blending too much with the background…

I would like to add border with black background behind the title of the image

so that it sticks out more. What would I need to add to shadowbox.css?

image

JSFiddle

My current shadowbox.css:

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png);}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}`
Sol
  • 195
  • 1
  • 4
  • 14
  • although without image it doesen't open ,don't know how to do that on jsfiddle. – Sol Oct 02 '13 at 22:40
  • You will need to target the following css class .sb-wrapper.. Try adding this border: 2px solid lightblue; padding: 5px 5px 5px 5px; – Chou One Oct 03 '13 at 03:10
  • tried it but it's not covering the text caption title of the image, I need the back of the title to be covered in black so that it doesn't blend too much with the background :( – Sol Oct 03 '13 at 16:46
  • PlaceCage to the rescue: http://jsfiddle.net/P9REJ/7/ – Jason Sperske Oct 03 '13 at 18:42

1 Answers1

2

You could add a style rule to the <div id="sb-wrapper"> that the shadowbox.js adds, like this: (demo)

#sb-wrapper {
    border: thin solid black;
    background-color: black;
}

Also adding a width and height to your shadowbox rel attributes can help.

Jason Sperske
  • 29,816
  • 8
  • 73
  • 124
  • Great Job!!!! :D thank you so much!!!! the moment I get 15 reputations I'm marking this answer!!!! It's Perfect!!! Thanks again :) – Sol Oct 04 '13 at 22:45