Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Verfolgung starten Optionen

Change lightbox bg.

kesart / 16 Antworten / Baumansicht Nickles
Can some one help me out with a Lightbox CSS text. I use CSS scripts but don't have much knollege how they work.

I would like the lightbox background to be Grey-Transparent.
As you can see I have tried to change the text myself. All I have manged to do succesfully is to change the text from black to transparent this works OK for the image, but the image title and the X to close the Image are in the transparent part of the Box and not readable against the page background.

How can I change the text so that title and the X are in the white Image border?

/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: transparent; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=85);
opacity: 0.85;
display: none;
}

/* line 15, ../sass/lightbox.sass */
#lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
#lightbox img {
width: auto;
height: auto;
}
/* line 27, ../sass/lightbox.sass */
#lightbox a img {
border: none;
}

/* line 30, ../sass/lightbox.sass */
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}

/* line 39, ../sass/lightbox.sass */
.lb-container {
padding: 10px;
}

/* line 42, ../sass/lightbox.sass */
.lb-loader {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}

/* line 51, ../sass/lightbox.sass */
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

/* line 59, ../sass/lightbox.sass */
.lb-container > .nav {
left: 0;
}

/* line 62, ../sass/lightbox.sass */
.lb-nav a {
outline: none;
}

/* line 65, ../sass/lightbox.sass */
.lb-prev, .lb-next {
width: 49%;
height: 100%;
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
/* Trick IE into showing hover */
display: block;
}

/* line 72, ../sass/lightbox.sass */
.lb-prev {
left: 0;
float: left;
}

/* line 76, ../sass/lightbox.sass */
.lb-next {
right: 0;
float: right;
}

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
background: url(../images/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
background: url(../images/next.png) right 48% no-repeat;
}

/* line 88, ../sass/lightbox.sass */
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
I have uploaded the page so that you can see what i have done.

Here is the link to it:
http://www.kes-art-studio.com/german...hite_deu-2.htm

As you can see it is not very easy to read the text below the image.
bei Antwort benachrichtigen
violetta7388 kesart „Change lightbox bg.“
Optionen

Hallo kesart,

great page, no changes necessary. (Sorry, in my current opinion).

What's the problem? If you changed the background color from black to transparent, it will be also work fine with "light grey" or so on. Please, have a quick look at the manual of your light box program or at the help sides (F1).

Sometimes, it doesn't work well because of missing background color.

You'll welcome.

Best regards

violetta 

 

 

bei Antwort benachrichtigen
kesart violetta7388 „Hallo kesart, great page, no changes necessary. (Sorry, in my...“
Optionen

Hallo violetta, 

Thanks for the compliment.

I have seen a few litghtboxes were the background darker is but the images behind are still slightly visable, that is how I would like to have it. 

If you click on certain images it is dificult to read the Title ect at the bottom left. for example the 2 Bondage images.

Ken

bei Antwort benachrichtigen
violetta7388 kesart „Hallo violetta, Thanks for the compliment. I have seen a few...“
Optionen

Hallo Ken,

thanks for reply. I have seen the images already. May I ask for the name of your lightbox program. 

Regards

violetta 

bei Antwort benachrichtigen
kesart violetta7388 „Hallo Ken, thanks for reply. I have seen the images already....“
Optionen

Hi violette,

thanks for taking the time, I have tried to get help on the Lightbox2 Forum and others, but no one has answered.

The Program is Lightbox2,51

I am a fan from trial and error, but I always have a backup incase it goes wrong :)

As you can see in the original bg in the CSS is checkered (solid) I changed to transparent, and in the Lightbox script the border is lightgreen, I changed it to white and made it 1px.

Here is a link to the page:-

http://lokeshdhakar.com/projects/lightbox2/

thanks for taking the time

Ken 

bei Antwort benachrichtigen
violetta7388 kesart „Hi violette, thanks for taking the time, I have tried to get...“
Optionen

Hallo Ken,

I am not really so familiar with lightbox, but did you try it like this:

"20% transparent"

or if we are only talking of the borders: "border="0" into IMG-TAG.

Next time I'll meet friends and ask for a answer. Maybe, we have a resolution. Get in touch with you soon.

Regards

violetta 

bei Antwort benachrichtigen
violetta7388 Nachtrag zu: „Hallo Ken, I am not really so familiar with lightbox, but did...“
Optionen

Hallo Ken,

in addition take this interesting  link:  http://www.youtube.com/watch?NR=1&feature=endscreen&v=D6jUEYAu4fI

It's a hole  HTML und Lightbox 2 Tutorial. Look at parts 4 and 5.

 

Regards

violetta 

bei Antwort benachrichtigen
kesart violetta7388 „Hallo Ken, take this interesting link:...“
Optionen

Hi  violetta,

