Custom CSS not working properly

riccardo · 2015-03-17 02:59:23

I made some changes to my custom CSS file. Initially I saw the changes were implemented, then the next day I saw they were not.

The Custom CSS file is being properly called, as there "image-info" is (partially) working. So I am not sure why these new changes are not being put into place, although they were initially.

Here is the full contents of the custom CSS file:

p.image-info {
font-family: your-font, fallback-font, arial;
font-size: 20px;
color: #9bbdd9;
text-align: center;
}

.gridcell:hover {
background-color: #DCC696;
}

.highslide-heading p,
.highslide-caption p {
font-size: 20px;
}

It is the gridcell and the highslide caption that are not being implemented, but were initially. The "image info" seems to be working OK, but the text is not centering (stays left).

It is not a cache issue, as I tested on other computers.

In CE3 there is a command for choosing a hover color in the gridcell, but not in CE4. Currently it is changing color on the griditem, but I want it to change on the gridcell. Also want to increase the font size.

Here is a link to a test page: http://wheelerimaging.com/ce4test505/

So, how do I get this to work properly? I suspect it is a cascading issue, but if so, how does one solve it?

Thanks....

rod barbee · 2015-03-17 03:37:26

your-font and fallback-font are not fonts. Try replacing those with actual font names

In the grid, the text color is the same as the background color, so you're not seeing the text until you hover over the image.

in the Highslide setup, do you have both Headline and Caption checked?

riccardo · 2015-03-17 04:05:45

OK, I'll make the change on the fonts; but the arial font and the color do show up - as written in the custom css.

As for the grid - yes I only want to see the text upon the hover. But it only hovers on the griditem, which does not include the text. Using inspect elements (per your very useful post on your Tips and Tricks blog) it appears to be the gridcell that needs to be highlighted on the hover. Thus the custom css I have put in. But it does not seem to give me that result.

Yes, both Headline and Caption are checked on the Highslide Set-up.

rod barbee · 2015-03-17 04:49:01

I'm seeing the hover color over the entire item:

not sure what's going on with the Highslide Headline and Caption. They work fine in my galleries.

You could try updating Gallery to the most recent version (6.1.5). I don't know that it will help this issue but it couldn't hurt.

Also, I think that the .image-info class is for Single Image Pages (if you were using the HTML Single Image presentation)

If you want to affect the fonts in the grid thumbnails, try this instead:

.ce4-standard ul.image-metadata li

riccardo · 2015-03-17 09:49:33

Thanks, Rod.

Perhaps it's a browser issue. Beats me. It did appear correctly for a while, then did not. Not sure why that would be.

Yes, the image-info style was intended for the Single HTML page only.

Community @ The Turning Gate

#1 2015-03-17 02:59:23

Custom CSS not working properly

#2 2015-03-17 03:37:26

Re: Custom CSS not working properly

#3 2015-03-17 04:05:45

Re: Custom CSS not working properly

#4 2015-03-17 04:49:01

Re: Custom CSS not working properly

#5 2015-03-17 09:49:33

Re: Custom CSS not working properly

Board footer