Different Css color for each category name

  • mompe

    (@mompe)


    11 years ago

    Hello.

    I’ll try to explain as best I can. Wear several days seeking information across the network and trying to change the font color of the names of each category.

    I have two lists of categories: “Genre” which is the parent and in which there are ten or eleven childs, and “Topic”, another parent in which I have other similar number of subcategories.

    Well, I am interested that in the “Post Info” as in the sidebar, if I use a widget, the name of each subcategories appear with different color.

    You can see an example of what I mean in this site (on “Post Info” under the titles of the posts):

    http://www.shortoftheweek.com

    Also you can view on the part of the sidebar, in a cluster widget:

    http://www.shortoftheweek.com/2013/04/02/caldera/

    I’m not interested for change the template of each category, just the color category names. Maybe it’s a silly thing very easy to do, but I have been one week trying to fix it. I much appreciate any help or orientation. Thank you.

    (I’m sorry for my bad english written, I’m from Spain)

Viewing 13 replies - 1 through 13 (of 13 total)
  • David Choi

    (@wpthemes777)

    11 years ago

    You can do that with CSS nth-child property:

    http://www.w3schools.com/cssref/sel_nth-child.asp

    Using your site

    http://www.shortoftheweek.com/2013/04/02/caldera/

    as the example, let’s say you want to change the links for the first sidebar block “Info”, you can do

    div.cluster li:nth-child(1) a {color: red; }
div.cluster li:nth-child(2) a {color: green; }
div.cluster li:nth-child(3) a {color: blue; }

    But because all your blocks starts with <div class=”cluster”>, you would need to some how add additional CSS select to that block (some widgets allow this) so it can be something like adding “info” to look like

    <div class="cluster info">

    so the CSS code will be

    div.cluster.info li:nth-child(1) a {color: red; }
div.cluster.info li:nth-child(2) a {color: green; }
div.cluster.info li:nth-child(3) a {color: blue; }

    So you get the idea.

    Thread Starter mompe

    (@mompe)

    11 years ago

    Thank you very much for your response.
    I’ll try what you say. Anyway, I’m not using the same way of that site to put the category names on side bar. I’m not using any widget.

    This is my site:

    http://doblerol.clandestinodeactores.com

    You can see that I’m doing something similar but very different.
    This is how I’m doing in sidebar:

    http://doblerol.clandestinodeactores.com/prueba-video-imagen/

    How can I do what you say instead of “div.cluster.info …”?

    Thread Starter mompe

    (@mompe)

    11 years ago

    I have just proved on what you have commented and, though it works well to change the colors of the category names, it changes the first ones all the equal color, and the second ones also. It does it in block. It does not serve me because my idea is that each of the categories has a different color. For example:

    Child1 (Adventure) = Yellow
    Child2 (Drama) = Brown
    Child2 (Documentary) = Red
    Child2 (Comedy) = Green
    Child2 (Musical) = Pink
    Child2 (Myth) = Blue
    Child2 (Romance) = Orange
    Child2 (Satira) = Gold
    Child2 (Western) = Grey
    …
    …

    And always the same color each one, not changing.

    I thought that probably with .cat_item_ID I might manage to change it into CSS, but it does not work or knows like do it.

    David Choi

    (@wpthemes777)

    11 years ago

    In this case, you have to hack the plugin or create a custom category plugin to do that, so it can include the category or parent category as CSS into something like <div class=”cluster cat_id_1″> to the div block, so you can style them using CSS.

    Unfortunately, I haven’t seen a widget that does that, but you can try your luck searching at

    http://wordpress.org/extend/plugins/

    Regards,
    David

    Thread Starter mompe

    (@mompe)

    11 years ago

    And how might it make it I? Is it very difficult?

    Is that what has made the person that designed this template?:

    http://shortoftheweek.com

    I believed that with wordpress it would have it a bit easier for something that does not seem to be, to the first sight, so complex as to change colors of sources.

    Thread Starter mompe

    (@mompe)

    11 years ago

    Hello again. I hate to be repetitive, but I’ve been trying to give achieve this long days, without success.

    Someone will know me say, please, how the developer of shortoftheweek.com has managed to do this?

    <img>http://imageshack.us/a/img824/6317/comolohace.jpg</img&gt;

    My knowledge of php is limited, do not take long to learn and I don’t know how to make a plugin as shown me “SelfHostedWP.com
    Member” (who I really appreciate your help).

    I tryed to contact the developer of shortoftheweek.com to ask directly how to do it, but I was unable to get his contact. Could someone give me a solution, please?

    David Choi

    (@wpthemes777)

    11 years ago

    As stated above, it requires creating a plugin or customizing an existing plugin. You would have to hire somebody to do this for you. Here are some freelancing sites:

    https://www.tweaky.com/

    https://www.odesk.com/o/profiles/browse/?q=wordpress

    Thread Starter mompe

    (@mompe)

    11 years ago

    Thanks for the recommendation, but… If solving a problem that I have or get information to make changes to my wordpress I have to hire the services of a freelance developer, paying for it, why we need this forum?

    David Choi

    (@wpthemes777)

    11 years ago

    What you are trying to do is a customization. As an analogy, even if you buy a paid Car, trying to make customizations need to pay someone to do it for you.

    The feature you want is not built-in in WP. Good luck trying to find someone to work for you free.

    Thread Starter mompe

    (@mompe)

    11 years ago

    Nooo.. I’m sorry. I did not want to say I want somebody to work for me free. I want to make that customization or to build the plugin by myself, but, I need some help for that. Just help with words. I’m not saying I want somebody telling me every step that I have to give, but, if it was posible, I´d like some words to intend.

    David Choi

    (@wpthemes777)

    11 years ago

    Sure, no problem 🙂

    Thread Starter mompe

    (@mompe)

    10 years, 11 months ago

    Now what happens to me is that I do not see the “classes” for the categories css. I don’t understand what could have happened.

    When I started creating the Theme for my wordpress in CSS it was posible to change the css of the categories using the class “.cat-ID” (changing ID with the corresponding number of the category, of course), but now this option seems that it doesn’t exist however much I try it. I have tried with firebug Firefox and nothing. Could someone say to me how can I have that option again to change the CSS of the categories, please?

    Thank you.

    The site is http://www.doblerol.clandestinodeactores.com

    cstreater

    (@cstreater)

    10 years, 3 months ago

    I noticed you’ve wrapped your category names in spans, but you could also target links on your page directly using CSS. For example:

    .category a[href*=”drama”] {
    color: #96cf21;
    }

    Where “drama” is the link value to target, and color is the color of the text.

    Then, in your sidebar you have:

    <div class=”categoryBig”>

    Edit this line to:

    <div class=”categoryBig category”>

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Different Css color for each category name’ is closed to new replies.