how to change css code

keen but not sure

I've been testing this code (from smugmug heros) and now realize that although I got the gallery images changed to text...this code will not permit me to put one photo on the same page. I have been putting a photo block on the page but the selected image (and I did try several different ones) will not display on the page. Can I add something to the css coding below that will allow one photo to display?

.sm-tile img {
display:none !important;
}

.sm-user-ui .sm-tiles .sm-tile-content, .sm-user-ui .sm-tiles-column-organic .sm-tile-content.sm-tile-content-empty, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-over .sm-tile-content, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-cover .sm-tile-content {
background-color:#000000;
}
.sm-tile-content {
padding-bottom: 40px !important;
}

This is the url to the page but it is only in preview mode...I have sent an attachment to show how it looks now with the code in effect. I would like to add a photo (of a price list) to appear below the text.

http://gordonleephotography.smugmug.com/Baseball/2013District7MajorsBaseball

Jeannie

The Mechanic

Hi keen but not sure,

You will need to make part of your css address that specific location, this exact Galleries Block in this case. You can change the first block of css with:

.sm-page-widget-47fTqWgG .sm-tile img {
display:none !important;
}

This should allow you to control the Galleries Block only for the removal of the images, instead off all images on this page.

Thanks -Scott

Allen

Add a single photo content block. It will have a class name that can be used in CSS to turn the image back on.
This is example of what the class name will look like.
.sm-page-widget-1234567

Edit: or do the reverse like Scott says.

Scott, do widgets now use all characters? I've only seen numbers up to this point.
Edit: Scott picked the id not the class name.

keen but not sure

The Mechanic wrote: »

Hi keen but not sure,

You will need to make part of your css address that specific location, this exact Galleries Block in this case. You can change the first block of css with:

.sm-page-widget-47fTqWgG .sm-tile img {
display:none !important;
}

HI Scott,

I'm really new to this coding so forgive me if I don't get it right....
Well...I first added your code to the bottom of the code and I was still unable to put a photo on the page.
Then I removed the first 'part' of the code and substituted your code.
And voila...I got the one photo to appear in the photo block.
Unfortunately...now an image from each gallery appear sbeside the text link...I didn't want those images to appear at all.
Is it possible to remove those images?

keen but not sure

Forgot to include a snapshot of the page with the substituted code

keen but not sure

Allen wrote: »

Add a single photo content block. It will have a class name that can be used in CSS to turn the image back on.
This is example of what the class name will look like.
.sm-page-widget-1234567

Edit: or do the reverse like Scott says.

Scott, do widgets now use all characters? I've only seen numbers up to this point.
Edit: Scott picked the id not the class name.

I substituted your numbers instead of Scott's letters in the code and it did allow a photo to appear on the page.....but it got the same result as seen in the last attachment...I do not want an image beside the text...and I wouldn't mind getting rid of the gallery icon beside the text too

Jeannie

The Mechanic

Hello,

I did grab the wrong reference here is the complete code and it is updated:

.sm-page-widget-7580927 .sm-tile img {
display:none !important;
}

.sm-user-ui .sm-tiles .sm-tile-content, .sm-user-ui .sm-tiles-column-organic .sm-tile-content.sm-tile-content-empty, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-over .sm-tile-content, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-cover .sm-tile-content {
background-color:#000000;
}
.sm-tile-content {
padding-bottom: 40px !important;
}

Thanks -Scott

keen but not sure

Thank you Scott...

That worked.

Three more things...

1. is is possible to delete the gallery icon beside the text?
2. Can I have the text in the gallery this color #7393f0
3. Is it possible to center the text iinks...they are currently at left alignment.

I know...I'm fussy ...and I'm very appreciative of all the help I get from smugmug and dgrin folks

Jeannie

keen but not sure

http://gordonleephotography.smugmug.com/Dance/Allegro/Other-8

Scott...I don't know what happened on that page but I copied that code onto a css block and the little gallery images are appearing on the text.

Here is the image in the attachment.

Where did I go wrong?

The Mechanic

Hi,

Are you trying to use the code I gave you elsewhere? Your first linked to location is working just fine. This is specific to this Exact Location.

You would need to inspect the elements on your site to get the widget number in question to customize this code for another location.

See Below:

Thanks -Scott

keen but not sure

The Mechanic wrote: »

Hi,

Are you trying to use the code I gave you elsewhere? Your first linked to location is working just fine. This is specific to this Exact Location.

You would need to inspect the elements on your site to get the widget number in question to customize this code for another location.

See Below:

Thanks -Scott

How do I go about getting a widget number for specific pages....I have 15 of these pages to do.

Keen to know how!