Thanks for the link, but I have the same sort of code, see this one image number 3:

<a rel="lightbox[Black and White]" title="Nude Study, &amp;Oumll auf Leinwand, 80 x 100 cm." href="images/images-b-w/image-03.jpg">
      <img src="images/images-b-w/thumb-03.jpg" alt="Black and White: image 3 0f 4 thumb" style="float: right; border: 1px solid #808080"></a></td>

I can only think that It must have something to do with the css script that has placed the title text and Image number 3 of 16 outside of the white border.

best regards

Ken

bei Antwort benachrichtigen
violetta7388 kesart „Hi violetta, Thanks for the link, but I have the same sort of...“
Optionen

Hallo Ken,

well, at tutorial link (part 5) the moderator mentioned text and color of the title frame depends on javascript/CSS because of no part of lightbox! So, we are digging on the wrong site.

Please, have a quick look at this link: 

http://de.wikipedia.org/wiki/Cascading_Style_Sheets

In the middle you'll find an example with CSS-Box-Modell.

Best Regards 

violetta 

 

bei Antwort benachrichtigen
Borlander kesart „Change lightbox bg.“
Optionen
the image title and the X to close the Image are in the transparent part of the Box and not readable against the page background. How can I change the text so that title and the X are in the white Image border?

Just set the background-color of the class .lb-dataContainer ...

Hint: Using Firefox the Inspect Element function in context-menu is very helpful in identifiying a visible DOM-Element including its id/class. Chrome has a similar function.

bei Antwort benachrichtigen
kesart Borlander „Just set the background-color of the class .lb-dataContainer...“
Optionen
Just set the background-color of the class .lb-dataContainer ...

 Hallo Borlander,

where can I find the .Ib-dataContaner and how do I set the colour.

As I wrote before I use the css scripts but don't understand them, they are completly new to me.

regards

ken

bei Antwort benachrichtigen
kesart Nachtrag zu: „Hallo Borlander, where can I find the .Ib-dataContaner and...“
Optionen

Hi Borlander,

I have found this part in the Lightbox css. is this the part that I should change?

Do just have to place -background-color: white; in the code?

.lb-dataContainer {

  margin: 0 auto;

  padding-top: 5px;

  *zoom: 1;

  width: 100%;

  -moz-border-radius-bottomleft: 4px;

  -webkit-border-bottom-left-radius: 4px;

  -ms-border-bottom-left-radius: 4px;

  -o-border-bottom-left-radius: 4px;

  border-bottom-left-radius: 4px;

  -moz-border-radius-bottomright: 4px;

  -webkit-border-bottom-right-radius: 4px;

  -ms-border-bottom-right-radius: 4px;

  -o-border-bottom-right-radius: 4px;

  border-bottom-right-radius: 4px;

}

 

bei Antwort benachrichtigen
Borlander kesart „Hi Borlander, I have found this part in the Lightbox css. is...“
Optionen
I have found this part in the Lightbox css. is this the part that I should change?

Yes :-)

Do just have to place -background-color: white; in the code?

Without the leading "-". This is only used for browser-specific CSS-properties not part of the official CSS-specification. So insert background-color: white; in the block (between curly braces). Afterwards you might also want to change the text-color (e.g. color:black;), as light gray text is hardly readable on white background...

Borlander

bei Antwort benachrichtigen
kesart Borlander „Yes :-) Without the leading "-". This is only used for...“
Optionen

Thanks it worked, you are right the grey is to light, I tried to place text-color: black; in the same block but it didn't work. I can't find anything to do with the text accept the font info:-

 /* line 15, ../sass/lightbox.sass */
#lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-weight: normal;
}

do I have to place it there?

bei Antwort benachrichtigen
Borlander kesart „Thanks it worked, you are right the grey is to light, I tried...“
Optionen
I tried to place text-color: black; in the same block but it didn't work.

The CSS property for the font-color is named color only. So insert color:black; in the block. This should work, as long as the font-color is not overwritten for child-elements (remember the hint in my first answer, if this is the case)...

bei Antwort benachrichtigen
kesart Borlander „The CSS property for the font-color is named color only. So...“
Optionen

Hi Borlander, I havent managed to change the text color in the container,

all that i found with firefox was span.Ib-caption and span.Ib-number they were both in the lightbox.js.

I have changed the container backgrond to black so that the texts are better to see. I tried the box as transparent but the text was also transparent and only worked in Firefox. So I will leave it Black, and try to chnge the text color to white.

here is the page as it looks now:

http://www.kes-art-studio.com/german/thumbnails_black_white_deu.htm

bei Antwort benachrichtigen
kesart Nachtrag zu: „Hi Borlander, I havent managed to change the text color in...“
Optionen

Lachend I have managed to change  the text color to white, I checked every color until I found the right one!

 

bei Antwort benachrichtigen