Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как добавить 2 слова около сортировки на главной?

Как добавить 2 слова около сортировки на главной?


     27.04.2019    Общие вопросы по вёрстке, Шаблоны (TPL)    924

вопрос
здравствуйте. не могу добавить 2 слова левее сортировки в шаблоне kinogo в этом месте, чтобы подписать её (добавить "Сортировать по:")

требуется сделать как на сайте kinogo.by


соответственно задача - просто вставить 2 слова на главной левее сортировки, тут


и поменять синий курсор в сортировке на свою картинку, например на эту как на kinogo.by
https://kinogo.by/templates/Kinogo/dleimages/desc.gif

пожалуйста, подскажите, как это сделать?
ковырял main.tpl, filter.tpl, все разделы с сортировкой, но в верстке не силен и именно в этом пункте не получается добавить.
если я правильно понял на kinogo выделен отдельный стиль mini, и вывод идет как-то через него.

пожалуйста, подскажите какой вставить код чтобы добавить эти 2 слова?
если надо могу прикрепить main.tpl или какие-то другие .tpl-файлы и css

помогите пожалуйста.
заранее спасибо

Ответа пока нет


31 комментарий

r2r2r2
Юзер

r2r2r2 - 27 апреля 2019 15:36 -

и поменять синий курсор в сортировке на свою картинку, например на эту как на kinogo.by
https://kinogo.by/templates/Kinogo/dleimages/desc.gif
< имел ввиду синий маркер, который выводится при выборе какого-то вида сортировки.
стандартный этот


но надо заменить на свой, любой. по своей картинке. например этот

и чтобы выводило не справа, а слева

r2r2r2
Юзер

r2r2r2 - 27 апреля 2019 19:26 -

я понимаю, что возможно это простые вопросы, но был бы очень признателен за помощь.
вывод данных в dle своеобразный, с tpl трудно понять где выводить и через что.
буду очень благодарен за подсказку и помощь

ТeraMoune
Юзер

ТeraMoune - 27 апреля 2019 19:53 -

Чувак, ты абсолютно прав, посмотри как это сделано в стандартных шаблонах. Удачи. В других движках и того замудрённей вывод, шаблоны в движке очень понятны да и всё понятно если кукушка работает.

deadluk
Юзер

deadluk - 27 апреля 2019 20:12 -

*удалить*

deadluk
Юзер

deadluk - 27 апреля 2019 20:13 -

используйте nootepad++ посмотрите как называется строка в загруженном коде страницы: в программе nootepad++ , ctrl + f > вкладка поиск по файлам > выбираем нужную папку, а дальше пишем нужный текст, который можно посмотреть в "devtools" нажав в браузере (для Chrome) ctrl + shift + i найдите нужное значение и попробуйте поискать это значение по файлам двига. иногда нужно проявить смекалку, не все значения в файлах двига записаны так же, как и в "коде страницы", пробуйте искать часть имени файла/строки и т.п.

попробуйте, если не получится, то поможем) понимаю, что сложно, но попробуйте, а там уже видно будет)

r2r2r2
Юзер

r2r2r2 - 27 апреля 2019 22:39 -

спасибо. сейчас именно таким образом и исследую элемент на kinogo.by.

вывод двух слов в этом блоке
<form name="news_set_sort" id="news_set_sort" method="post" action="">Сортировать по: <img src="/templates/Kinogo/dleimages/desc.gif" alt="">

через total commander попытался найти файл с упоминанием news_set_sort, только в \engine\modules\functions.php

а далее php, насколько понимаю, в котором уж совсем не разбираюсь (если правильно понял. вот кусок кода)

$sort = "<form name=\"news_set_sort\" id=\"news_set_sort\" method=\"post\"><ul class=\"sort\">" . implode( $sort ) . "</ul>";


я пробовал вставить эти 2 слова в main.tpl как и обычный текст, вот сюда:

<div class="content">
{info}<div class="funct">{speedbar}</div>
[aviable=cat]{include file="engine/modules/catface.php"}[/aviable]
[aviable=main]  <div class="funct">
    <h1 style="text-align: center;font-size:17px;">
      новинки кино 2016 смотреть бесплатно киного
    </h1>
  </div>[/aviable]
[sort]<!--noindex--><div class="funct" style="text-align:center;">{sort}</div><!--/noindex-->[/sort]
{content} 
<div class="pomoshnik"></div>
</div>

