ThemeShaper Forums » Thematic


Q: Post icon based on category and metadata

(4 posts)
  • Started 10 years ago by aptmunich
  • Latest reply from thinkleft
  • This topic is not resolved
  1. Hey everyone,

    New Thematic user (with limited CSS knowledge) here, so go easy on me! :) I'm running into 2 issues:

    1. CSS & post title image
    I want to create a child theme that automatically displays customized icons in front of each post title, based on the category I select. Here's the site so you can hopefully see what I mean:

    I've worked out to do this using the clever dynamic css thingy using this css selector. Here's the code I used for the "snippet" category entry you can see as the top post:

    div.category-snippet .entry-title {
    text-indent: 60px;
    	background: url(images/mono/paper_clip_attachment_document.png) no-repeat;
    	background-size: 12% ;
    	height: 40px;
    	padding-top: 14px;

    So far so good. However, that won't make the image part of the clickable link. So I tried to move the image to the "a" section instead. You can see the result in the "linked" category posts (with the arrow icon):

    div.category-linked .entry-title a{
    	text-indent: 60px;
    	background: url(images/mono/arrow_right_next.png) no-repeat;
    	background-size: 11%;
    	height: 40px;
    	padding-top: 16px;

    If I do that, the text-indent is ignored and my images are behind the post title.

    I'm guessing one of the other thematic css files is overriding the text-indent option, but I can't quite figure out where I need to look.

    Generally speaking, is this the best way to customize posts based on category though? I might later try to go for a more distinct look for each post, so I'm wondering if this CSS-slug based approach is what you'd consider a sensible way to go about things.

    2. Metadata
    The other issue I'm sort of confused about, is how I can customize things like the type of metadata and the order of the metadata that thematic displays for posts. In other themes, you would see the relevant code and could just rearrange it, but I'm having a hard time figuring out how to do that with this theme.

    What I'm trying to do is the following:
    - remove the author slug (I'm the only author, so it's unnecessary)
    - Move the category slug to just below the post title (alongside the post date), instead of below by the comments link

    From reading other questions here, it looks as though I might have to modify the functions.php for my child theme and create a function that basically adjusts the metadata as I want it? Is that the way we're supposed to do these things?

    Posted 10 years ago #
  2. 1. you could use padding-left instead of text-indent. that will also keep the image clickable.

    2. all the "relevant" code for the postmeta is coded in the Content-Extensions file in the Library folder of Thematic. never change anything in the thematic code, but I always look in there to see what is happening. then depending on if you are using version you need to use filters à la:

    or if you are using the latest stable dev version you can use the nifty, new override functions in your child's functions.php

    function childtheme_override_postheader_postmeta() {
    		global $post;
    		global $authordata;
    	    $postmeta = '<div class="entry-meta">';
    		$postmeta .= thematic_postmeta_entrydate();
    		$postmeta .= ' ';
    	    //$postmeta .= thematic_postmeta_authorlink();
    	    //$postmeta .= thematic_postmeta_editlink();
    	    $postmeta .= "</div><!-- .entry-meta -->\n";
    	    return apply_filters('thematic_postheader_postmeta',$postmeta); 

    the above is almost identical to the original thematic_postheader_postmeta() function except i've commented out the edit link and the author function.

    Posted 10 years ago #
  3. Terrific, thanks for the pointers!

    In case anyone else is looking into doing something similar, this plugin also looks like a good way of doing things:

    But I think I'll try to get my version working first.. thanks again!

    Posted 10 years ago #
  4. Hi,

    I've tried your technique to add icons to categories and it definately got me the closest to make it work.
    You can check here what is looks like now (just a random icon I used). and scroll down a bit.
    What I notice now is that the entry-meta is covering the entry-title. Is there a way to fix that?

    I also tried the plugin, but that just doesn't seem to do anything at all. Also tried some php stuff, but that just seems to be way too difficult for me. So I'm very happy to have found this way of doing it.

    Is it possible also to have an icon that covers all of the left side of the titlebar? So that is just as big as the top of the entry-title and goes down to the bottom of entry-meta? That would be just perfect if that's possible.

    Thanks for posting the way you got it to work. I kinda feel like I'm getting close now. =)

    Thanks for any help!

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.