Не нравятся результаты поиска? Попробуйте другой поиск!

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

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

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

вопрос

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

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

скриншот kinogo

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

скриншот куда надо добавить

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

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

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

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

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

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

Юзер

r2r2r2 - 2018-03-2827 апреля 2019 15:36 - #72150

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

Показать / Скрыть текст

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

Показать / Скрыть текст

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

Юзер

r2r2r2 - 2018-03-2827 апреля 2019 19:26 - #72153

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

Юзер

144

ТeraMoune - 2018-03-2827 апреля 2019 19:53 - #72155

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

Юзер

588

deadluk - 2018-03-2827 апреля 2019 20:12 - #72156

*удалить*

Юзер

588

deadluk - 2018-03-2827 апреля 2019 20:13 - #72157

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

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

Юзер

r2r2r2 - 2018-03-2827 апреля 2019 22:39 - #72163

спасибо. сейчас именно таким образом и исследую элемент на 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 - 2018-03-2827 апреля 2019 22:44 - #72164

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

Юзер

588

deadluk - 2018-03-2827 апреля 2019 22:48 - #72165

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

Юзер

588

deadluk - 2018-03-2828 апреля 2019 00:19 - #72166

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

тут

.sort > li.asc a:after, .sort > li.desc a:after

используйте для конвертации base64 или поставьте картинку через фон.

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 02:05 - #72168

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 02:23 - #72169

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

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

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

Юзер

588

deadluk - 2018-03-2828 апреля 2019 02:58 - #72171

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

.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 - 2018-03-2828 апреля 2019 04:07 - #72173

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

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 04:08 - #72174

и также изменения в .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 - 2018-03-2828 апреля 2019 04:10 - #72175

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

Юзер

588

deadluk - 2018-03-2828 апреля 2019 04:12 - #72176

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 04:19 - #72177

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

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 04:22 - #72178

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 04:28 - #72180

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 04:26 - #72179

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

Юзер

588

deadluk - 2018-03-2828 апреля 2019 09:39 - #72181

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 16:46 - #72183

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

Юзер

588

deadluk - 2018-03-2828 апреля 2019 09:52 - #72182

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 16:50 - #72184

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 16:52 - #72185

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

Юзер

588

deadluk - 2018-03-2828 апреля 2019 20:25 - #72186

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

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

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

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

или

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 22:42 - #72189

спасибо.
возможно я что-то опять упустил, но обрамил текст "сортировать по" в теги с именем 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 - 2018-03-2828 апреля 2019 22:45 - #72190

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

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

Юзер

r2r2r2 - 2018-03-2828 апреля 2019 22:47 - #72191

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

Юзер

588

deadluk - 2018-03-2829 апреля 2019 00:03 - #72192

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

Юзер

r2r2r2 - 2018-03-2829 апреля 2019 02:21 - #72195

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

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