Многие, кто разворачивал на своей странице блог категорий на Joomla, наверняка столкнулись с тем, что новость следующая вниз, ее заголовок, расположены слишком близко к концу новости предыдущей - маленький интервал. Увеличить этот интервал возможно с применением параметра padding с четырьмя аргументами. Как известно из CSS, первый аргумент padding - ширина внешнего верхнего поля, второй - ширина правого поля, третий - ширина нижнего поля, четвертый - ширина левого поля.  Очень важно, какой шаблон используется. В данной статье применяется шаблон protostar. Простой и лаконичный. Решение находится в файле /templates/protostar/css/template.css - CSS шаблона protostar. В начале там была такая конструкция:

 

.clearfix:before, 
.clearfix:after {
display: table;
content: "";
line-height: 0;
}

.clearfix:after {
clear: both;
}

 

Класс .clearfix.after отвечает за стиль в конце статьи, класс .claerfix.before за начало статьи. Конструкция задана так, что стиль определяется одинаково как для начала, так и для конца статьи. Я решил их разделить и изменить конструкцию следующим образом:

 

.clearfix:before {
display: table;
content: "";
line-height: 0;

}
.clearfix:after {
display: table;
content: "";
line-height: 0;
padding: 0px 0px 40px 0px;
}

.clearfix:before {
clear: both;
}

.clearfix:after {
clear: both;
}

 

Параметр "padding: 0px 0px 40px 0px;" задает ширину внешнего нижнего поля контейнера со статьей в 40 пикселей.

Добавить комментарий


Защитный код
Обновить