Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

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.

Back To Top