WordPress.org

Ready to get started?Download WordPress

Forums

What are they using to do this... (8 posts)

  1. marq
    Member
    Posted 9 years ago #

    This site ThinkProgress.org is a great looking WP site....

    I want to know, can someone please tell me WHAT they are using to place the little banner at the top of each of the of the posts...

    I have seen that it is done via CSS because they have a the "banners" in the CSS.

    <div class="entry corruptestablishment" id="post-1518">
    <div class="entryContent">

    I like the effect, and if anyone has any idea how they did it I would be very thankful...

    Is it a tag or something?

  2. ch0de
    Member
    Posted 9 years ago #

    I don't know how they did it, but they might of called a txt file which auto generates the div I guess.

  3. billsaysthis
    Member
    Posted 9 years ago #

    The images used are specified in the CSS file--Firefox with Web Developer extension comes in real handy for answering these questions. The second class name (corruptestablishment) matches one of the site's categories and is a good example of how multiple classes can be applied to a single block level element, especially for noobs like me.

  4. iand
    Member
    Posted 9 years ago #

    Looks like the divs bit might be created thus:
    <div class="entry <?php the_category(); ?>" id="post-<?php the_ID(); ?>">
    <div class="entryContent">

    and then the styling is done via images in the css file.

  5. marq
    Member
    Posted 9 years ago #

    So how do I implement something like this, I am very new to WP and I am not sure my way aorund the php...

    So what file to I start hacking ?

    Thanks guys, I am loving WP just because when you ask a question, you get an answer, unlike my "current" blog software...

  6. vkaryl
    Member
    Posted 9 years ago #

    You should list on paper what you want to accomplish:

    1. What graphics you will need, where to get them, what program you will use to make them.

    2. What "look" you want - how much space around the graphic and title, underlines? That sort of thing.

    3. Name the classes you will use: one for each different graphic; one for titles generally. (Note that you CANNOT use "id", you must use "class" as there will be more than one of each: id is a SINGULAR page element!)

    Etc. Once you've laid it out visually, then you can start on accruing the graphics. When you have all of them, then you edit the style.css file, similar to what the site you like has done.

    Second the motion on FF and the web dev toolbar: you almost cannot accomplish stuff like this without it. Unless you have an extremely intuitive grasp of css.

  7. marq
    Member
    Posted 9 years ago #

    I have all the images, I have an image for each cat on my current blog, and they are all named the cat. This is a pluging/hack on b2evo

    So I will make the get the css going...

    After I do that, where to I put the

    <div class="entry <?php the_category(); ?>" id="post-<?php the_ID(); ?>">
    <div class="entryContent">

    Thanks a lot guys...

  8. moshu
    Member
    Posted 9 years ago #

    A quick search for "category image plugin" here on the forum could make miracles :)
    http://search.wordpress.org/category+image+plugin

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.