Форум русской поддержки Joomla!® CMS
07.12.2016, 20:29:56 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2 3  Все   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 1358 раз)
0 Пользователей и 1 Гость смотрят эту тему.
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« : 03.04.2016, 14:40:24 »

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

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

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

Репутация: +430/-3
Online Online

Пол: Женский
Сообщений: 4718

Мама, я снова верстал во сне...


« Ответ #1 : 03.04.2016, 16:55:28 »

Так колонки надо с помощью 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;}
 
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #2 : 03.04.2016, 18:04:40 »

Если колонки идут так:



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

Код
<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>


Код
.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%;
}
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #3 : 03.04.2016, 18:54:57 »

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

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

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #4 : 03.04.2016, 19:05:28 »

Вы зто не можете сделать? Smiley

Код
<div class="cols col-<?php echo $this->columns; ?>">
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #5 : 03.04.2016, 20:07:47 »

Было:
Код:
<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, 20:16:34 от dariusii » Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #6 : 03.04.2016, 20:24:08 »

А зачем вы индексный файл шаблона ломаете? О_о
templates\шаблон\html\com_content\category\blog.php нужен.
Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Online Online

Пол: Женский
Сообщений: 4718

Мама, я снова верстал во сне...


« Ответ #7 : 03.04.2016, 20:27:30 »

Эта разметка идет не на уровне шаблона а на уровне макета компонента. Компонент задает классы, а вот ширина колонок и их расположение задаются - тадааам! - стилями CSS. Кто Вам сказал, что в протостаре этого нет? Все там есть.
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #8 : 03.04.2016, 21:08:48 »

В 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
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #9 : 03.04.2016, 21:10:41 »

Я же написал какой файл править.
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #10 : 03.04.2016, 21:41:39 »

Я же написал какой файл править.
Взял этот /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
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #11 : 03.04.2016, 21:49:21 »

74-я строка начало цикла элементов блога:

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

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

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

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

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

Код
</div>
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #12 : 03.04.2016, 22:15:29 »

такой кусок
Показать текстовый блок

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #13 : 03.04.2016, 22:22:32 »

Код
<?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; ?>
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #14 : 03.04.2016, 22:31:25 »

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #15 : 03.04.2016, 22:41:34 »

Что выводит
<?php var_dump($this->columns); ?>
Попробуйте, например, четыре колонки в админке указать.
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #16 : 03.04.2016, 22:45:41 »

string(1) "4"

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

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

А, если этот файл закинуть в мой шаблон/html/com_content/category/, то нет.
« Последнее редактирование: 03.04.2016, 23:20:32 от dariusii » Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #17 : 03.04.2016, 23:22:05 »

Если возвращает string(1) "4", значит всё верно я в последнем примере написал. Вы css-стили, что я в начале темы написал, добавили?
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #18 : 03.04.2016, 23:24:13 »

Бля, я там накосячил в стилях же!

Код
.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%;
}

Вот так будет работать.
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #19 : 03.04.2016, 23:40:21 »

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

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #20 : 03.04.2016, 23:45:49 »

Незачто. float:left везде уберите. display:inline-block выстраивает блоки в строки. font-size:0 для родителя нужен, чтобы убрать пробел между блоками. Можно без этого фикса, но тогда в php-файле нужно блоки <article> склеить: <article></article><article></article>...
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #21 : 03.04.2016, 23:54:30 »

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #22 : 03.04.2016, 23:56:57 »

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

Код
<?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; ?>
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #23 : 03.04.2016, 23:59:05 »

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

/upd
укоротил
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #24 : 04.04.2016, 00:05:48 »

Там стили перебиваются. Добавьте div:

Код
<?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; ?>
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #25 : 04.04.2016, 00:13:02 »

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

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

супер Azn
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #26 : 04.04.2016, 00:17:50 »

Код
.cols > *{
margin:0 !important;
}
 
.cols > * > *{
padding:20px;
}
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #27 : 04.04.2016, 00:28:17 »

Чтобы не выводило много колонок, когда мало элементов (как сейчас у вас на сайте), можно предварительно посчитать их (count($this->item)) и добавить в условие. Типа, «если колонок задумано четыре, а элементов всего два, то выводить в две колонки».
Ещё совет: чтобы сделать отступ только между колонок, но не по краям блога, нужно общему родителю добавить отрицательный отступ. Вроде всё. Дальше сами.
Записан
dariusii
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 72


« Ответ #28 : 04.04.2016, 16:21:49 »

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #29 : 04.04.2016, 16:26:46 »

А зачем вы в пикселях ширину блоков прописали? Нижний ряд как раз никуда не ползёт. Это верхние ряды растягиваются искусственно на всю ширину контейнера. У вас блоки по 300 пикселей, а контейнер ни разу не 900 Smiley. Либо зафиксируйте это значение, либо ширину блоков 33.33%
Записан
Страниц: [1] 2 3  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet