protostar-module-map-thumb

The Protostar template for Joomla 3 will expand or reduce the main content area depending on the existence of side columns. This is true for a Static or Fluid layout.

Position-3 sits above the content and position-2 sits below the content. Position-7 is located on the right side of the content and position-8 is located on the left side.

Position-7 is placed into <div id="aside">.

Position-8 is placed into <div id="sidebar">.

Position-3, the content, and position-2 are placed into <main id="content">.

What is placed into the content area depends on the Menu Item Type.

If modules have been assigned to either position-7 or position-8 or both positions, the width of the content area will accommodate for the column area. This flexible layout is accomplished with a series of PHP if elseif statements in the index.php for the Protostar template.

Static Layout vs Fluid Layout

Static Layout

When Protostar is assigned a Static layout in the Template Manager settings, the main content area and the positions of position-2, position-3, position-7 and position-8 are all are placed inside the containing <div class="row-fluid">. This div is assigned a width of 100% of its container <div class="container">. The class="container" is given a width of 940px and 20px of padding with the default settings.

Fluid Layout

When Protostar is assigned a Fluid layout in the Template Manager settings, the main content area and the positions of position-2, position-3, position-7 and position-8 are all are placed inside the containing <div class="row-fluid">. This div is assigned a width of 100% of its container which <div class="container-fluid">. The container-fluid takes up the entire width of the screen or browser window.

Content width and position locations for narrow screens

The change in width for the content area will not occur on narrow screens. When the screen or browser window is less than 767 px the two columns and the main content area each have a width of 100% of the containing element. This is done with @media styles in template.css.

The two side columns will lose their float, become 100% wide and stack above or below the main content area. If there are modules in position-8, the <div id="sidebar"> will stack above the main content area. If there are modules in position-7, the <div id="aside"> will stack below the main content area.

Content area width for wide screens

Modules assigned only to position-7

content-2colL

If there are one or more modules assigned to position-7 but no modules assigned to position-8, the content area is defined as:

<main id="content" class="span9">.

On large screens, the width of the main content area is 74.47% of its container. The content area has a margin-left of 0.

The left column, <div id="aside"> has the width of 23.40% of its container. This column has a margin-left of 2.13%.

Modules assigned only to position-8

content-2colR

If there are one or more modules assigned to position-8 but no modules assigned to position-7, the content area is defined as:

<main id="content" class="span9">.

On large screens, the width of the main content area is 74.47% of the container of <div class="row-fluid">. The main content area has a margin-left of 2.13%.

The right column, <div id="sidebar"> has the width of 23.40% of <div class="row-fluid">. The right column has a margin-left of 0.

Modules assigned to position-7 and position-8

content-3col

If there are one or more modules assigned to position-7 and one or more modules assigned to position-8, the content area is defined as:

<main id="content" class="span6">.

On large screens, the width of the main content area is 48.94% of the container of <div class="row-fluid">. The main content area has a margin-left of 2.13%.

The left column, <div id="sidebar"> has the width of 23.40% of <div class="row-fluid">. The left column has a margin-left of 0.

The right column, <div id="aside"> has the width of 23.40% of <div class="row-fluid">. the right column has a margin-left of 2.13%.

No Modules assigned to position-7 or position-8

content-1col

If there are no modules assigned to position-7 and no modules assigned to position-8, the content area is defined as:

<main id="content" class="span12">.

On large screens, the width of the main content area is 100% of the container of <div class="row-fluid">. The content area has a margin-left of 0.

 


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.