Многие, кто разворачивал на своей странице блог категорий на 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 пикселей.

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


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