Style on just a title?

[MartinC]

Hi, Still a newbie CSS person and have a question I hope someone might be able to help with. I have a Wordpress blog and a particular plugin allows me to output a list from certain database entries. I don't see any way to be able to attach any styling to the various list items. However, each section of the list does have a title included which is consistant. I was hoping there might be some way to style these in the site's CSS file .... hence this forum question.

<li id="lead_row_3" class="gf_css_class odd" style="gf_cssall"><ul><li class="text" title="Your First Name">xxxxx</li><li class="text" title="Website"><a class="thickbox colorbox lightbox" rel="nofollow" href="http://www.xxxxx.com">xxxxx.com</a></li><li class="textarea" title="What's your Inspiration Quote?"><p>dfghegvrtshvtwrbhvtrw</p></li><li class="textarea" title="Now we'd love to know why you find that one so inspiring."><p>Eugiat alis hac faccummy aptent vulla cilit, esse put ilisismod, exeriure atis consenisim obor. Aliquatem velessectem endre gait consequ nostra do eraestrud senisl, quatums num augue. Ute endre tis, vero odolorperos dolutem modolore, elementum vendiatie irillam mi. </p></li></ul></li>

As you can see, there is classes however they affect multiple areas. The only unique identifier is the title i.e. title="Website" Is being able to style based on this at all possible? Any help would be hugely appreciated.Martin

[niche]

The class is the styling. Find the "textarea" class in your CSS file and change it to what you need. EDIT:If you want styling for a specific item, create a new class and assign it to that item.

Edited May 19, 2012 by niche

[eTianbun]

You just want to style them individualy a'ight?EXAMPLE:

[title="Your First Name"]{color:red}

[MartinC]

Yeah, except I don't have control on the actual output of the plugin (that I can see) but do have access to CCS files.

[Guest So Called]

Actually you do have control over the WordPress plug-in, but only if it's within your coding ability or your ability to learn enough to get the job done. There is nothing secret about the code that you plug-in, and the source code is part of the package. But it is not an area that novices would be comfortable in. Also, there is no legal problem with modifying plug-in code except that (depending on license) you cannot redistribute it. That shouldn't be a problem. The biggest problem I can see with the concept in your OP, and pardon me if I haven't got the right terms here, you wanted to base your CSS modifications on an HTML attribute (title) when you need instead to base your styling on CSS selectors. The HTML title attribute is not a CSS selector. The things in your OP code that you can modify are CSS classes. If you have a class that appears only in the code you want to modify then it can be done. Or if the HTML tags you want to change are only used in the area you want to modify then you can apply CSS to all such tags (not likely). Or you can modify the PHP for your plug-in and create any classes you like, but that may be difficult for a novice. Although once a novice not necessarily always a novice. After all, everybody was a novice once. Also it may be possible for you to get paid support to modify your plug-in, although I don't know where you'd get that.

[eTianbun]

...The HTML title attribute is not a CSS selector...

Well, that's not true. Edited May 20, 2012 by CodeName

[eTianbun]

Yeah, except I don't have control on the actual output of the plugin (that I can see) but do have access to CCS files.

I dont really care about how you fix your styling problem, but as long it's the right way, then no problem. I gave you an example on how to do what you wanted (In my first reply). Edited May 20, 2012 by CodeName

[dsonesuk]

Your unique identifier is id="lead_row_3" from<li id="lead_row_3" class="gf_css_class odd" style="gf_cssall">It also depends if it is displayed in a constant uniform state, how many sublevel listings. you could use nth as below, each row has individual colour text, and row with id lead_row_2 has its colours reversed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#list ul li:nth-child(1){ color:red;}#list ul li:nth-child(2){ color:blue;}#list ul li:nth-child(3){ color:lime;}#list ul li:nth-child(4){ color:purple;}#list li#lead_row_2 li:nth-child(1){ color:purple;}#list li#lead_row_2 li:nth-child(2){ color:lime;}#list li#lead_row_2 li:nth-child(3){ color:blue;}#list li#lead_row_2 li:nth-child(4){ color:red;}</style></head><body><ul id="list"><li id="lead_row_1" class="gf_css_class odd" style="gf_cssall"><ul><li class="text" title="Your First Name">xxxxx</li><li class="text" title="Website"><a class="thickbox colorbox lightbox" rel="nofollow" href="http://www.xxxxx.com">xxxxx.com</a></li><li class="textarea" title="What's your Inspiration Quote?"><p>dfghegvrtshvtwrbhvtrw</p></li><li class="textarea" title="Now we'd love to know why you find that one so inspiring."><p>Eugiat alis hac faccummy aptent vulla cilit, esse put ilisismod, exeriure atis consenisim obor. Aliquatem velessectem endre gait consequ nostra do eraestrud senisl, quatums num augue. Ute endre tis, vero odolorperos dolutem modolore, elementum vendiatie irillam mi. </p></li></ul></li><li id="lead_row_2" class="gf_css_class odd" style="gf_cssall"><ul><li class="text" title="Your First Name">xxxxx</li><li class="text" title="Website"><a class="thickbox colorbox lightbox" rel="nofollow" href="http://www.xxxxx.com">xxxxx.com</a></li><li class="textarea" title="What's your Inspiration Quote?"><p>dfghegvrtshvtwrbhvtrw</p></li><li class="textarea" title="Now we'd love to know why you find that one so inspiring."><p>Eugiat alis hac faccummy aptent vulla cilit, esse put ilisismod, exeriure atis consenisim obor. Aliquatem velessectem endre gait consequ nostra do eraestrud senisl, quatums num augue. Ute endre tis, vero odolorperos dolutem modolore, elementum vendiatie irillam mi. </p></li></ul></li><li id="lead_row_3" class="gf_css_class odd" style="gf_cssall"><ul><li class="text" title="Your First Name">xxxxx</li><li class="text" title="Website"><a class="thickbox colorbox lightbox" rel="nofollow" href="http://www.xxxxx.com">xxxxx.com</a></li><li class="textarea" title="What's your Inspiration Quote?"><p>dfghegvrtshvtwrbhvtrw</p></li><li class="textarea" title="Now we'd love to know why you find that one so inspiring."><p>Eugiat alis hac faccummy aptent vulla cilit, esse put ilisismod, exeriure atis consenisim obor. Aliquatem velessectem endre gait consequ nostra do eraestrud senisl, quatums num augue. Ute endre tis, vero odolorperos dolutem modolore, elementum vendiatie irillam mi. </p></li></ul></li></ul></body></html>

As you see the list is uniform, with 1 single sublevel.

[Guest So Called]

Well, that's not true.

Okay, I'm not an expert in CSS. Please show a short example.

[eTianbun]

Okay, I'm not an expert in CSS. Please show a short example.

Nobody is perfect bro! You can select elements by attribute, known as attribute selector.EX:

[title]{color:green} /*Will select/style all element with title attribute.*/

Edited May 20, 2012 by CodeName

[Guest So Called]

So that will apply the style (color:green) to any HTML tag that has a title attribute? That's not what I meant. This is what I think the OP meant. I'll use an arbitrary fictional tag XYZ and UVW:

<XYZ title="oh what a fine day"> </XYZ><XYZ title="life in the city"> </XYZ><XYZ title="a boy and his dog"> </XYZ><XYZ title="truth or fiction?"> </XYZ><XYZ title="modern times"> </XYZ><UVW title="yet more of the same"> </UVW>

Now apply a CSS stytle to the tags with titles "oh what a fine day" and "life in the city" but not to the other example tags. That's what I meant when I said title could not be used as a CSS selector. You can apply the style to all the XYZ tags. You can apply the style to all tags with title attributes. You can even apply the style to only XYZ tags with title attributes. But I still believe that you cannot apply style to tags with specific titles. That's what I was trying to say, and unless I've misunderstood the OP I believe that's what he wants to do. IOW I did not mean you cannot apply style to tags with title attributes, although I did not know that per your example, but I meant that you cannot apply style based upon what the title attribute is set to. Example: <SOME_TAG title="this title"> I don't believe you can apply a style to all the elements with title="this title" ... please correct that if it's wrong.

[eTianbun]

It is possible:

 [title="oh what a fine day"]{color:red}

[Guest So Called]

Well if that works then I think the OP has got his wish. (Unless I misunderstood the OP.)