Community Forums › Forums › Archived Forums › Design Tips and Tricks › Custom background for different categories
- This topic has 12 replies, 3 voices, and was last updated 10 years ago by Lauren @ OnceCoupled.
-
AuthorPosts
-
April 21, 2014 at 1:13 pm #101702sinounMember
I've been racking my brain on how to figure something out. I need to be able to customize the background for each category in the Lifestyle theme. This is the code I set up for one of the categories:
.category-1 { background: url('http://consciousfloat.com/wp-content/uploads/2014/04/bg-blue.jpg'); }
Here is the link to that category where the background doesn't change: http://consciousfloat.com/category/sleep-and-dreams/
I'm able to do it for the individual posts, but I can't figure out what I'm doing wrong for the categories. Does anyone have any insight? Your help is much appreciated!
Thanks,
http://consciousfloat.com
SinounApril 21, 2014 at 4:14 pm #101730AnitaKeymasterBrad Dalton has a tutorial on this. Scroll down to Changing Background on Category Archive Pages.
Love coffee, chocolate and my Bella!
April 21, 2014 at 4:44 pm #101731sinounMemberYup, this is the EXACT tutorial I used when I attempted this. You can even see my comment at the end of the post! 🙂 Like I said, the changes aren't working for me. What am I doing wrong?
Sinoun
April 21, 2014 at 4:57 pm #101736AnitaKeymasterAre you sure that the category is actually 1? Go to the Categories and hover over the name and see what it is.
Love coffee, chocolate and my Bella!
April 21, 2014 at 5:00 pm #101737sinounMemberYes, it is number 1. I know how to find the category number -- it's how I'm able to customize the rest of the site. All my other custom CSS is working just fine, it's just not working for the category pages.
April 21, 2014 at 5:02 pm #101738sinounMemberIf you take a look at the site, you'll see I'm able to achieve all the color changes to exactly what I need. I just can't figure out why the categories aren't changing. http://consciousfloat.com/
Thanks for your help!
April 21, 2014 at 5:07 pm #101739AnitaKeymasterI really don't understand now what you are trying to achieve here. You want the background color of the entire page a different color? What background do you want a different color.
Love coffee, chocolate and my Bella!
April 21, 2014 at 5:11 pm #101740sinounMemberI need to simply change the background for each category archive page.
For example, take this category archive page: http://consciousfloat.com/category/sleep-and-dreams/
I would like for it to have the same background as each post that is in that category. I was able to achieve that by using the Custom Body Class field. Here is an example: http://consciousfloat.com/why-do-we-sleep/
Do you notice how the individual blog post page is consistent with the theme style color? That is all I want for the category archive.
Sinoun
April 21, 2014 at 5:15 pm #101742AnitaKeymasterWhich again leads me back to my original question - go to your categories and make sure that you have the correct category numbers for your code for that page.
Love coffee, chocolate and my Bella!
April 21, 2014 at 5:25 pm #101745sinounMemberI PROMISE you it is the right category number! Like I said before, I already set up multiple custom CSS code for all my categories (if you look at the site, you'll be able to see). If I didn't use the correct category number, my custom changes wouldn't have worked. That is why I'm stumped as to why I can't figure out the category background changes after following to the T what to do in the tutorial.
I attached a screenshot for you so you can gain confidence that I know how to find a category number: http://arp194.com/wp-content/uploads/2014/04/duh.jpg
April 21, 2014 at 5:57 pm #101749Lauren @ OnceCoupledMemberIf you use your browser inspector, the background you want it to display is correctly coded, as you're aware. The problem is that it is being overridden by the
body.custom-background
selector. For whatever reason, your actual category posts have the same.category-1
andbody.custom-background
URLs, while your category archive has different ones. Try using a more specific selector for the category archive pages, like.archive.category-1
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 21, 2014 at 6:04 pm #101752sinounMemberOMG Lauren! You're frackin' awesome!! It did the trick!! This is exactly what I needed -- I knew I was missing something tiny, just couldn't figure it out. I tried so many variations, but .archive.category-1 worked. Yayyy 🙂
Thank you so much!
SinounApril 21, 2014 at 6:27 pm #101761Lauren @ OnceCoupledMemberLots of practice. 🙂 Glad it was something simple!
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
-
AuthorPosts
- The topic ‘Custom background for different categories’ is closed to new replies.