keen but not sure

keen but not sure wrote: »

How do I go about getting a widget number for specific pages....I have 15 of these pages to do.

Keen to know how!

I know how to find the widget number...I right-clicked on the css box and clicked on source code. Because I don't really understand code...I had to look for that widget number and find its position.

Knowing 'where' to look for the widget number...I was able to find a number for the page showing images on a different source code.

Allen

keen but not sure wrote: »

I know how to find the widget number...I right-clicked on the css box and clicked on source code. Because I don't really understand code...I had to look for that widget number and find its position.

Knowing 'where' to look for the widget number...I was able to find a number for the page showing images on a different source code.

I use Firefox and I can right click on a widget and pick Inspect Element in drop. The page html pops at
the browser bottom with what you RC'd on highlighted. Then scroll up a few lines to find the widget
class name. RC as high in the widget as possible because where you click, it might be a lot of lines to
the actual widget top. Scott's post #10 screen shot shows where you'd have to scroll/look up to.

keen but not sure

keen but not sure wrote: »

I know how to find the widget number...I right-clicked on the css box and clicked on source code. Because I don't really understand code...I had to look for that widget number and find its position.

Knowing 'where' to look for the widget number...I was able to find a number for the page showing images on a different source code.

So my next question is how can I change these text links to a blue color (#7393f0). Now I just need someone to do a sample coding and show me where to make a change on the source code.

Jeannie

Allen

keen but not sure wrote: »

So my next question is how can I change these text links to a blue color (#7393f0). Now I just need someone to do a sample coding and show me where to make a change on the source code.

Jeannie

See if adding this with the rest helps.

.sm-page-widget-7580927 .sm-tiles-grid ul li a p {
color: #7393f0 !important
}

keen but not sure

Allen wrote: »

I use Firefox and I can right click on a widget and pick Inspect Element in drop. The page html pops at
the browser bottom with what you RC'd on highlighted. Then scroll up a few lines to find the widget
class name. RC as high in the widget as possible because where you click, it might be a lot of lines to
the actual widget top. Scott's post #10 screen shot shows where you'd have to scroll/look up to.

I decided to view the smugmug account through firefox( It is a lot easier to see this code from firefox than from safari)and from right clicking I was able to call up Inspect Element.
I gather I'm to right click on the gallery of texts...not the css box.
Here is the screenshot from the Inspect element....am I going in the right direction so far?
I tried scrolling but I could not find the widget number given to me..

Am I doing something wrong?

Allen

The CSS box is part of the edit screen, not what is displayed on the page.

The highlight is whatever is exactly under the RC. You have to go up a few indented lines to find the
container, in this case the widget. Move your mouse up the lines and the page area should highlight as you cross
other div's. Hover the class names to see this. class="...

Look at the CSS rules in the right pane. It will give you a clue for the highlighted line what CSS rules already apply.
Like if you see a color and want a different one it gives you an idea what rule to override in you new CSS.

keen but not sure

I was apparently looking for the widget number on the right page but instead of right clicking to the left of the gallery block in PREVIEW mode ....I was doing it in CUSTOMIZED mode. (and could never find that specific widget number given to me for that page)

And now that I know how to find the widget number and have added Allen's post #15... the text links are now blue...hoorah!

Still....I sense the blue text is in left alignment in each of the columns and I would like it centered.

How does one insert a coding to 'centering text' in the coding below.
.sm-page-widget-7496526 .sm-tile img {
display:none !important;
}

.sm-user-ui .sm-tiles .sm-tile-content, .sm-user-ui .sm-tiles-column-organic .sm-tile-content.sm-tile-content-empty, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-over .sm-tile-content, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-cover .sm-tile-content {
background-color:#000000;
}
.sm-tile-content {
padding-bottom: 40px !important;
}
.sm-page-widget-7496526 .sm-tiles-grid ul li a p {
color: #7393f0 !important
}

Allen

Might try this first

.sm-page-widget-7580927 .sm-tiles-grid ul li a p {
color: #7393f0 !important;
text-align: center;
}

Ref: http://www.w3schools.com/cssref/pr_text_text-align.asp

keen but not sure

Allen wrote: »

Might try this first


Your suggestion worked in centering the text!
Is there anyway I can get rid of the gallery icons for each title?

Allen

keen but not sure wrote: »

Allen wrote: »

Might try this first


Your suggestion worked in centering the text!
Is there anyway I can get rid of the gallery icons for each title?

I have this in my "all folders" CSS.

.sm-tile-folder .sm-tile-type-icon:after, 
.sm-tile-album .sm-tile-type-icon:after {
  display: none;
}

keen but not sure

Allen wrote: »

keen but not sure wrote: »

I have this in my "all folders" CSS.

.sm-tile-folder .sm-tile-type-icon:after, 
.sm-tile-album .sm-tile-type-icon:after {
  display: none;
}

Thank you ...works like a charm!

Jeannie

keen but not sure

With the code given... what would the coding be if I wanted the blue text bigger ?
.sm-page-widget-7647696 .sm-tile img {
display:none !important;
}

.sm-user-ui .sm-tiles .sm-tile-content, .sm-user-ui .sm-tiles-column-organic .sm-tile-content.sm-tile-content-empty, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-over .sm-tile-content, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-cover .sm-tile-content {
background-color:#000000;
}
.sm-tile-content {
padding-bottom: 40px !important;
}
.sm-page-widget-7647696 .sm-tiles-grid ul li a p {
color: #7393f0 !important;
text-align: center;
}
.sm-tile-folder .sm-tile-type-icon:after,
.sm-tile-album .sm-tile-type-icon:after {
display: none;
}

Allen

keen but not sure wrote: »

With the code given... what would the coding be if I wanted the blue text bigger ?
.sm-page-widget-7647696 .sm-tile img {
display:none !important;
}

.sm-user-ui .sm-tiles .sm-tile-content, .sm-user-ui .sm-tiles-column-organic .sm-tile-content.sm-tile-content-empty, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-over .sm-tile-content, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-cover .sm-tile-content {
background-color:#000000;
}
.sm-tile-content {
padding-bottom: 40px !important;
}
.sm-page-widget-7647696 .sm-tiles-grid ul li a p {
color: #7393f0 !important;
text-align: center;
}
.sm-tile-folder .sm-tile-type-icon:after,
.sm-tile-album .sm-tile-type-icon:after {
display: none;
}

I like to use pt (point size) instead of px because some older browsers don't seem to be consistent with pixel size.

.sm-page-widget-7647696 .sm-tiles-grid ul li a p {
color: #7393f0 !important;
text-align: center;
font-size: 16pt;
}

keen but not sure

thank you again. It worked beautifully!

Jeannie

Hikin' Mike

[QUOTE=Allen;1966107]I like to use pt (point size) instead of px because some older browsers don't seem to be consistent with pixel size.

.sm-page-widget-7647696 .sm-tiles-grid ul li a p {
color: #7393f0 !important;
text-align: center;
font-size: 16pt;
}[/QUOTE]

The older browsers probably doesn't render the new Smugmug sites correct anyway, so using 'pt' isn't helpful now, right?

Allen

There were a lot of complaints that the top menu showed different size text on multiple pages. I suspected
that the page theme was the cause but using pt instead of px seemed to fixed it.

keen but not sure

possible to regroup text links and add heading to each group?
So...I'm asking a different question but it still involves this thread of converting the folder photo icons to text links.

I would like to regroup these text links under 2 headings displaying the text links as I want them all to appear on the same page.

Possible?

Allen

keen but not sure wrote: »

So...I'm asking a different question but it still involves this thread of converting the folder photo icons to text links.

I would like to regroup these text links under 2 headings displaying the text links as I want them all to appear on the same page.

Possible?

Is this just a standard folder page with a gallery box?

Might have to add multiple gallery boxes for each group of galleries.
Or put all this in an html box where you could show it all in the order you want with the headings.

Just to show you what's possible using html boxes I added three html boxes so I could get three columns on this page.
http://www.photosbyat.com/Public-Site-Index-NS2/n-6dSMX

keen but not sure

Allen wrote: »

Is this just a standard folder page with a gallery box?

Might have to add multiple gallery boxes for each group of galleries.
Or put all this in an html box where you could show it all in the order you want with the headings.

Just to show you what's possible using html boxes I added three html boxes so I could get three columns on this page.
http://www.photosbyat.com/Public-Site-Index-NS2/n-6dSMX

From looking at your link....I see similarities with your website set up and mine.
I have a 'table of contents'...that links up to a folder of galleries ...that leads to individual galleries.

It is within one of my folder of galleries that I need to have the galleries grouped into two headings.....festival and yearend. IN the previous threads...I was happy just to organize the galleries within the folder alphabetically.

And with the css block coding you have been helping me to tweak...it was incredibly easy and fast.
With html block....I wonder if this could involve coding that requires a link to be added manually from each gallery for each text link?
If so...I have this html coding (from you). It works but it is a slower way to build a page that acts like a folder page containing links to galleries.
So should I stay and do it the slo mo way or is there a way to convert the folder page to easily display the galleries under two headings?

Allen

It is quite a bit of work upfront but once established it's just a mater of adding new links.