Постраничная навигация (Пагинация) в Материале

  • 14 Ответов
  • 439 Просмотров

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

*

Lok[i]

  • Новичок
  • *
  • 7
  • 0
Доброго времени суток
Прошу помочь решить проблему с постраничной навигацией в материале:
сейчас она имеет следующий вид :
Спойлер
[свернуть]
Избавился через Pagination.php от "страница х из у"
А привести в нормальный вид отображение не получается.
Хочу опустить постраничную навигацию под новость, и отображать ее не в виде меню, а нумерацией страниц.

Joomla 3.4.4
PHP 5.5

*

effrit

  • Группа развития
  • *****
  • 7443
  • 815
  • effrit.com

*

Lok[i]

  • Новичок
  • *
  • 7
  • 0
а она вам точно нужна?
ну. т.е вам именно 1 материал надо дробить на части, а не выводить несколько?
Вся затычка в том, что Фон шаблона цельной картинкой, и если не дробить статью, получается, что некрасиво отображается она на странице.
Если Вы подскажете альтернативный вариант - буду благодарен.

*

hmarno

  • Осваиваюсь на форуме
  • ***
  • 91
  • -1
Может Вы имеете в виду постраничная навигация в блоге категории? Тогда задайте стили CSS и все.
Можете взять стили с стандартного шаблона .pagination

Код
.pagination-list a{ color:#000;}
.pagination {
margin: 18px 0;
}
.pagination ul {
display: inline-block;
*display: inline;
*zoom: 1;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.pagination ul > li {
display: inline;
}
.pagination ul > li > a,
.pagination ul > li > span {
float: left;
padding: 4px 12px;
line-height: 18px;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: #f5f5f5;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
color: #999;
cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
color: #3db5f1;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
.pagination-large ul > li > a,
.pagination-large ul > li > span {
padding: 11px 19px;
font-size: 16.25px;
}
.pagination-large ul > li:first-child > a,
.pagination-large ul > li:first-child > span {
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.pagination-large ul > li:last-child > a,
.pagination-large ul > li:last-child > span {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}
.pagination-mini ul > li:first-child > a,
.pagination-mini ul > li:first-child > span,
.pagination-small ul > li:first-child > a,
.pagination-small ul > li:first-child > span {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
}
.pagination-mini ul > li:last-child > a,
.pagination-mini ul > li:last-child > span,
.pagination-small ul > li:last-child > a,
.pagination-small ul > li:last-child > span {
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-right-radius: 3px;
}
.pagination-small ul > li > a,
.pagination-small ul > li > span {
padding: 2px 10px;
font-size: 12px;
}
.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
padding: 0 6px;
font-size: 9.75px;
}

*

effrit

  • Группа развития
  • *****
  • 7443
  • 815
  • effrit.com
ну контент резать под кривой дизайн - это пусть для славного титаника )).
советую домучить шаблон, чтоб тянулся и людей не пугал.
тем более, что люди могут шрифт увеличить, например, и грабли все равно вылезут )

*

Lok[i]

  • Новичок
  • *
  • 7
  • 0
ну контент резать под кривой дизайн - это пусть для славного титаника )).
советую домучить шаблон, чтоб тянулся и людей не пугал.
тем более, что люди могут шрифт увеличить, например, и грабли все равно вылезут )
Знать бы еще как допилить шаблон, "сковыряный" артистиром (

*

Lok[i]

  • Новичок
  • *
  • 7
  • 0
Может Вы имеете в виду постраничная навигация в блоге категории? Тогда задайте стили CSS и все.
Можете взять стили с стандартного шаблона .pagination

Код
CSS не помогли (pagination перетянул с шаба) (
Уже начинаю думать, как по другому вывести новость порезаной.
.pagination-list a{ color:#000;}
.pagination {
margin: 18px 0;
}
.pagination ul {
display: inline-block;
*display: inline;
*zoom: 1;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.pagination ul > li {
display: inline;
}
.pagination ul > li > a,
.pagination ul > li > span {
float: left;
padding: 4px 12px;
line-height: 18px;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: #f5f5f5;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
color: #999;
cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
color: #3db5f1;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
.pagination-large ul > li > a,
.pagination-large ul > li > span {
padding: 11px 19px;
font-size: 16.25px;
}
.pagination-large ul > li:first-child > a,
.pagination-large ul > li:first-child > span {
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.pagination-large ul > li:last-child > a,
.pagination-large ul > li:last-child > span {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}
.pagination-mini ul > li:first-child > a,
.pagination-mini ul > li:first-child > span,
.pagination-small ul > li:first-child > a,
.pagination-small ul > li:first-child > span {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
}
.pagination-mini ul > li:last-child > a,
.pagination-mini ul > li:last-child > span,
.pagination-small ul > li:last-child > a,
.pagination-small ul > li:last-child > span {
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-right-radius: 3px;
}
.pagination-small ul > li > a,
.pagination-small ul > li > span {
padding: 2px 10px;
font-size: 12px;
}
.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
padding: 0 6px;
font-size: 9.75px;
}

*

effrit

  • Группа развития
  • *****
  • 7443
  • 815
  • effrit.com

*

Lok[i]

  • Новичок
  • *
  • 7
  • 0
артистер - это платный мрак.
возьмите какой-нить бесплатный шаблон от производителя, не варезный.

Надо поискать, что то двух колоночное) Может посоветуете у кого лучше искать?)

*

Missile

  • Завсегдатай
  • *****
  • 792
  • 79
background-position: 50% 0%; #закрепляем картинку по центру вверху
width: 100%; #заставляем картинку тянуться по ширине
height: auto; #можно вообще не указывать

Устанавливаете в свойствах body background желаемый цвет. Берёте картинку разрешением побольше, нижний край изящно затушёвываете этим же цветом, создавая мягкий переход. И всё. Как вариант - картинка с прозрачными краями в PNG или GIF.


*

Lok[i]

  • Новичок
  • *
  • 7
  • 0
спасибо, попробую

*

Apoca1ypto

  • Завсегдатай
  • *****
  • 712
  • 69
Прошу помочь решить проблему с постраничной навигацией в материале:
Плагин PageBreakMyJspace, как раз для разбивки материала на несколько страниц. Разбить текст можно с помощью редактора добавив название страниц для навигации.
Во время спора в Интернете Ваш оппонент приводит неопровержимые доказательства своей точки зрения? Не отчаивайтесь. До...тесь до орфографии.

*

Lok[i]

  • Новичок
  • *
  • 7
  • 0
Спасибо всем, я Олух...
Оказывается в настройках плагина "Разрыв Страницы" можно все сделать закладками....
Осталось только разобраться, как их продублировать вконец новости)

*

vik8458

  • Новичок
  • *
  • 3
  • 1
  • Вежливый Лось
Являюсь пользователем Joomla с 2010 года.
Ну как пользователем... Сайт в то время худо-бедно слепил. Какие проблемы возникают: решаю "методом перекрестного опыления".
Это аццкая помесь тыканий пальцем (что получится?), изучение различных опусов и активное "гугленье" с активным использованием кнопок "скопировать" - "вставить".

В общем, если по аналогии с машинами: я водитель, а не шофер.

Справлялся сам, в принципе. Но вот уже года три не могу победить пагинацию на сайте.

Торчала такая хреновина:
<<назад>>
1,
2,
3,
4,
5
<<вперед>>

т.е. вертикально и без всяких красивостей. На то время установил "пагинатор 3000" и успокоился. Однако сайтик вырос и пагинатор стал откровенно неудобен, особенно для работы с мобильных.

Думал: обновиться версия и будет усе хорошо.
Однако обновил до последней 3.6.5. и изменилось лишь то, что список страниц из вертикального стал горизонтальным.

Я уж и и гуглил и вставлял кода в соответствующие файлы, как пишут различного рода гуру. Но ничего не меняется.
Joomla ни грамма не реагирует на все, самые дикие эксперименты. Хоть вообще коды удаляй. Не пойму, в чем дело...
"Кто к нам с чем и зачем - тот от того и того..."
А. Невский.