код html/php/css, отвечающий за создание колонок посредством панели управления в Joomla

  • 71 Ответов
  • 1920 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

dariusii

  • ***
  • 75
  • 0
Существует, как минимум, два определения понятию "колонки": через div и CSS, и через уже готовые шаблоны (protostar etc) и настройки материалов (или в настройках меню) в самой cms Joomla. Эти два определения, может, по сути и одинаковы, но если искать в инете вот так: Joomla 3 число колонок "css", то наткнемся либо на настройки в cms, либо на прямую работу с div class=блаблабла и CSS.

Проблема в чем! начал искать, как самому создавать шаблон, и наткнулся вот на такую статью: Как сделать шаблон с нуля для CMS Joomla. Все вроде бы хорошо, но есть один затык - после создания шаблона, как в том блоге, статьи не выводятся колонками. Ни на главной, ни из меню. То есть, когда настраиваем число колонок выводимых материалов, ничего не происходит. При этом, если производить другие настройки (вывод имени автора, даты итд), то все ок - дата создания, автор - все это выводится.
Сам код у этой блоггерши :) примерно таков:
HTML
Спойлер
[свернуть]
CSS
Спойлер
[свернуть]

Долго не хотел создавать эту тему. Наверное, ужас, да? Но как-то нужно начинать, а искать самому решение - каша получается.
CSS переделал немного. У нее было ограничение ширины страницы. сделал ширину 100%, вместо пиксельной величины. Ну и не большая рихтовка цвета. Прошу не убивать, а помочь. Ее шаблон каким-то образом прибивает возможность создания нескольких колонок в блоке "content". Сравнивал с protostar, что бы как-то исправить момент, но не смог разобраться.
« Последнее редактирование: 03.04.2016, 16:12:07 от dariusii »

*

Taatshi

  • *****
  • 4779
  • 452
Так колонки надо с помощью CSS формировать. Вот Вам для начала - дальше, думаю, сообразите.

Код: css
/***** blog columns *****/

.cols-1 {
    display: block;
    float: none !important;
    margin: 0 !important;
}

.cols-2 .column-1 {
    width: 43%;
    float: left;
}

.cols-2 .column-2 {
    width: 43%;
    float: right;
    margin: 0
}

.cols-3 .column-1 {
    float: left;
    width: 33%;
   
   
}

.cols-3 .column-2 {
    float: left;
    width: 33%;
    padding-left:1%;
   
}

.cols-3 .column-3 {
    float: right;
    width: 32%;
   
   
}

.cols-4 .column-1
{
        width:24%;
        float:left;
}

.cols-4 .column-2
{
        width:24%;
        padding-left:1%;
        float:left;
}

.cols-4 .column-3
{
        width:24%;
        padding-left:1%;
        float:left
}

.cols-4 .column-4
{
        width:25%;
        float:right
}

span.row-separator {display:block; clear:both;}
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3  /  ОТЗЫВЫ 
Минимальная ставка за платные услуги 1000 рэ Связь: telegram - Taatshi, почта - Taatshi на яндексе.

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Если колонки идут так:



…то вообще просто.

Код: html4strict
<div class="cols col-2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="cols col-3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="cols col-4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>


Код: css
.cols {
font-size:0;
vertical-align:top;
display:inline-block;
float:none;
}
.cols > div{
font-size:14px;
vertical-align:top;
display:inline-block;
float:none;
}
.cols > .col-2{
width:50%;
}
.cols > .col-3{
width:33.33%;
}
.cols > .col-4{
width:25%;
}
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
Это-то понятно. Почему и говорил про:
"Существует, как минимум, два определения понятию "колонки": через div и CSS, и через уже готовые шаблоны (protostar etc) и настройки материалов (или в настройках меню) в самой cms Joomla."

Нахреначить колонок от руки, используя ливы и CSS - дело не хитрое. Но вопрос-то, как меняется число этих самых колонок не при помощи создания оных за счет вбивания штимов в индекс пыхпых, а какая часть кода отвечает за послушание cms системе. Код-то дополнительный в index.php не добавляется, если мы меняем что в админке :)

А так - так эдак я вообще откажусь от Joomla и начну делать так, как выше предложили :) Смысл использовать cms/бегать по ее менюшкам и галочки переключать, как в винде, если можно тупо поправлять html/cms, что бы менять число столбцов)))
« Последнее редактирование: 03.04.2016, 20:55:08 от dariusii »

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Вы зто не можете сделать? ^-^

Код: php
<div class="cols col-<?php echo $this->columns; ?>">
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
Было:
Код
<div id="content<?php echo $contentwidth; ?>">
 
<jdoc:include type="message" />
  
<jdoc:include type="component"  style="xhtml" />
  </div>

Получается, что надо так:
Код
<div id="content<?php echo $contentwidth; ?>">
<div class="cols col-<?php echo $this->columns; ?>">
 
<jdoc:include type="message" />
  
<jdoc:include type="component"  style="xhtml" />
</div>
  </div>
реакции 0.

Блин. В том же protostar никаких намеков о колнках... как же они там тогда появляются?
« Последнее редактирование: 03.04.2016, 21:16:34 от dariusii »

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
А зачем вы индексный файл шаблона ломаете? О_о
templates\шаблон\html\com_content\category\blog.php нужен.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Taatshi

  • *****
  • 4779
  • 452
Эта разметка идет не на уровне шаблона а на уровне макета компонента. Компонент задает классы, а вот ширина колонок и их расположение задаются - тадааам! - стилями CSS. Кто Вам сказал, что в протостаре этого нет? Все там есть.
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3  /  ОТЗЫВЫ 
Минимальная ставка за платные услуги 1000 рэ Связь: telegram - Taatshi, почта - Taatshi на яндексе.

*

dariusii

  • ***
  • 75
  • 0
В css-то есть. Вот и ищу эти самые "уровни макета компонента", почему они не работают. Значит, в protostar, в index.php какой-то портал для этого дела есть, но где? вижу лишь блоки позиций и там как бы не все понятно.

В protostar блоку контента присвоена позиция, а у меня как бы позиция для контена отсутствует вообще. но в голове не укладывается, почему в protostar position-3 имеет какой-то такой чудный приоритет, что именно туда скидывается материал.
в protostar:
Код
<div id="content<?php echo $contentwidth; ?>">
<jdoc:include type="modules" name="position-3" style="xhtml" />
 
<jdoc:include type="message" />
  
<jdoc:include type="component"  style="xhtml" />
<jdoc:include type="modules" name="position-2" style="none" />
  </div>  
И, соответственно, создавать новую сущность в виде новой позиции, с именем от балды - толку. Это же надо где-то в cms указать, что такая-то позиция есть позиция контента?

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Я же написал какой файл править.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
Я же написал какой файл править.
Взял этот /var/www/$mysite/components/com_content/views/category/tmpl/blog.php файл

скинул в templates/$maintemplate/html/com_content/category/

Но куда в нем добавлять/изменять на <div class="cols col-<?php echo $this->columns; ?>"> ?

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
74-я строка начало цикла элементов блога:

Код: php
<?php foreach ($this->intro_items as $key => &$item) : ?>

Перед ней добавить

Код: php
<div class="cols col-<?php echo $this->columns; ?>">

91-я, конец:
Код: php
<?php endforeach; ?>

После неё добавить

Код: html4strict
</div>
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
такой кусок
Спойлер
[свернуть]

глухо. перепроверил, рисуются ли материалы колонками, в настройках cms - да. 4 колонки забито. на сайте же все строками.
intro_items - это как бы для вводного текста. у меня он есть в материалах. опция "вводный текст" включена. вводный текст материалов вижу. всякие ссылки "подробнее". переходить по ним на full материал. но все продолжает рисоваться строками. колонки не образуются.
в опциях Joomla (материалы) - количество колонок:2.
только введения:20.
во всю ширину:1
настройки меню не перекрывают эти опции. там поля пусты.
ищу, но и сравниваю с protostar (отдельный сайт) - там те же опции, но колонки рисуются. блин..

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Код: php
<?php if (!empty($this->intro_items)) : ?>
<div class="cols col-<?php echo $this->columns; ?>">
<?php foreach ($this->intro_items as $key => &$item) : ?>
<article class="item">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
</article>
<?php endforeach; ?>
</div>
<?php endif; ?>
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
без изменений, вообще.
Файл целиком, а то там у вас конечная строка была 91. может еще что изменилось в 3.4.8 и, соответственно, исходный файл.
« Последнее редактирование: 03.04.2016, 23:34:45 от dariusii »

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Что выводит
<?php var_dump($this->columns); ?>
Попробуйте, например, четыре колонки в админке указать.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
string(1) "4"

Этот "string(1) "4" на всех материалах, кроме первого. вроде как, так и должно быть. в опциях первый не подпадает под тему колонок.

Есть еще вот такой вариант /var/www/white/templates/beez3/html/com_content/category/blog.php Этот шаблон шел с Joomla и при нем колонки работают (если применить сей шаблон))) )
Спойлер
[свернуть]

А, если этот файл закинуть в мой шаблон/html/com_content/category/, то нет.
« Последнее редактирование: 04.04.2016, 00:20:32 от dariusii »

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Если возвращает string(1) "4", значит всё верно я в последнем примере написал. Вы css-стили, что я в начале темы написал, добавили?
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Бля, я там накосячил в стилях же!

Код: css
.cols {
font-size:0;
vertical-align:top;
display:inline-block;
float:none;
}
.cols > div{
font-size:14px;
vertical-align:top;
display:inline-block;
float:none;
}
.cols.col-2 > *{
width:50%;
}
.cols.col-3 > *{
width:33.33%;
}
.cols.col-4 > *{
width:25%;
}

Вот так будет работать.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
Заиграла песня, но все пошло в одну колонку - материал идет строками, но сжат на 1/4 от контент блока. сменил на float:left - все равно, в одну колонку.
наверное, какие-то родители так указывают. поищу.

огромное спасибо. прямо, как халява какая-то. столько хинтов вы мне выложили. я даже не надеялся уже. честно.

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Незачто. float:left везде уберите. display:inline-block выстраивает блоки в строки. font-size:0 для родителя нужен, чтобы убрать пробел между блоками. Можно без этого фикса, но тогда в php-файле нужно блоки <article> склеить: <article></article><article></article>...
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
float в none вернул.
посмотрел на родителей. максимум - margin'ы и padding'и, погоды не делающие там. margin и padding в 0, у *
Код
* {
margin:0;
padding:0;
}
из родичей, только body, но там только текст. указатели.
и один черт все в одну колонку.
http://estaf.org/white/index.php/oborudovanie

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Откуда это взялось items-row cols-3 row-0 row-fluid clearfix, если вы поставили такой код:

Код: php
<?php if (!empty($this->intro_items)) : ?>
<div class="cols col-<?php echo $this->columns; ?>">
<?php foreach ($this->intro_items as $key => &$item) : ?>
<article class="item">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
</article>
<?php endforeach; ?>
</div>
<?php endif; ?>
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
А я вернул все в оригинал, лишь добавив <div class="cols col-<?php echo $this->columns; ?>">
иначе, видны лишь заголовки. которые то же идут одной колонкой.

/upd
укоротил

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Там стили перебиваются. Добавьте div:

Код: php
<?php if (!empty($this->intro_items)) : ?>
<div class="cols col-<?php echo $this->columns; ?>">
<?php foreach ($this->intro_items as $key => &$item) : ?>
<div>
<article class="item">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
</article>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
да. заработало. осталось margin в right вбить, наверное, и все. склееные колонки.

Код
.cols > div{
font-size:14px;
vertical-align:top;
display:inline-block;
margin-right:30px;

супер :)

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Код: css
.cols > *{
margin:0 !important;
}

.cols > * > *{
padding:20px;
}
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
Чтобы не выводило много колонок, когда мало элементов (как сейчас у вас на сайте), можно предварительно посчитать их (count($this->item)) и добавить в условие. Типа, «если колонок задумано четыре, а элементов всего два, то выводить в две колонки».
Ещё совет: чтобы сделать отступ только между колонок, но не по краям блога, нужно общему родителю добавить отрицательный отступ. Вроде всё. Дальше сами.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

dariusii

  • ***
  • 75
  • 0
Одна неприятная вещицца. нижний ряд ползет влево http://estaf.org/white/index.php/oborudovanie
Посмотрел инспектором мозиллы - идентичные стили. что у блоков верхних рядов, что у нижнего. Хрень какая-то.
Смещается всегда только нижний ряд. При чем, самый первый блок нижнего ряда не смещается, что как бы намекает на то, что проблема не из-за внешних сущностей, что уровнем выше, или "рядом".

*

Shustry

  • *****
  • 6426
  • 733
  • Рисую дизайны
А зачем вы в пикселях ширину блоков прописали? Нижний ряд как раз никуда не ползёт. Это верхние ряды растягиваются искусственно на всю ширину контейнера. У вас блоки по 300 пикселей, а контейнер ни разу не 900 ^-^. Либо зафиксируйте это значение, либо ширину блоков 33.33%
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!