Блоки слева, левые и правые блоки - Мод для стандартной темы

0
3976

14.04.2019
Темы

Для тех кто не умеет или кому лениво сделать самому, предлагаю два варианта модификации шаблона SLAED CMS 6.2 Pro. Просто блоки слева или одновременное отображение левых и правых блоков. Инструкция предназначена для тех кто уже редактировал стандартную тему оформления CMS.

Блоки слева
Чтобы получить блоки слева - в temlates/default/css редактируем файл theme.css.

Находим:

/* Content */
#container { padding: 50px 370px 50px 0; height: 1%; }
#content { float: left; width: 100%; }
#content img { width:auto; height:auto; max-width:initial; }
#sidebar { float: right; width: 320px; padding-left: 50px; margin-right: -370px; }
#sidebar .block:last-child { margin-bottom: 0; }

и заменяем на:

/* Content */
#container { padding: 50px 0 50px 370px; height: 1%; }
#content { float: left; width: 100%; }
#content img { width:auto; height:auto; max-width:initial; }
#sidebar { float: left; width: 320px; padding-right: 50px; margin-left: -370px; }
#sidebar .block:last-child { margin-bottom: 0; }

в temlates/default редактируем файл index.html.

Находим:

<div id="container" class="clrfix">
		&lt;section id=&quot;content&quot;&gt;
			{%BLOCKS message%}
			{%BLOCKS center%}
			{%MODULE%}
			{%BLOCKS down%}
		&lt;/section&gt;
		&lt;aside id=&quot;sidebar&quot;&gt;
			{%BLOCKS right%}
		&lt;/aside&gt;
	&lt;/div&gt;[/code]
и заменяем на:  
[code=xml]<div id="container" class="clrfix">
		&lt;aside id=&quot;sidebar&quot;&gt;
			{%BLOCKS left%}
		&lt;/aside&gt;
		&lt;section id=&quot;content&quot;&gt;
			{%BLOCKS message%}
			{%BLOCKS center%}
			{%MODULE%}
			{%BLOCKS down%}
		&lt;/section&gt;
	&lt;/div&gt;[/code]
[b]Левые и правые блоки одновременно[/b]  
Немного уменьшил ширину блоков и сделал масштабируемую вёрстку. Желающие могут выставить требуемую фиксированную ширину страницы вместо стандартных 1100 px.  
Чтобы получить блоки слева и справа - в [b]temlates/default/css[/b] редактируем файл [b]theme.css[/b].  
Находим:  
[code=css]/* Content */
#container { padding: 50px 370px 50px 0; height: 1%; }
#content { float: left; width: 100%; }
#content img { width:auto; height:auto; max-width:initial; }
#sidebar { float: right; width: 320px; padding-left: 50px; margin-right: -370px; }
#sidebar .block:last-child { margin-bottom: 0; }

и заменяем на:

/* Content */
#container { padding: 20px 270px 20px 270px; height: 1%; }
#content { float: left; width: 100%; }
#content img { width:auto; height:auto; max-width:initial; }
#sidebarl { float: left; width: 250px; padding-right: 0px; margin-left: -270px; }
#sidebarl .block:last-child { margin-bottom: 0; }
#sidebarr { float: right; width: 250px; padding-left: 0px; margin-right: -270px; }
#sidebarr .block:last-child { margin-bottom: 0; }

Находим:

.wrp { margin: 0 auto; width: 1100px; }

и заменяем на:

.wrp { margin: 0 auto; width: 90%; }

в temlates/default редактируем файл index.html
Находим:
[code=xml]<div id="container" class="clrfix">

		&lt;section id=&quot;content&quot;&gt;
			{%BLOCKS message%}
			{%BLOCKS center%}
			{%MODULE%}
			{%BLOCKS down%}
		&lt;/section&gt;
		&lt;aside id=&quot;sidebar&quot;&gt;
			{%BLOCKS right%}
		&lt;/aside&gt;
	&lt;/div&gt;[/code]

и заменяем на:
[code=xml]<div id="container" class="clrfix">

		&lt;aside id=&quot;sidebarl&quot;&gt;
			{%BLOCKS left%}
		&lt;/aside&gt;
		&lt;section id=&quot;content&quot;&gt;
			{%BLOCKS message%}
			{%BLOCKS center%}
			{%MODULE%}
			{%BLOCKS down%}
		&lt;/section&gt;
		&lt;aside id=&quot;sidebarr&quot;&gt;
			{%BLOCKS right%}
		&lt;/aside&gt;
	&lt;/div&gt;[/code]

Не забываем после этого выставить позицию Слева или Справа для нужных блоков в админке. Ну, и, конечно же, жмём Ctrl + F5 на своих страницах.

В архиве каталога файлов проекта лежит уже модифицированная, стандартная тема: Мод для стандартной темы - Блоки слева, левые и правые блоки.

Блоки слева, левые и правые блоки - Мод для стандартной темы

Комментарии