Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div links not picking up multiple word class description

    Hi all, my first post here.

    I have a div whose background image changes according to my Wordpress categories:

    Code:
    div.cat-links a.cat-log {
    	background-position: 20px 5px;
    }
    
    div.cat-links a.cat-a day in the life {
    	background-position: -163px 5px;
    }
    The code for the image is being reproduced here:

    Code:
    <div class="cat-links">
    <?php foreach((get_the_category()) as $category) {
    echo '<a rel="category-tag" href="'.get_category_link($category->cat_ID).'" class="cat-'.$category->cat_name.'">'.$category->cat_name.'</a>';
    						} ?>				
    </div>
    In my example above it works for the first category, 'log', because it is a single word category. It doesn't work, however, for my category 'a day in the life'. For some reason this code is drawing the category name from the Wordpress name, not the slug. The slug, in this case, is 'adayinthelife'. I have tried:

    Code:
    a.cat-a day in the life
    a.cat-'a day in the life'
    a.cat-adayinthelife
    a.cat-a_day_in_the_life
    ...none of which work. I am trying to emulate the code from OMGUbuntu where little grey category icons appear by the excerpt on the home page.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Wordpress is pretty well documented and has an active community. A quick search brought this up for me: http://wordpress.org/support/topic/h...-category-name

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Stephan and thanks for your reply.

    I didn't post or look for this in the Wordpress forum as I'm not convinced this is a Wordpress issue. This is a CSS problem where I am trying to call a category name that has more than one word. The fact it is Wordpress is incidental. Indeed the code that calls the Wordpress category is correct; it is the CSS code that need adjusting.

    Can anyone else offer any pointers?

    [EDIT]
    Oh, hold on a minute, I think I understand the principle of applying this. I'll give it a go and get back to you...
    Last edited by demonboy; 05-03-2011 at 10:39 AM. Reason: it suddenly occured to me...

  • #4
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm afraid the links you provide assume that that user is already within a category-specific page.

    Any alternative suggestions?

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I know nothing of Wordpress but css class names cannot contain spaces (or apostrophes). They must start with a letter, then letters, numbers, hyphens or underscores.

    So 'cat-log' is one class and, within the css declarations, each class name needs to be preceded by a . dot.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Quote Originally Posted by AndrewGSW View Post
    I know nothing of Wordpress but css class names cannot contain spaces (or apostrophes).
    As a matter of fact, the class attribute value can contain spaces but in this case each string separated by a space is an own class. So, if the category name is written like “a day in the life” as value of a class attribute it would actually be possible to call the element with either:
    Code:
    .a {…}
    .day {…}
    .in {…}
    .the {…}
    .life {…}
    … or any combination of these like .day.the {…} or .a.day.in.the.life {…}.

    But anyway, this doesn’t look like a proper way to do it, the best would actually be to output the slug rather than the name.

  • #7
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi again, Stephan,

    I keep going back to your original suggestion re calling the slug, but I'll be honest: I don't know php well enough to work it out myself, hence this posting. I think the 'get_query_var' is what I'm needing but I can't find an example of how to use it correctly.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •