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.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. 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?