Category Image

rdigenova · Member · Apr 4, 2016 at 9:30 pm
Copy link

Add topic to favorites
I’m trying to add an image to represent each category of my Devotions page. In particular I’m trying to add it to the Kidspirations category at http://godsladiesoftheword.org/category/devotions/kidspirations/. I’ve never used CSS but was referred to you by a Happiness Engineer…so please talk simply with me on what to do. He says it’s possible to do this with CSS.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 4, 2016 at 10:49 pm
Copy link
Hi there, do you have your image uploaded yet to your media library, and where are you wanting to add the image on Kidspirations.
rdigenova · Member · Apr 4, 2016 at 10:53 pm
Copy link
Yes the image is in my library and I’d like it beside the “Categories” heading, left side
thesacredpath · Member · Apr 5, 2016 at 11:22 pm
Copy link
Thanks for the clarification. I’m not sure what image you are wanting to use, but I assumed the one with the child and cat. We are sort of limited on things since if we make the image too large, it will end up putting a large gap between the header text and the content. This CSS fits the image into the height of the header text div and spaces the text over to the right beside the image.
```
.category-kidspirations .page-title {
    background: url("https://godsladiesoftheword.files.wordpress.com/2015/03/mark-10-152.jpg") no-repeat scroll left top;
    background-size: contain;
    padding-left: 80px;
}
```
We can make the height of the title div for that page a bit taller and make the image larger. You can try this as well.
```
.category-kidspirations .page-title {
    background: url("https://godsladiesoftheword.files.wordpress.com/2015/03/mark-10-152.jpg") no-repeat scroll left top;
    background-size: contain;
    padding-left: 150px;
    height: 100px;
}
```
Let me know your thoughts and we can go from there.
rdigenova · Member · Apr 5, 2016 at 11:33 pm
Copy link
Thank you…but how and where do I try it? You were right about the picture, good guess! :) Do I copy and paste these CSS into the description box of the edit category screen? Somewhere else?
thesacredpath · Member · Apr 6, 2016 at 12:28 am
Copy link
Oh sorry, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the CSS I gave above.
rdigenova · Member · Apr 6, 2016 at 2:45 pm
Copy link
The second version is spot on! Thank you! So to do that for other pages and different images, I can copy and paste the CSS you gave me with the adjusted category page name and image info?
thesacredpath · Member · Apr 6, 2016 at 7:21 pm
Copy link
Awesome, and yes. If your category names are multiple works, then the words for the category name will have a dash between them. Other than that, copy/paste and edit as necessary, and let me know if you have any problems.
rdigenova · Member · Apr 7, 2016 at 5:11 am
Copy link
So, I was able to copy, alter and paste and get the right image (love) for Dear Herry, Love Thumper, and even figured out how to resize it a little larger so the reader could see the tiny print…but it made the same image for both category pages…kidspirations and dear herry…any suggestions?
bhagwantmann1 · Member · Apr 7, 2016 at 5:26 am
Copy link
Here is the steps :

1 ) Install and activate the WPCustom Category Images plugin
2 ) Add images to your categories in the Admin interface
3) Update your theme to display the images on the category page

http://www.sukhbirsinghbadal.org/
thesacredpath · Member · Apr 7, 2016 at 9:03 pm
Copy link
@bhagwantmann1, we cannot install plugins at WordPress.com for security reasons.

The differences between WordPress.com and WordPress.org.
thesacredpath · Member · Apr 7, 2016 at 9:11 pm
Copy link
@rdigenova, in the CSS rule for Dear Herry, in addition to changing the category name in the CSS selector, you would need to change the URL in the background declaration within that rule. This would add the “love” image on that category page.
```
.category-dear-herry-love-thumper .page-title {
	background:url('https://godsladiesoftheword.files.wordpress.com/2015/03/love4.jpg') no-repeat scroll left top;
	background-size:contain;
	padding-left:150px;
	height:100px
}
```

No items found.