Version
Sitefinity 14.4 Sitefinity 14.3 Sitefinity 14.2 Sitefinity 14.1 Sitefinity 14.0 Sitefinity 13.3

Topics

All topics

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.

Want to learn more?

Sign up for our free beginner training. Boost your credentials through advanced courses and certification.
Register for Sitefinity training and certification.

Was this article helpful?