How to create image 'categories' on Blogum theme?
-
Hello,
I’ve been using the Blogum theme for a while but recently bought the CSS upgrade and now want to have my categories as images, rather than the standard written labels, and still have them as working links to each category page. I cant find any better way to explain this, what I mean is instead of writing out the categories, and making it into a menu on my blog, how can I display a category image instead of the category name in the link to the category archive? like this site – here?
I hope I don’t need a WP plugin because I only have the CSS stylesheet feature on a WP.com. I would truly appreciate any help, I am pretty new to CSS coding, so if someone can help me with the code, I would really appreciate it! Thank you!
The blog I need help with is: (visible only to logged in users)
-
I’ll take you word for the fact that somewhere on the main page of that site is at least one image that goes to a category.
Add images to a text widget and then link them to your categories. Doing it through CSS would be way more difficult.
-
@ thesacredpath thank you for your recommendation, now that you mention it, I’ve seen a couple blogs who had a list of category images on their right side bar. But I am more interested in having a row of category images (which are really hand written words in jpeg format) in a menu like fashion right under my blog header image. Do you know if I would be able to do this through a text widget? if not, what would be the best way to go about this?
Thank you so much for taking your time to respond to my question!
-
This gets complex to have images as links at the top. You either have to do them as a string and then do an HTML image map, or you have to put them all into a text widget, linked to the categories and then you have to use absolute positioning to get that text widget up and into the header area. It isn’t rocket science, but it can be a bit of work. You also then have to stylize that widget so that everything will be aligned and spaced correctly. Anytime you add a category or take one away, or change a name, you have to go back in and adjust the CSS and such.
If you want to do that we can help.
-
One thing that’s not clear to me: you want them as a separate line below the “Author’s Corner” and “Contact” tabs, or you want to change those tabs (and their dropdowns) to images too?
-
@ thesacredpath sorry for the sudden silence, it took a while for me to post my text widget categories. But I’m finally done, and now I’m trying to follow your second suggestion as to positioning the text widget CSS to fit under the header area. The only trouble is how do I do this?
You can see my 4 menu option on the top right side of my blog hilitehead.com, they are:
about
contests
sponsors
contactAll 4 images are linked to their pages, but what codes do I need to use in the stylesheet move them up, in a row, below the Hi.Lite.Head banner?
Also if you could help me with another thing, I recently placed a solid color .wrapper behind my blog content (I actually saw an old forum of yours and followed your suggestions to do this), and things appear fine in terms of the padding spacing on the sides, except when I open a post and go down to the comment section, the comment box on the bottom seems to stretch out to the full width of the wrapper, leaving no padding space. I probably did something wrong with in the code, here is what copied into the stylesheet:
.wrapper {
background:#FFE87C;
width:990px;
}.sidebar {
padding-right:20px;
}#header-image img {
margin-left:20px;
margin-right:20px;
}.search-form-holder {
margin-right:20px;
}Thank you!
-
@panaghiotisadam – I’ve changed my mind about some of my category menus, so now I’m just trying to place the 4 text widget categories: about, contests, sponsors, and contact below the Hi.Lite.Head banner area. These 4 categories wont have dropdowns, I would appreciate any help if you know what I can do next? I’ve described everything above, thanks!
-
OK, this does it and moves the search box up above the header since there is no room for it below with the side of your menu items. Also, the images are inserted into the text widget, but they are not linked to the pages. The code is incomplete. See down below the CSS for how the code should look. You will have to correct the code in the text widget.
#text-12 { border-top: medium none; left: 45px; position: absolute; top: 200px; width: 990px; } #text-12 .widget-body { width: 990px; }.search-form-holder {
position: absolute;
right: 15px;
top: 20px;
}`Make your links in your text widget like this, and do not have a “return” in between them. Make them like they are all one long line with a space in between each code bit.
<a href="PAGE URL"><img src="IMAGE URL"></a>Basically you want the following (hopefully this comes out looking like one long line with spaces in between).
<a href="PAGE URL"><img src="IMAGE URL"></a> <a href="PAGE URL"><img src="IMAGE URL"></a> <a href="PAGE URL"><img src="IMAGE URL"></a> <a href="PAGE URL"><img src="IMAGE URL"></a> -
Not sure how the last bit of CSS ended up not within the code tags, so here.
.search-form-holder { position: absolute; right: 15px; top: 20px; } -
Thank you so much, the code worked.
Do you know how I can transform my 3 column template into 2 like this bloghere? It must be doable since that blog is on a Blogum theme like mine. Its just that I don’t find too many uses for my h6 tag, so I might as well get the left column to become a row, like a header on top of my contents. Do you know the code for this? Thank you!
-
Hi there,
Could you please help me out a bit by explaining this process further. I’m a total beginner at CSS and am struggling to get your above tip to work on my site. I have created a text widget with the img/links to particular categories. How come only one of my 5 uploaded images are appearing and why are they appearing over the menu? Have I missed something?
Any help would be really appreciated – let me know if I need to explain further.
Thanks so much – http://www.lilyholiday.net
- The topic ‘How to create image 'categories' on Blogum theme?’ is closed to new replies.
WordPress.com Forums 