Topics

All topics

Travelling agency site: Styling guidelines

Theme

The site is styled with a new theme, called Vacation.

Templates

 The site is based on two page templates – Base and Travelling Agency.
  • Base template is based on the Base.master file. 
    The template consists of two placeholders that fill the entire screen (100% width) and are coming from the master file. The names of these placeholders are Header and Main. Header holds one 100% wide placeholder, which holds another placeholder, assigned with the .row-holder class. This is where you place the Navigation widget.
  • Travelling Agency is based on the Base template.
    • This template is used by all pages.
    The template inherits the Header and the Main placeholders.
    The Header placeholder contains a Navigation widget and three JavaScript files - jQuery reference, navigation toggling script, and a script that handles routing.

Layout elements

Templates contain layout element 100% with another layout element inside it that is assigned the .row-holder class. This class is used to arrange the content in the center of the screen:

The rows on the website are grey and white. By default, they are white – they have background #fff. That is why, in the code above, you apply grey color by setting the .row-gray class to layout element 100%.

Widgets

Content on the site is displayed by following widgets:

  • Content block for image header, H2 titles, Footer, the buttons for All countries, All restaurants, and All hotels, social icons, content type basic information.
  • Dynamic content widgets for Countries, Hotels, Cities, Festivals, and Restaurants.

Responsive design 

The responsive design rules are in the CSS file.

Detail pages

For each content type, there is a List page and a Details page where you drop the corresponding dynamic module widgets.

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?