Stuck with CSS for Gallery Page

James Lyall · October 8, 2013

I have a page showing all my galleries as a collage.
FIRST PROBLEM:
I wanted to change the font size and colour of the title above the gallery collection.
After much experimentation, I found that the following code, in a CSS block for 'Just this page' did the trick.

/* Change font size for header on page showing all galleries */
.sm-user-ui h2, .sm-user-ui .sm-h2 {
    font-weight: 200;
    font-size: 18px;
}

After a couple of days, the code stopped working! More experiment produced this code which works fine. (For the time being!)

.sm-nui h2, .sm-nui .sm-h2 {
    font-weight: 400;
    font-size: 22px;
    color: #B8B8B8;
}

This addresses the font size, weight and colour exactly as wished.
QUESTION: how can this curious behaviour be explained? Might the current code suddently stop working?

SECOND PROBLEM:
Using Nicholas Sherlock's code in whole site CSS block, I successfully removed the gallery icons, centred the captions and altered the font size and weight on my Gallery Page.
However, I cannot alter the font colour. Example code below:

/* Modify Gallery Page font */
.sm-page-widget-galleries .sm-tile-info .sm-tile-title {
font-weight: 300;
font-size: 18px;
color: #B8B8B8 !important;
}

I shall be most grateful for any help from the experts on this forum.
Thank you.

leftquark · October 8, 2013

James Lyall wrote: »

Using Nicholas Sherlock's code in whole site CSS block, I successfully removed the gallery icons, centred the captions and altered the font size and weight on my Gallery Page.
However, I cannot alter the font colour. Example code below:

/* Modify Gallery Page font */
.sm-page-widget-galleries .sm-tile-info .sm-tile-title {
font-weight: 300;
font-size: 18px;[/COLOR][/COLOR]
color: #B8B8B8 !important;
}

I shall be most grateful for any help from the experts on this forum.
Thank you.

Get rid of the first identifier in there ".sm-page-windget-galleries" and that might work. I can't get access to your site from work but if that doesn't work, I can try to look into this again when I'm at home.

Also, the code you pasted above effects the photo TITLE only. If you want to change the captions use

/* SmugMug Layout Style*/
.sm-user-ui .sm-gallery-smugmug .sm-tile-info {
  color: #B8B8B8 !important;
}

/* Lightbox */
.sm-lightbox-basic.sm-lightbox-has-title .yui3-widget-ft .sm-lightbox-caption {
   color: #B8B8B8 !important;
}

James Lyall · October 9, 2013

EDIT: False posting, please see the following post.

James Lyall · October 9, 2013

Aaron, thank you very much for your response.

leftquark wrote: »

Get rid of the first identifier in there ".sm-page-windget-galleries" and that might work.

Sadly, this does not help; it just upsets the format of the captions under the gallery 'thumb' pictures.
(Results in a heavier and larger font).
When you have the time, I should be most grateful if you could take another look at this.

Also, the code you posted above effects the photo TITLE only.

That is actually what I wished to do (on my gallery page only).

What intrigued me was the need to change the code, after a couple of days, as it had stopped working.
I identify elements using right click > 'inspect element' in Firefox.

I am most grateful to you for your help and expertise.

James Lyall · October 10, 2013

Aaron, have you any further thoughts on my problem?
Many thanks in anticipation.

leftquark · October 10, 2013

James Lyall wrote: »

Aaron, have you any further thoughts on my problem?
Many thanks in anticipation.

