Edit Keywords list?

BDJBDJ Registered Users Posts: 26 Big grins
edited November 19, 2015 in SmugMug Customization
I have my photo Keywords list on a page but the text is too faint. Could I put in white font #FFFFFF, for example, and change hover color to, say, green?

The Keywords consist of names and places. Could the Keywords list be split into two, one for names, one for places? My photos usually have both.

Brian Jones

Comments

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited November 17, 2015
    BDJ wrote: »
    I have my photo Keywords list on a page but the text is too faint. Could I put in white font #FFFFFF, for example, and change hover color to, say, green?

    The Keywords consist of names and places. Could the Keywords list be split into two, one for names, one for places? My photos usually have both.

    Brian Jones
    This targets the widget on the /keyword page.

    .sm-page-widget-keywords .sm-keywords-list a {color:white !important}
    .sm-page-widget-keywords .sm-keywords-list a:hover {color:green !important}

    I also use these on my KW list.
    text-align: justify;
    text-transform: capitalize;


    I know of no way to separate KW's.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • BDJBDJ Registered Users Posts: 26 Big grins
    edited November 17, 2015
    Allen wrote: »
    This targets the widget on the /keyword page.

    .sm-page-widget-keywords .sm-keywords-list a {color:white !important}
    .sm-page-widget-keywords .sm-keywords-list a:hover {color:green !important}

    I also use these on my KW list.
    text-align: justify;
    text-transform: capitalize;


    I know of no way to separate KW's.

    Al, that is quite amazing. Almost as I typed the code, the keyword text turned white. And the hover color green. I can live with the combined name and place keywords. A happy house here.

    I need help, though, placing your code:

    text-align: justify;
    text-transform: capitalize;

    I imagine it has to be embedded in CSS but what? Presumably on the keyword page, too. Font size would be useful, also.

    Could you help just once more?

    Brian
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited November 17, 2015
    BDJ wrote: »
    Al, that is quite amazing. Almost as I typed the code, the keyword text turned white. And the hover color green. I can live with the combined name and place keywords. A happy house here.

    I need help, though, placing your code:

    text-align: justify;
    text-transform: capitalize;

    I imagine it has to be embedded in CSS but what? Presumably on the keyword page, too. Font size would be useful, also.

    Could you help just once more?

    Brian
    I think you can add those in the same rule. If it doesn't work might need to add !important like the
    color has. I really like the capitalize as names, etc. look much better.

    .sm-page-widget-keywords .sm-keywords-list a {
    color:white !important;
    text-align: justify;
    text-transform: capitalize;
    }


    If the justify doesn't work above might need to specify the box rather then the a links.
    .sm-page-widget-keywords .sm-keywords-list {
    text-align: justify;
    }
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • BDJBDJ Registered Users Posts: 26 Big grins
    edited November 17, 2015
    Allen wrote: »
    I think you can add those in the same rule. If it doesn't work might need to add !important like the
    color has. I really like the capitalize as names, etc. look much better.

    .sm-page-widget-keywords .sm-keywords-list a {
    color:white !important;
    text-align: justify;
    text-transform: capitalize;
    }


    If the justify doesn't work above might need to specify the box rather then the a links.
    .sm-page-widget-keywords .sm-keywords-list {
    text-align: justify;
    }

    Everything's fine now, Al. I couldn't get capitalize to work but uppercase did. It's great that experts like you are willing to help beginners like me. Perhaps I can call for your help again one day.
    Brian
  • pilotdavepilotdave Registered Users Posts: 785 Major grins
    edited November 17, 2015
    BDJ wrote: »
    I have my photo Keywords list on a page but the text is too faint. Could I put in white font #FFFFFF, for example, and change hover color to, say, green?

    The Keywords consist of names and places. Could the Keywords list be split into two, one for names, one for places? My photos usually have both.

    Brian Jones

    There may be a way to split up your keyword list, but this method would require a lot of consistency on your part.

    Here's the CSS (it can go in a content block in "all galleries," for example):

    .sm-tile-keywords a:nth-child(n+4) {
    color:red;
    }
    .sm-tile-keywords a:nth-child(2):before {
    content:"Location: ";
    }
    .sm-tile-keywords a:nth-child(4):before {
    content:" Names: ";
    }

    So what it does is adds the word "Location:" before the first two keywords. Then it changes the color of the rest of the keywords to red and adds the word "Names:" before them. This means the first two keywords would always need to represent the location and the others would represent the names. It doesn't look very good this way, I just changed the font color to red to demonstrate what it's doing. You could change that code to anything you want to differentiate those keywords. And you can set a number other than 2 keywords for location... just change the 4 in "nth-child(4)" and "nth-child(n+4)" to anything you want... just make it 2 more than the number of location keywords you want.

    Here's what that looks like:

    i-dGNgjd7-L.png

    Hope you find a way to make this work for you.

    Edit:

    You can physically separate the locations and names with this:
    .sm-tile-keywords a:nth-child(n+4) {
    color:red;
    position: relative;
    left: 50px;
    }

    Dave
  • BDJBDJ Registered Users Posts: 26 Big grins
    edited November 19, 2015
    pilotdave wrote: »
    There may be a way to split up your keyword list, but this method would require a lot of consistency on your part.

    Here's the CSS (it can go in a content block in "all galleries," for example):

    .sm-tile-keywords a:nth-child(n+4) {
    color:red;
    }
    .sm-tile-keywords a:nth-child(2):before {
    content:"Location: ";
    }
    .sm-tile-keywords a:nth-child(4):before {
    content:" Names: ";
    }

    So what it does is adds the word "Location:" before the first two keywords. Then it changes the color of the rest of the keywords to red and adds the word "Names:" before them. This means the first two keywords would always need to represent the location and the others would represent the names. It doesn't look very good this way, I just changed the font color to red to demonstrate what it's doing. You could change that code to anything you want to differentiate those keywords. And you can set a number other than 2 keywords for location... just change the 4 in "nth-child(4)" and "nth-child(n+4)" to anything you want... just make it 2 more than the number of location keywords you want.

    Here's what that looks like:

    i-dGNgjd7-L.png

    Hope you find a way to make this work for you.

    Edit:

    You can physically separate the locations and names with this:
    .sm-tile-keywords a:nth-child(n+4) {
    color:red;
    position: relative;
    left: 50px;
    }

    Dave

    Thanks, Dave. That looks ingenious. I'm away for a while now so I'll save your idea until I get back.
    Brian
Sign In or Register to comment.