Edit Keywords list?

BDJ

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

Allen

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.

BDJ

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

Allen

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;
}

BDJ

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

pilotdave

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:



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

BDJ

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:



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