Мы в твиттере Мы в телеграме!

Провеббер » DataLife Engine » DLE хаки » Разная ширина контента на разных страницах

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?
Обращайся к нам в ЛС группы Вконтакте.

Разная ширина контента на разных страницах

Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Разная ширина контента на разных страницах.

Думаю у многих была такая ситуация, что на главной странице нужно задать определённую ширину контента, например 500px.
Для этого создавали примерно такую схему:
<div style="width:500px;">
{info}
{content}
</div>

Способ хороший, но у него есть один большой минус - ширина контента меняется во всех разделах сайта: профиль, полная новость и т.д.

Для того что бы что-то исправить, например в fullstory.tpl добавляли ещё один div:
<div style="width:850px;">
контент
</div>

Не очень удобно, правда?

Есть способ гораздо проще и в этом нам помогут дополнительные теги.

Задача:
Контент на главной странице должен занимать 500px в ширину, остаток 460px для других нужд.
Но при этом контент в других разделах должен занимать всё пространство 960px.

Решение:
1. Для начала удалим
<ul class='dle-content'></ul>
который постоянно появляется в коде.
Для этого откроем файл index.php в корне сайта и найдём строку:
$tpl->set ( '{content}', "<ul class='dle-content'>" . $tpl->result['content'] . "</ul>" );

И удаляем вместе с кавычками и точками:
"<ul class='dle-content'>" .
. "</ul>"

По сути это нам от этого ни холодно ни жарко. Просто меня это бесит когда класс dle-content появляется в коде.

2. А теперь переходим к делу. Все действия происходят в main.tpl
Совершить задуманное нам помогут теги [aviable=раздел][/aviable] и [not-aviable=раздел][/not-aviable]

Описание первого тега:


Описание второго тега:


Думаю вы уже поняли что мы будем делать)

Вот список всех разделов:


3. Для того что бы наш контент имел ширину 500px мы заключим его в div:
<div style="width:500px;">
{info}
{content}
</div>

4. Но это заставит и другие разделы изменить ширину на 500px.
Что бы этого не произошло мы заключим его в тег [aviable=main][/aviable]:
[aviable=main]
<div style="width:585px;">
{info}
{content}
</div>
[/aviable]

Этот код означает, что наш контент шириной в 500px, вернее даже не так, а весь контент будет отображаться только на главной странице и больше нигде. Т.е если вы зайдёте в новость или в профиль то ночего не увидете - пусто. Проблема однако.

5. Напишем ещё один код пониже:
[not-aviable=main]
{info}
{content}
[/not-aviable]

Этот код означает, что наш контент в полном размере 960px, вернее даже не так, а весь контент не будет отображаться только на главной странице и всё.

В итоге мы получили:
[aviable=main]
<div style="width:500px;">
{info}
{content}
</div>
[/aviable]

[not-aviable=main]
{info}
{content}
[/not-aviable]


Простыми словами:
На главной странице колонка с темами будет шириной в 500px, а во всех остальных разделах контент останется оригинальным 960px.

Задача решена)


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

Надеюсь кому-то эта статья поможет)


Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных


-3
Просмотры: 4 638 :: Комментарии (7) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1werty1001

  • 25 декабря 2013 14:38
  • Регистрация: 17.10.2010
  • Был(а) онлайн: 10.10.2015
  • Комментариев: 51
  • -1
1. В оригинальной версии дле нет такого кода, есть div#dle-content и кстати он там не просто так
2. Делается все проще
<div class="content[aviable=main] main[/aviable]">
{info}
{content}
</div>
и в стилях прописывается ширина для класса .main, (которая будет только на главной) и для класса .content (для всех остальных страниц).

--------------------

#2Sander

  • 27 декабря 2013 04:22
  • Регистрация: 19.02.2010
  • Был(а) онлайн: 20.04.2021
  • Комментариев: 327
  • -1
Проведу аналогию с автомобилем.
- Как сделать, чтобы в таврии сзади легко умещалось 4 упитанных человека?
- Берем таврию и запихиваем на зад сидение от ролс-ройса.

Представили, как эта сидушка будет торчать по бокам? Вот то же самое будет и с шаблоном по данной инструкции. Или существование сайдбара априори не рассматривается?

--------------------

#3G-3p

  • 27 декабря 2013 11:51
  • Регистрация: 11.12.2013
  • Был(а) онлайн: 25.06.2016
  • Комментариев: 83
  • -1
Sander,
Что-то я не понял, а где что торчит?

Sander,
Я с Вами не спорю - это так на заметку.
Вы человек со стажем и я прошу объяснить почему мой вариант не проходит и покажите как правильно.

#4D0Gmatist

  • 28 декабря 2013 00:49
  • Регистрация: 28.07.2012
  • Был(а) онлайн: 24.06.2021
  • Комментариев: 291
  • -1
Всё чухня ... на создаёте переделок движка и патом при переходи на следующую v.DLE опять лапатить

да я не спорю есть модули и хаки которые по любому приходится переписывать и адаптировать (в некоторых случаях) ... но такие веще как class и id style лучше делать в шаблоне
к примеру

<div class="[not-aviable=lastcomments]CommForm[/not-aviable][
aviable=lastcomments]allCommForm[/aviable]">

для комментариев в посте - CommForm
для просмотров всех комментариев - allCommForm

<div class="[aviable=main]mainContent[/aviable][aviable=showf
ull]showfullContent[/showfull][not-aviable=main|showfull]all
Content[/not-aviable]">

для главной страницы - mainContent
для просмотра поста - showfullContent
для остальных страниц - allContent

а так же полезно многим попрактиковаться в

@media (min-width:1201px){
    .класс{}
    .класс2{}
    и т.д.
}

классы, которые будут применяться толь ка если окно браузера 1201px и больше

@media (max-width:1200px){
    .класс{}
    .класс2{}
    и т.д.
}

классы, которые будут применяться толь ка если окно браузера 1200px и меньше

--------------------

#5G-3p

  • 28 декабря 2013 01:23
  • Регистрация: 11.12.2013
  • Был(а) онлайн: 25.06.2016
  • Комментариев: 83
  • -1
D0Gmatist,
Или я тупой, или лыжи не едут (риторический вопрос)

У меня ничего из этих всех вариантов не работает, кроме моего dash
[aviable=main]
<div style="width:500px;">
{info}
{content}
</div>
[/aviable]

[not-aviable=main]
{info}
{content}
[/not-aviable]

#6redissx

  • 28 декабря 2013 10:52
  • Регистрация: 12.09.2010
  • Был(а) онлайн: 29.02.2024
  • Комментариев: 113
  • -1
G-3p, просто у тебя видимо стили стили "перебиваются". задавай приоритет.
сам пользуюсь и как выше писали с классом и с дублированием, как у тебя, когда как удобнее.

вот с одного моего работающего сайта

<div id="content"[aviable=showfull] class="fullfix"[/aviable]>
{info}
{content}
</div>


#content {margin-top:20px; padding:0 20px; float:right; width:740px;}
.fullfix {float:none !important; width:100% !important;}


--------------------

#7G-3p

  • 28 декабря 2013 13:43
  • Регистрация: 11.12.2013
  • Был(а) онлайн: 25.06.2016
  • Комментариев: 83
  • 0
redissx,
Спс, понял. Работает норм, только пришлось #content переименовать)
Теперь думаю как же на своём сайте сделать, если и так и так можно.
<div id="content"[aviable=showfull] class="fullfix"[/aviable]>
{info}
{content}
</div>


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

Немного подумал и решил:
Пока буду по своему т.к мне нужно задать размер только для главной страницы да и проще он на мое субъективное мнение)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Архив новостей
Декабрь 2024 (10)
Ноябрь 2024 (9)
Октябрь 2024 (169)
Сентябрь 2024 (13)
Август 2024 (60)
Июль 2024 (12)

Последние комментарии: