How To Make Simple Changes So Category Links Stand Out

The Category Module automatically alphabetizes the category names on your blog. By adding a bit of code to the category name you can customize the order seen on your blog. In this post, we'll talk about other ways you can customize your category list. Let's get started! 

Find Your Categories

All your categories are listed in one place. Click on the Blogs tab, then the name of the blog. Select Settings, then Categories to view all your categories. Next to the category name, click on Edit to make any changes. 

Change Category Order

To update the order add <!--1--> before the name of the category. Save your changes and then go to the next category and add the same thing but change the number to 2.  This will sort your categories to be in a specific order. 

Category Names: 

<!--1-->BBQ Books
<!--2-->BBQ Tools
<!--3-->Favorite BBQ Recipes
<!--4-->BBQ Failures

Customize The Links

You can make your links stand out further by customizing the font, color, and style. Using our Design Lab themes, you quickly update the sidebar links on the Style tab. If you are using one of our other design themes, you can use the Custom CSS tab customize. We can show you how. 

Design Lab

From your Design tab, click on the Styles tab. On the right, click on the Sidebar. Here you can customize the color and font of the links to match your branding. 

Quick Tip: If you don't see the Custom CSS tab you will need to upgrade to an Unlimited Plan or higher.

You can bold or italicize your category links with some CSS code. From the Design tab, click on Custom CSS. Paste in the CSS code below and click on Save Changes. 

Bold: 

.module-categories .module-content a { font-weight: bold; }

Italic

.module-categories .module-content a { font-style: italic; }

Bold and Italic

.module-categories .module-content a { font-weight: bold;font-style: italic; }

Other Themes

Using our other pre-made themes, Magazine theme, or Theme Builder, you can add Custom CSS to change the color and style. From the Design tab, click on Custom CSS. You can add the CSS below to customize.

.module-categories .module-content a { color: #003366; font-weight: bold; font-style: italic; }

color: #003366; - Update the hex value to the hex value of the color you want. You can also delete it if you like the current color on your blog.

font-weight: bold; - This will bold the text. You can delete it if you don't want the text to be bold. There are other font weights you can try. Other options are bold, bolder, lighter, and number. Play with the different weights and see what you like the best. 

font-style: italic; - This will italicize your text. You can delete it if you don't want the text to be italic. Another option is oblique. Oblique is a form of type that slants slightly to the right.

Once you are done making the changes, click on Save Changes and view your blog! After you've customized your categories link, share your blog in our comments. We would love to see what you have done!