static option

The settings for the Protostar Template allow for two options regarding the layout for the page, Static or Fluid.

These settings mainly affect the appearance on wide screens such as computer monitors and many laptops. These are the default settings, and can be manipulated by creating overriding styles in a custom stylesheet. On narrow screens, there essentially is no difference between the two settings.

The settings are found under Extensions -> Templates. Open the protostar template in the Style column.

Static Setting for Protostar

The Static setting for Protostar will place the main content of your webpages into <div class="container">. The stylesheet of template.css will target styles for that class, .container. With the Static setting, you can have set widths for the content and side columns for larger screens.

static widescreen

Screens wider than 980px

With the Static setting, the container will not be as wide as the monitor screen with widths over 980px. The container will have a fixed with of 980px (includes padding). The right, center and left columns will have a fixed width that is a percentage of the width of the container.

Screens between 979px and 768px in width

For narrower screens, such as on tablets, the container will reduce in width as a percentage of the screen size, but will maintain the three columns. In some cases the space around the container will still be visible, though some tablets will eliminate it. The right column, the center column and the left column will also have a width that is a percentage of the size of the container.

As the screen narrows, the three columns will reduce in width.

Screens less that 768px

For very narrow screens, the container will fill the screen. There is no space around the container. The columns will all have a width of 100% of the screen and will stack on top of each other.

Fluid Setting for Protostar

The Fluid setting for Protostar will place the main content for you webpages into <div class="container-fluid">. The stylesheet of template.css will target the class of .container-fluid with the appropriate styles. With the Fluid setting, you need to design your content and modules to appear well at any width.

fluid screen

Screens wider than 980px

With the Fluid setting, the content will fill the screen. There is no space around the container. Each column is a percentage of the width of the screen. As the screen narrows, the columns will also narrow.

Screens between 979px and 768px in width

With the Fluid setting, the content will still fill the screen. Each column is a percentage of the width of the screen. As the screen narrows, the columns will also narrow.

Screens less that 768px

For very narrow screens, the container will still fill the screen. The columns will all have a width of 100% of the screen and will stack on top of each other.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.