how to change css code

keen but not surekeen but not sure Registered Users Posts: 51 Big grins
edited August 29, 2014 in SmugMug Customization
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
«1

Comments

  • The MechanicThe Mechanic Registered Users Posts: 197 Major grins
    edited August 20, 2014
    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
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 20, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 20, 2014
    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 surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 20, 2014
    Forgot to include a snapshot of the page with the substituted code
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 20, 2014
    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 MechanicThe Mechanic Registered Users Posts: 197 Major grins
    edited August 20, 2014
    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 surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 20, 2014
    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 surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 20, 2014
    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 MechanicThe Mechanic Registered Users Posts: 197 Major grins
    edited August 20, 2014
    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 surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 20, 2014
    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 surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 20, 2014
    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.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 20, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 20, 2014
    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
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 20, 2014
    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
    }
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 20, 2014
    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?
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 20, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 21, 2014
    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
    }
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 21, 2014
    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
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 21, 2014
    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?
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 21, 2014
    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;
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 21, 2014
    Allen 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 surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 22, 2014
    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;
    }
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 23, 2014
    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;
    }
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 23, 2014
    thank you again. It worked beautifully!

    Jeannie
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 24, 2014
    [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?
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 24, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 25, 2014
    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?
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 25, 2014
    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
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • keen but not surekeen but not sure Registered Users Posts: 51 Big grins
    edited August 25, 2014
    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?
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 25, 2014
    It is quite a bit of work upfront but once established it's just a mater of adding new links.
    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.