Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Style each post differently by category


  #1  
Old Dec 29, 2010, 10:41 AM
lisyan
 
9 posts · Dec 2010
Hi!

I'm trying to reach my 'ideal template' using atahualpa. The most important need I have is to mark all the post of certain category with a distinctive background color.

I found this article which suggest to use the post_class PHP function.

I tried to add this in ATO--->Style/edit Center Column---> The Loop
before </div><!-- / Post -->

PHP Code:
<div id="post-39" class="post post-39 category-8 category-test logged-in"
and then in CSS/HTML Insert
Code:
.category-test {background: #00ff00; border: 1px solid #84aac4;}

but with no result...do you have some suggestions?
thanks thanks =)
  #2  
Old Dec 29, 2010, 01:47 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
since all the posts have a category class like 'category-uncategorized', why not use that

HTML Code:
div.category-uncategorized {background-color: blue;}
div.category-announcements {background-color: yellow;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 12, 2011 at 06:29 AM.
  #3  
Old Dec 29, 2010, 03:43 PM
lisyan
 
9 posts · Dec 2010
thanks for your reply juggledad!

Surely I'm doing something wrong ...
I tried adding " div.category-announcements {background-color: yellow;} " in CSS Inserts but
nothing happened =(
Did you mean that using div.category-name php code is not necessary?
  #4  
Old Dec 29, 2010, 04:42 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You need to use the names of your categories
No you don't need to add anythingng.

View your page, theview the source and you should be able to find your category names.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Dec 30, 2010, 05:08 AM
lisyan
 
9 posts · Dec 2010
ouch! It works!
but only in the category page view.
What I need is to have different post background only in the front-page.. uhm,
  #6  
Old Dec 30, 2010, 05:53 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What is the URL?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Jan 10, 2011, 06:04 PM
lisyan
 
9 posts · Dec 2010
Quote:
Originally Posted by juggledad
What is the URL?
here the homepage, and it doesn't work ( http://yupyup.altervista.org
and here there's the category page, where the "div.category-name" works perfectly: http://yupyup.altervista.org/?cat=8

hmmm strange... maybe I've to do this via php? with 'if is front page'?

thanks and sorry for the late reply =))
  #8  
Old Jan 10, 2011, 06:20 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You have code that is changing the front page from a single column to multiple columns. That code is not putting the category type of the <div> for the posts. You need to fix that for it to work.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 11, 2011 at 06:30 PM.
  #9  
Old Jan 11, 2011, 05:50 PM
lisyan
 
9 posts · Dec 2010
Quote:
Originally Posted by juggledad
You have code that is changing the front age from a single column to multiple columns. That code is not putting the category type of the <div> for the posts. You need to fix that for it to work.
ok, I've now added this in the LOOP

<div class="post_footer">
<p class="postmetadata"> <?php the_category(', ') ?>
</div>

but the problem persists.. hmmm
  #10  
Old Jan 11, 2011, 06:32 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Did you look at a generated page to see how atahualpa named the category classes?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jan 11, 2011, 06:45 PM
lisyan
 
9 posts · Dec 2010
I think I get lost...
  #12  
Old Jan 11, 2011, 07:27 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
The class name needs to be 'category-yourcategoryname' so the CSS can be applied. You are not creating that type of class name in your code.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Jan 12, 2011, 05:17 AM
lisyan
 
9 posts · Dec 2010
I tried adding this in the Loop: <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

But the result is this: http://yupyup.altervista.org/ and no css effect.
  #14  
Old Jan 12, 2011, 05:32 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you are creating a mess for yourself. here is one of your posts
HTML Code:
<div id="new_central_pos_30"> 
	<div class="post_footer">
		<p class="postmetadata">
			<a href="http://yupyup.altervista.org/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a> 
	</div>
	<div class="post-headline">		
		<h2><a href="http://yupyup.altervista.org/?p=50" rel="bookmark" title="Permanent Link to ARAYA">ARAYA</a></h2>	
	</div>
	<div class="post-byline">
		Jan 10th, 2011, <img src="http://yupyup.altervista.org/wp-content/themes/atahualpa353/images/icons/comment-gray.gif" alt="" /> 
		<a href="http://yupyup.altervista.org/?p=50#respond" class="comments-link"  title="Comment on ARAYA">Commenta</a>
	</div>
 	<p>De Quincey was oppressed by debt for most of his adult life; along with his opium addiction, debt was one of the primary constraints of his existence.[15] He pursued journalism as the one way available to him to pay his bills; and without financial need it is an open question how much writing <span style="color:#777"> &rarr; <a href="http://yupyup.altervista.org/?p=50">Read+ </a></span>[...]

	<div id="post-50" class="post-50 post type-post hentry category-uncategorized">

<!-- / Post -->

	</div>
you are missing the closing </p>
you are missing a closing</div>
you have the content of the post before the <div> for the post
and who knows what else

Custom changes like this to the theme are really beyond the scope of the forum. If you are unsure about how to do detail customization and how php/css work, you might want to put a post in the Customization, Design, Programming... section and see if you can hire some one to help you out.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Jan 12, 2011, 12:23 PM
lisyan
 
9 posts · Dec 2010
I feel sorry.
But I just used the code found here: http://forum.bytesforall.com/showthread.php?t=4220
with a small change to have only the three column part.

What you saw (that huge mess ) happened when I added
" div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> ". Now,moved away that code, the homepage looks normal.

Anyway, considering the errors you reported, maybe there are problem with that code?


thanks and sorry for my ignorance =)
  #16  
Old Jan 21, 2011, 07:03 PM
Tamara-IT's Avatar
Tamara-IT
 
41 posts · Jan 2011
Italy
Hello,
I had the same question and tried to add
Code:
div.category-NAME {background-color: yellow;}
in my CSS inserts. It did not work.
I then inserted a SPACE between "div" and the dot...
Code:
div .category-NAME {background-color: yellow;}
and I had my colored background.

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] style some links differently... Jeff G Center area post/pages 9 Aug 7, 2010 09:48 AM
Style differently the active (just clicked) link in Categories and other widgets ymf Sidebars & Widgets 2 Mar 3, 2010 02:58 PM
[SOLVED] Style one image differently to others chair Atahualpa 3 Wordpress theme 2 Jul 27, 2009 02:19 AM
Style widget content differently to bulleted text perdox808 Header configuration & styling 1 Apr 11, 2009 06:03 PM
Format a "particular" Post differently Shepherd Jim Post-Kicker, -Byline & -Footer 1 Mar 23, 2009 02:41 PM


All times are GMT -6. The time now is 08:25 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.