Custom themes and templates: Customize the widgets through CSS

After you have defined the Custom themes and templates: Create the layout template for the home page and Custom themes and templates: Add content to the widgets for the Telerik Hospital home page, you must customize the appearance of the controls. To do this, you must open the main.css file located in folder ~/App_Data/Sitefinity/WebsiteTemplates/Hospital/App_themes/Green/Global/. By appending the next lines of CSS code to the file, you improve the look of the news, events and image gallery blocks:

The code above is just an example and you can modify it to meet your scenario's requirements.

The widgets on the home page look fine-tuned. The final result of the tutorial looks like the following screenshot:

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?