Sorry ... refresh me on the issue. I was a little confused reading through the thread again (my apologies, I've been so busy with work, SM customizations, and getting ready for a weekend photo trip). Are you still having CSS trouble or is your CSS all set?

My only thoughts on why some code stopped working is that you may have added some CSS code that superseded the previous code. Basically what often happens is SM has given some declaration for the code. You want to change that so you add the !important tag to supersede SmugMug's setting. If you then add some more CSS, below that, it will over-ride your previous statement. CSS works serially ... it reads from the top down. The last CSS code it sees is the one that will be displayed. Perhaps you added some CSS?

James Lyall · October 11, 2013

Aaron, I really am most grateful to you and apologise for taking up your time during this busy period for you. (I congratulate you on your recent customisation posting, it is most impressive).
Your thoughts on the CSS code stopping working are reassuring and most helpful, thank you.

leftquark wrote: »

Are you still having CSS trouble or is your CSS all set?

Unfortunately, the answer is yes!

My original query was:
Using Nicholas Sherlock's code in whole site CSS block, I successfully removed the gallery icons, centred the captions and altered the font size and weight on my Gallery Page.
However, I cannot alter the font colour. Example code below:

/* Modify Gallery Page font */
.sm-page-widget-galleries .sm-tile-info .sm-tile-title {
font-weight: 300;
font-size: 18px;
color: #B8B8B8 !important;
}

To which you responded:

Originally Posted by leftquark
Get rid of the first identifier in there ".sm-page-windget-galleries" and that might work.

Sadly, this does not help; it just upsets the format of the captions under the gallery 'thumb' pictures.
(Results in a heavier and larger font).

I cannot understand why, in my code above, the colour is not addressed, whilst font weight and size are changed as wished.

Maybe next week you might have a moment to look at this for me.
I hope that you have a successful and enjoyable photo trip.
Best wishes,

leftquark · October 14, 2013

James Lyall wrote: »

Aaron, I really am most grateful to you and apologise for taking up your time during this busy period for you. (I congratulate you on your recent customisation posting, it is most impressive).
Your thoughts on the CSS code stopping working are reassuring and most helpful, thank you.

Unfortunately, the answer is yes!

My original query was:
Using Nicholas Sherlock's code in whole site CSS block, I successfully removed the gallery icons, centred the captions and altered the font size and weight on my Gallery Page.
However, I cannot alter the font colour. Example code below:

/* Modify Gallery Page font */
.sm-page-widget-galleries .sm-tile-info .sm-tile-title {
font-weight: 300;
font-size: 18px;
color: #B8B8B8 !important;
}

To which you responded:
Sadly, this does not help; it just upsets the format of the captions under the gallery 'thumb' pictures.
(Results in a heavier and larger font).

I cannot understand why, in my code above, the colour is not addressed, whilst font weight and size are changed as wished.

Maybe next week you might have a moment to look at this for me.
I hope that you have a successful and enjoyable photo trip.
Best wishes,

Color is actually addressed. There's no "text-color" command in CSS. It's simply just "color". Perhaps the original code worked, you just needed to change it to the color you wanted?

I'll try to remember to look tonight. I'm having issues getting to your site while i'm at work.

leftquark · October 14, 2013

James,
You haven't been entirely clear with what exactly you're trying to modify. Which gallery font color? The title below the photo? The caption below the photo? The gallery description text below the breadcrumb? The breadcrumb?

If you want to modify the TITLE of the photo, which is displayed just under the photo, use this CSS:

.sm-gallery .sm-gallery-content .sm-tile-info p:first-of-type {
   color: green !important;
}

Change "green" to any color of your choosing. You can use the HTML "#FFFFFF" type colors instead of just "green" or "blue" or whatever.

James Lyall · October 15, 2013

leftquark wrote: »

James,
You haven't been entirely clear with what exactly you're trying to modify.

Aaron,
Thank you for your response. (I trust that your photo trip went well).

I think that we are somewhat at cross purposes. May I try another approach to explaining my problem?
Please could you take a look at my site and click on "Galleries" in the menu. This brings up what I call my gallery page.
Each picture, with a caption beneath, represents one of my galleries.
It is the colour of the captions that I wish to modify. The code, which I have cited in previous posts, is repeated below.

[COLOR=Yellow][COLOR=White]/* Modify Gallery Page font  */
.sm-page-widget-galleries .sm-tile-info .sm-tile-title {
    font-weight: 300;
    font-size: 18px;[/COLOR][/COLOR]
[COLOR=Yellow][COLOR=White]    color: #B8B8B8 !important;
}[/COLOR][/COLOR]

Font weight and size are modified by this code BUT NOT THE COLOUR.
Have you any idea why the colour is not modified?
Can you suggest how I might modify the colour of the 'captions'?

(By the way, as you know, the code which you suggest in your last posting affects the caption under the large image in the basic SmugMug design for a single gallery. This is not what I am looking for).

Thank you very much for your continuing help.

leftquark · October 15, 2013

James Lyall wrote: »
Aaron,
Thank you for your response. (I trust that your photo trip went well).

I think that we are somewhat at cross purposes. May I try another approach to explaining my problem?
Please could you take a look at my site and click on "Galleries" in the menu. This brings up what I call my gallery page.
Each picture, with a caption beneath, represents one of my galleries.
It is the colour of the captions that I wish to modify. The code, which I have cited in previous posts, is repeated below.
[COLOR=Yellow][COLOR=White]/* Modify Gallery Page font  */
.sm-page-widget-galleries .sm-tile-info .sm-tile-title {
    font-weight: 300;
    font-size: 18px;[/COLOR][/COLOR]
[COLOR=Yellow][COLOR=White]    color: #B8B8B8 !important;
}[/COLOR][/COLOR]
Font weight and size are modified by this code BUT NOT THE COLOUR.
Have you any idea why the colour is not modified?
Can you suggest how I might modify the colour of the 'captions'?

(By the way, as you know, the code which you suggest in your last posting affects the caption under the large image in the basic SmugMug design for a single gallery. This is not what I am looking for).

Thank you very much for your continuing help.

Aha, now we're on the same page

You were close ... really close. It looks like SmugMug added a link tag around the gallery names and it adds one more layer of digging to get it to work right. You just need to add a second line with a "p" at the end this time:

/* Modify Gallery Page font  */
.sm-page-widget-galleries .sm-tile-info .sm-tile-title [COLOR="Red"]p [/COLOR]{
    color: #B8B8B8 !important;
}

James Lyall · October 15, 2013

leftquark wrote: »
Aha, now we're on the same page

You were close ... really close. It looks like SmugMug added a link tag around the gallery names and it adds one more layer of digging to get it to work right. You just need to add a second line with a "p" at the end this time:
/* Modify Gallery Page font  */
.sm-page-widget-galleries .sm-tile-info .sm-tile-title [COLOR=Red]p [/COLOR]{
    color: #B8B8B8 !important;
}

Aaron,
Thank you so much.
I have tried this code which you suggest, but it has no effect whatsoever upon the font colour.
The plot thickens!
Best wishes,

leftquark · October 15, 2013

James Lyall wrote: »

Aaron,
Thank you so much.
I have tried this code which you suggest, but it has no effect whatsoever upon the font colour.
The plot thickens!
Best wishes,

How bout this one:

.sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info a {
   color: green !important;
}

James Lyall · October 15, 2013

leftquark wrote: »

How bout this one:

Aaron,
That is brilliant !

How on earth did you manage to drill down to that? I am quite flabbergasted!
It is extraordinary how the correct CSS can be so elusive.

Thank you, well done!

leftquark · October 15, 2013

James Lyall wrote: »

Aaron,
That is brilliant !
How on earth did you manage to drill down to that? I am quite flabbergasted!
It is extraordinary how the correct CSS can be so elusive.

Thank you, well done!

What baffles me is the code I gave you last night worked when I tested it, then didn't work this morning. I must have been super tired when I did it.

Using Chrome as my browser is an extremely awesome tool for doing CSS tweaking on the site. You can right click on any part of the webpage and click "Inspect element". It brings up a window that shows all the code and jumps to the part you clicked on. As you move your mouse over the code it highlights on the webpage where that code touches. So I just move my mouse over the code till the proper spot is highlighted. Then Chrome lets you tweak the CSS and shows you how it works. So I usually look at the class names of the areas I'm trying to edit and then develop the CSS code -- then try it out and wallah.

Glad it worked

James Lyall · October 15, 2013

leftquark wrote: »

Glad it worked

Aaron,
Fascinating, thank you so much, we live and learn!
Best wishes,

Stuck with CSS for Gallery Page

Comments