Custom CSS File

Rainer Goergen · 2016-05-18 09:32:19

Rainer Goergen wrote:

But sorry, one other question. I am working with custom.css. If I set under .the__gallery figure the with: 250px, the thumbs in the galleries are no longer centered. What can I do?
Rainer

I think I have found the error.

This value will not overwrite the setting in - Album Settings - Thumbnail Presentation - Width.

In my custom.css I have a value of 250 px.
I have tested and set in Album Settings a value of 270 px.

Now the thumb images are offset. In the index.php you will find in the css-section .the__gallery figure also the value of 270 px.
Please have a look at my custom.css file and you will see the difference.
If I take in Album Settings the same value like in custom.css, all the thumbs are ok.

Rainer

rod barbee · 2016-05-18 09:38:20

Like I said in the other thread, it looks like the thumbnails are centered using the left positioning. But it looks like this is being calculated based on cell width and thumbnail width and being applied inline.
So there's no custom CSS (as far as I can tell) that will change this.
Have you tried simply using a wider cell width in the Designer?

Rainer Goergen · 2016-05-18 09:43:32

No it works correctly. I let the setting now so, so Ben or Matt can check it.

Compare my custom.css with the css-section in the index.php (with inspector) a gallery.
You will find the different values, because the custom.css will n o t overwrite the settings in Album Settings in Backlight.

Rainer

Edit:

Login in my Backlight Admin and change the value to 250 px and you will see, that all is ok.

Last edited by Rainer Goergen (2016-05-18 09:47:00)

rod barbee · 2016-05-18 10:36:08

You will find the different values, because the custom.css will n o t overwrite the settings in Album Settings in Backlight.

I believe this is because those positioning values are calculated and inserted inline. Inline styling has the highest priority
https://developer.mozilla.org/en-US/doc … pecificity

But you can try overriding that by using !important
https://www.smashingmagazine.com/2010/1 … to-use-it/

Rainer Goergen · 2016-05-18 17:06:33

Ok, it seems that this is for the programmers no error. So I correct it by myself. Thanks Rob.

Rainer

Rainer Goergen · 2016-05-18 19:31:23

Works.

Rainer

Rainer Goergen · 2016-05-20 22:15:10

Hi, I worked hard with custom.css. Can someone help me with the correct css code for the hover color of the Albums, Album Sets description background like this:

a:hover {
color: #CCCCCC !important;
text-decoration: none !important;
background-color: inherit;
}

Like at my homepage: http://www.rainer-goergen.de/galleryindex.php

Thanks, Rainer

rod barbee · 2016-05-20 22:36:10

try

.albums a:hover {
	background-color: red;
}

Rainer Goergen · 2016-05-21 00:53:44

Ohh how simple. Sometimes it seems that it is impossible to see the forest for the trees.

I hope my translator is right and you understand this.

Thanks Rod,

Rainer

Edit:

But this works not correct. If I click on an album the background turns to red.

But I have meant a mouseover hover like on my homepage.

Rainer

Last edited by Rainer Goergen (2016-05-21 01:03:41)

rod barbee · 2016-05-21 01:04:01

Forest for the trees!
Using the inspector is sometimes like finding the forest and then a specific tree in that forest. Or making a good guess at it

Rainer Goergen · 2016-05-21 01:14:19

It works - why? I don't know.

Rainer

rod barbee · 2016-05-21 02:44:05

because it's the correct selector. Specificity is key when writing custom css

Rainer Goergen · 2016-05-23 16:15:30

Hi, didn't find the specific tree in the forest for the gallery thumbnail.
I want to style the same frame around like in Albums and Album Sets.

The css code of my old homepage is:

.gallerythumb {
background-color: #191919 !important;
border-style: solid !important;
border-width: 1px !important;
padding: 5px !important;
margin: 0 auto !important;
border-color: #FFFFFF !important;
color: inherit;
}

Rainer

Last edited by Rainer Goergen (2016-05-23 21:32:23)

rod barbee · 2016-05-23 22:39:08

to add a border around the thumbnail, see this: http://community.theturninggate.net/vie … hp?id=6487

But if you add padding, you'll have the same positioning problems as above.

Rainer Goergen · 2016-05-23 23:20:34

No, it is only a screen capture. I want the same border like the small one. The large one is a gallery thumb of my homepage with the css code of it.

But I cannot find the right name of the thumbnails in the galleries, so I cannot write the right css code.

The code of your link doesn't work on gallery thumbnails.

This is my homepage: www.rainer-goergen.de

And this is my test site: tripstrilles.myqnapcloud.com.

Rainer

Last edited by Rainer Goergen (2016-05-23 23:25:26)

rod barbee · 2016-05-23 23:42:58

the code adds a border around the the thumbnails. Here I've got a 1px black border around the thumbnail images
http://backlight-rb-test.barbeephoto.co … -wineries/

But as I mentioned, adding the padding (so that you get that "framed" border look) will cause positioning problems with the thumbnails. Add any padding and the thumbnail image gets pushed to the right. This is because left positioning is being used inline to center the thumbnail images in the frame. The positioning number looks like it's probably calculated based on the width of the thumbnail, and the width changes because of image orientation (horizontal or vertical). So there's no css rule that can be applied to compensate for both vertical and horizontal images.

So what I'm saying is that I don't see any way to get the same border as you had in your old galleries.

Community @ The Turning Gate

#1 2016-05-18 09:32:19

Custom CSS File

#2 2016-05-18 09:38:20

Re: Custom CSS File

#3 2016-05-18 09:43:32

Re: Custom CSS File

#4 2016-05-18 10:36:08

Re: Custom CSS File

#5 2016-05-18 17:06:33

Re: Custom CSS File

#6 2016-05-18 19:31:23

Re: Custom CSS File

#7 2016-05-20 22:15:10

Re: Custom CSS File

#8 2016-05-20 22:36:10

Re: Custom CSS File

#9 2016-05-21 00:53:44

Re: Custom CSS File

#10 2016-05-21 01:04:01

Re: Custom CSS File

#11 2016-05-21 01:14:19

Re: Custom CSS File

#12 2016-05-21 02:44:05

Re: Custom CSS File

#13 2016-05-23 16:15:30

Re: Custom CSS File

#14 2016-05-23 22:39:08

Re: Custom CSS File

#15 2016-05-23 23:20:34

Re: Custom CSS File

#16 2016-05-23 23:42:58

Re: Custom CSS File

Board footer