How to add background color to news titles on homepage in nopCommerce

Many developers / web designers are always looking to improve or add something new in the website layout / design that makes the content of the site stand out. nopCommerce homepage (out of the box) offers 3 latest news posts on the homepage. Adding some background color to the titles will certainly make it look more attractive and it will easily catch your customer's attention.

nopCommerce already offers a great modern theme that has been designed to keep up with the latest designing trend. But, there is always some room for improvement or change. Today, we will go over the process of adding background color to news titles on homepage in nopCommerce.

This is the default layout / design of the homepage news posts:





In order to add background color, open the stylesheet of your default theme:
Nop.Web/Themes/DefaultClean/Content/css/styles.css





In your "styles.css", find this:

Now, lets separate it first like this so that any changes that we are making to news title does not affect anything else on the website.

Now, simply add your styling to the news-title class as per your requirements. In this example, we are using "skyblue" color and 300px width like this:

That's all - Now save changed and see the result on your homepage. It should look something like this:




A copy of this article is also available on Arvixe Blog.