<div class="leftblok_contener">
<div class="dmobile" style="padding: 7px 20px;position: relative;border-bottom: 1px solid #3f413f;"><i style="font-size:15px;"> Меню киного</i></div>

<!--filter-->


соответственно между [sort] и [/sort], но ничего кроме позиционирования между лево/право/центр не вышло.

подскажите, может надо между [sort] и [/sort] что-то добавить?
но что?
чтобы поменять маркер и добавить эти 2 слова.
и еще желательно добавить палочки между словами, как на kinogo.

подскажите пожалуйста. правда не разобрался. шаблон уже перелопатил не один раз

r2r2r2
Юзер

r2r2r2 - 27 апреля 2019 22:44 -

понимаю что наверняка вопросы простые, но с версткой правда не очень получается

deadluk
Юзер

deadluk - 27 апреля 2019 22:48 -

линк на сайт в ЛС, посмотрим

deadluk
Юзер

deadluk - 28 апреля 2019 00:19 -


Вам нужно сделать так. для удобства используйте notepad++. как я помню, картинка сортировки(та синяя стрелка) её ищите в стилях, точнее в style.min.css в Вашем случае

тут
.sort > li.asc a:after, .sort > li.desc a:after
используйте для конвертации base64 или поставьте картинку через фон.

не забывайте пользоваться поисковиками, там полно инфы по html/css


r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 02:05 -


большое спасибо. через этот параметр поменял картинку в style.min.css
но как передвинуть её влево от слова (сейчас она справа от выбранной сортировки) и добавить 2 слова "Сортировать по:"?

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 02:23 -


извиняюсь, не получилось исправить комментарий сразу.
поменял картинку и добавил эти 2 слова.

огромное спасибо.
но как передвинуть маркер влево (сейчас он стоит справа), добавить между сортировкой разделитель ( " | " )?
и как задать отступы между словами?

это все что хотел уточнить в сортировке. с этим правда не разобрался

deadluk
Юзер

deadluk - 28 апреля 2019 02:58 -

в стилях найти:

.sort > li {
    margin: 0 0 0 3%;
}


добавить ниже:

.sort > li::before {
  content: "";
  width: 1px; height: 20px;
  position: absolute;
  border-left: 1px solid #fff;
  margin-left: -10px;
}
.sort > li:first-child::before {
  border-left: none;
}


как сменить положение маркера?

найти:

.sort > li.asc a:after, .sort > li.desc a:after {
    content: "";
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAsBAMAAACj90TiAAAAG1BMV…lpFKWoSpEKp0Dlb6SvG2jY4Fka4tw4PqbEsDNTcb8gn/d4LPQHQDdjhblbAAAAAElFTkSuQmCC);
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 11px;
    -webkit-background-size: 6px auto;
    background-size: 6px auto;
    margin: -1px 0 0 .4em;
}


и заменить
:after
на
:before


в поисковике вбейте:
margin: ; css что делает


а теперь, открываем любой учебник по css и конечно же html и учим базу) там всё это есть, берите по каждому элементу, и читайте, в последствии запоминайте их особенности.

Вы взялись править дизайн, так начните осваивать, а не спрашивать. просто (можно методом тыка, смотрите изменение после Ваших действий, сохраняйте, делайте резервы, во многих редакторах текста, можно возвращать сделанные изменения одним кликом) пробуйте, смотрите курсы(не все они несут идеал, но для начала пойдёт, дальше уже сами будете понимать, что Вам нужно, а что не нужно). мой вариант нельзя назвать верным решением, оно просто есть. и Вы же не думайте, что я или кто-то ещё будет разжёвывать каждый вопрос, который встанет поперёк.

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 04:07 -


спасибо. действительно стараюсь изучать css, но многие задачи получаются крайне нетиповыми чаще всего. к сожалению я не верстаю

добавил все, что вы перечислили, но изменений не возникло.
обновил данные на хостинге несколько раз с файлами, проверил в нескольких браузерах.
делал в styles.css.
подскажите, возможно надо еще что-то добавить?

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 04:08 -


и также изменения в .sort > li.asc a:after, .sort > li.desc a:after {
на
.sort > li.asc a:before, .sort > li.desc a:before {

в .sort > li.asc a:after { background-position: 0 -11px; } также менял на a:before, но тоже самое

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 04:10 -

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

deadluk
Юзер

deadluk - 28 апреля 2019 04:12 -

очистить кэш браузера/сайта?

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 04:19 -

кэш сайта очистил. в браузере также
результат можете посмотреть по ссылке, почему-то ничего не изменилось

вообще из 3х css файлов styles.css изменениям почему-то с самого начала не подлежал.
изменяемые там данные на сайте просто не отображались
возможно я что-то не понял, но почему-то так

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 04:22 -

dle 12.0. последнюю 13.2 не использовал из-за несовместимости с некоторыми компонентами.
так безусловно использовал бы ее и если получится обновить компоненты обязательно обновлю версию, разумеется

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 04:28 -

правда я полагаю, что работа css и версия уж не должны быть между собой связаны. все версии стабильны в этом плане

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 04:26 -

изменения в styles.min.css вывелись моментально.
styles.css не реагирует (когда я менял другие параметры тоже самое было). или надо что-то добавить

deadluk
Юзер

deadluk - 28 апреля 2019 09:39 -

ну, как бы.. там и нужно было, я конечно мог это написать.. думал Вы догадаетесь) в прошлый раз, правки делались там же) поэтому стоило попробовать сделать их там и только потом идти к другим файлам (я же не могу знать, какие файлы у Вас подключены, а какие просто лежать рядом). styles.min.css -подключен, это сжатая версия стилей, логично предположить, что styles.css -не сжатая версия стилей и нет смысла подключать оба файла. (если не знали, теперь знаете).

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 16:46 -

да, действительно не знал что они могут быть неподключены.
в другом шаблоне работал и styles.css, поэтому думал что должны работать оба.
спасибо что уточнили это

deadluk
Юзер

deadluk - 28 апреля 2019 09:52 -

изначально (до Ваших правок в одном из них) они были одинаковыми, их различие было только в том, что один сжат, а другой нет.

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 16:50 -


абсолютно последний вопрос по этой теме. сколько не ковырял, так и не понял где это править
можно ли задать отступ между вставленным в main.tpl "Сортировать по:" и самой сортировкой?
отрегулировать отступы "Сортировать по:", или отступы сортировки сверху/снизу можно, выровнять слева или справа весь блок тоже, но как задать отступ между Сортировать по и самой сортировкой?
проще говоря чтобы сжать между ними расстояние, примерно как на kinogo или немного шире

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 16:52 -


не та картинка. извиняюсь
имел ввиду здесь

deadluk
Юзер

deadluk - 28 апреля 2019 20:25 -

да, обрамите текст в теги

<span class="sortc"></span>

и присвойте им класс с именем sortc. после, в стилях пропишите этот класс

.sortc { color: #777; margin: 0 -7px; }

или

.sortc { color: #777; margin-left: -7px; }

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 22:42 -

спасибо.
возможно я что-то опять упустил, но обрамил текст "сортировать по" в теги с именем sortc и попробовал добавить в стили поочередно два варианта.
почему-то ничего не изменилось. добавлял в main.tpl и styles.min.css

также попробовал обрамить еще и сортировку вместе со словами "сортировать по"
main.tpl, только "сортировать по"
https://i.imgur.com/VNh9Ubq.png

main.tpl, с сортировкой
https://i.imgur.com/ZcxWGqR.png

styles.min.css, попробовал оба варианта с " .sortc { "
https://i.imgur.com/bJSUUNM.png

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 22:45 -

кэш и куки обновил.

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

r2r2r2
Юзер

r2r2r2 - 28 апреля 2019 22:47 -

величина отступа сверху и снизу при этом не меняется, даже если менять значение margin в пикселях.
только если выставить 0px - отступов нет.
если 1 или 10 - одно и то же
как так

deadluk
Юзер

deadluk - 29 апреля 2019 00:03 -

смотрите через devtools, там причина почему такой отступ, код что я скинул -должен работать, пробуйте варианты, если обрамить что-то, кроме того, что я написал, результат будет другим и возможно тех селекторов не хватит, чтобы решить Вашу проблему, нужны и другим, попробуйте paddibg вместо margin..

r2r2r2
Юзер

r2r2r2 - 29 апреля 2019 02:21 -


кажется, что проблема возможна в этом месте
разделитель выведенный через border забирает пространство и слева, где он не выводится.
вероятно поэтому сдвинуть блок сортировки влева не получается?
более часа ковыряюсь, перепробовал все варианты, но так и не понял как сдвинуть

при этом если убираю разделитель вообще, то могу свести сортировку к словам "сортировать по" впритык
может дело в отступах разделителей?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх