Веб Интегрируем bootstrap с сайтом dle, или много полезных фишек для молодых серверов

[enselerizer]

Всем привет!
Хочу поделиться своим опытом интеграции bootstrap'a в шаблоны DLE,
а так же показать несколько полезных приёмов на бутстрапе для начинающих игровых проектов.

Фишка 1: Делаем постраничную навигацию на bootstrap

У многих людей при создании кастомной панели навигации возникает вопрос:

А как присвоить стиль отдельно к каждой ссылке на страницу?

Спойлер: Решение (уровень сложности - 3 из 5)

Шаг 1 - лезем в bootstrap.css
Для начала откроем файл bootstrap.css, лежащий в папке css в дистрибутиве bootstrap'a.
Что бы было удобнее искать, заходим сюда и оставляем только галочки
Buttons и Button groups and dropdowns
(второе нужно, только если вы хотите сделать группу кнопок)

Ищем в bootstrap.css

.btn {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
 
  *zoom: 1;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #333333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #e6e6e6;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
 
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border: 1px solid #cccccc;
  *border: 0;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  *margin-left: .3em;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}

Видите, сколько писанины?
Копируем это в пустой файл .css, и изменяем .btn в начале на что угодно, например .ensnavbar.
Теперь вместо ".ensnavbar {" вставляем ".ensnavbar a {".
Таким образом мы применим стиль только к ссылкам (а значит, к каждой ссылке по-отдельности).

Шаг 2 - настраиваем стиль на кнопки при наведении, и на активные кнопки.
Пропустим несколько строк после нашего первого стиля.
Теперь пишем

.ensnavbar a:hover {
 
}

И между "{" и "}" вставляем содержимое ".ensnavbar a {" и "}".
После этого нам надо сделать так, что бы при наведении цвет был другим.
Ищем классы, отвечающие за цвет, например класс .btn-primary.
Копируем его содержимое (как мы уже поняли, содержимое - это то, что стоит между "{" и "}"), и вставляем в .ensnavbar a:hover {}, при том если там будет несколько одинаковых параметров с разными значениями, например background: #000000 и background: #111111, то надо заменить те, которые мы вставили ранее на те, что мы скопировали из класса с цветом.

Уже практически готово!
Теперь пропускаем несколько строк ниже, и пишем

.ensnavbar span {
 
}

Этим мы применим стиль к тэгу span, в который помещается номер текущей страницы и многоточие, если страниц много.

Вставляем в .ensnavbar span {} содержимое .ensnavbar a {}.
Теперь повторяем операцию со a:hover - подыскиваем себе класс цвета, я взял оранжевый (btn-warning), и вставляем содержимое этого класса в .ensnavbar span {}, заменяя старые параметры новыми.

Если вы так же хотите сделать кнопки другого размера, то во все 3 класса, которые мы сделали, копируем содержимое класса размера, например btn-mini, опят ь же заменяя старые параметры новыми.

Шаг 3 - Пихаем на сайт:
Для начала, сохраним наш файл .css, назовём его как хотим.
Теперь заливаем его на свой сервер (туда, где лежит сайт).
Заходим в админку DLE, список всех разделов --> шаблоны сайта.
Выбираем основной шаблон, в 99.9% случаев это main.tpl.
Находим так тег <head>, и после него на следующей строке пишем:

<link href="путь к вашему файлу .css" rel="stylesheet" media="screen">

Притом, если у вас фал лежит по адресу например "123.ru/navbar/file.css",
то путь к файлу должен иметь вид "navbar/file.css".




Так же, если у вас не подключён bootstrap, надо залить оригинальную библиотеку bootstrap'a (папки img, css, js) в корень сайта и прописать после <head>:

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 
    <script src="js/bootstrap.min.js"></script>

Ну и теперь самое лёгкое.





Находим шаблон, в котором у вас лежит навбар, в 90% случаев это navigation.tpl.
И ставим туда код следующего вида:

[prev-link]<span class="btn btn-success">Назад</span>[/prev-link] <span class='ensnavbar'>{pages}</span>  [next-link]<span class="btn btn-success">Вперед</span>[/next-link]

Здесь видно, что у нас {pages} (список страниц) помещён в тег span с нашим старым добрым классом ensnavbar. Так же, я поместил кнопки "Вперёд" и "Назад" в обычные кнопки bootstrap'a.

Фишка 2: Мониторинг серверов

Часто возникает вопрос:

А как сделать мониторинг сервера? обязательно регаться на сайтах-рейтингах, платить бешеные бабки и вставлять ихнюю картинку с рекламой?

Решение

Фишка 3: Красивые ссылки на топы + закруглённые края картинок

Спойлер: Решение (уровень сложности - 1 из 5)

Предположим, у нас есть код топа, который выглядит вот так:

<a ...> <img ...> </a>

(три точки означает много-много писанины вида: текст="текст" )

Сначала, добавляем некоторые теги. Должно выглядеть вот так:

<div> <a ...> <img ...> </a> <span> </span> </div>

Теперь добавляем div'у класс:

<div class="btn-group"> <a ...> <img ...> </a> <span> </span> </div>

Теперь ссылке (тег a) тоже ставим немного писанины:

<div class="btn-group"> <a class='btn btn-primary' style="z-index: 9999;" ...> <img ...> </a> <span> </span> </div>

Добавляем писанину тегу span:

<div class="btn-group"> <a class='btn btn-primary' style="z-index: 9999;" ...> <img ...> </a> <span class="btn btn-success btn-large" style="z-index: 9998; height: 17px; width:115px;"> </span> </div>

Ну и наконец самое интересное. Пишем ниже или выше:

<style>
.voteimg {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius:5px;
border-radius: 5px;
}
</style>

Знакомо выглядит, да?
Здесь мы прямо в документе, не создавая отдельный файл, прописываем css,
а именно заставляем элементу с указанным классом закруглять края на 5 пикселей
(строчки с "-" нужны для поддержки эффекта в старых браузерах).


И присваиваем тегу img класс: <img class="voteimg" ...>.

Ах да, забыл сказать:
1. Между тегами <span> и </span> вставляем короткий текст, например название рейтинга.
2. У тега <span> есть настройки в style="..." :
height: 17px; - определяет высоту.
width:115px; - определяет ширину.
Если ширину хотите настраивать автоматически под текст, просто вырежьте width:115px;
3. У тега <span> и <a> есть настройки в class="...", тут всё понятно, просто выставляем класс цвета.

Спойлер: ФИКС для тех, у кого панель наезжает на модальные окна/навбар/ещё на что-либо, на что наезжать не должно

Вырезаем из кода эти фрагменты:

style="z-index: 9999;"

и

style="z-index: 9998;"

Это добавит один баг дизайна, но если вы не будете о нём знать, то вы его заметите только после 10 минут пристального наблюдения за кнопкой =).

Фишка 4: Элемент поверх картинки

Иногда мне задают вопрос:

А как разместить кнопку поверх картинки?

Как выкручивались раньше:

• делали кликабельной всю картинку, вставляя рисунок кнопки в фотошопе
• размещали div с фоном
• и так далее...

Спойлер: Простое решение (уровень сложности - 1 из 5)

Помещаем объект (в нашем случае - кнопку) в div:

<div style="position:relative;bottom:78px;right:95px;">
 
<div>

Как видите, тут я сделал отступ на div'е снизу - 78px и справа - 95px
Делайте любой отступ с любой из сторон по аналогии
(bottom, top, left, right)

Спойлер: Отдельное решение проблемы - ЧО ВСЁ ЭТО ЗНАЧИТ КАК ДЕЛАЬТ САЫЙТ НА БУДСТРАП КАК НАУЧИТЬСЯ ЗА ПОЛЧАСА Я НЕ ВТЫКАЮ

Напиши уроки для нубов как делать сайты на bootstrap ,чтобы они твои фишки знали куда совать).

Ну, я врятли буду писать курсы, но можно самому научиться, причём быстро и "безболезненно":
Есть этот миникурс по вёрстке элементов на bootstrap, а так же это, это, это и эторуководство (это не отдельные руководства, а части одного) по использованию каждого элемента. Остаётся только комбинировать элементы, тут даже знания HTML не требуется. В руководстве уже предоставлен код для вставки, а в видеокурсе показаны все тонкости. Ну а если всё равно не помогает - есть htmlbook.ru, там в лёгкой форме есть описание каждого тэга HTML и CSS.

В будущем уроки будут пополняться, просто на момент написания статьи у меня было мало времени.

UPD: Тема заморожена, мне просто больше нечего сказать про Bootstrap.
Оставлена открытой исключительно в образовательных целях.

P.S. Набрал 43 лайка. Наберем 50?
P.P.S. Набрали 50 лайков! Наберем 70?

 

[num1]

Мне не нужно, но лайк поставлю!

 

[Googleman]

Перенести лучше в раздел Руководства

 

[Zard0nic]

Отлично, благодарю

 

[I_DOC_I]

Картинки только у меня не отображаются?

 

[enselerizer]

Картинки только у меня не отображаются?

Это Rghost.ru сегодня глючит, у меня то же самое было днём.

 

[enselerizer]

Сделай еще урок как установить бутстрап на дле

Как и на любой другой сайт, заливаешь библиотеки стилей в корень сайта, линкуешь в main.tpl - как я рассказал в 3 шаге 1 фишки.

 

[I_DOC_I]

Я криворукий, у меня под dle мониторинг не идет

 

[Meowt]

Я криворукий, у меня под dle мониторинг не идет

Скрин, если такая же проблема, которая была у меня, то я тебе помогу.

 

[I_DOC_I]

не отображается стиль, у меня мониторинг в отдельной колонке, засовываю туда {include file="/status.php"} и просто Загрузка...

 

[enselerizer]

не отображается стиль, у меня мониторинг в отдельной колонке, засовываю туда {include file="/status.php"} и просто Загрузка...

Инкудьте через iframe, гайд в теме с мониторингом

 

[enselerizer]

Где скачать то?

http://bootstrap-ru.com
:cap:

 

[Kela-4D]

Норм тема.продолжай.

 

[agentik007]

enselerizer, неужели занялся гринтечем?

 

[enselerizer]

enselerizer, неужели занялся гринтечем?

Всегда только им и занимался)

 

[Romanz]

Всегда только им и занимался)

:trf:

 

[Dragoy]

Полезно для новичков! Молодец!

 

[Dionixor]

Уже стандартный бутстрап надоел, есть много скинов для него уже привлекательных

 

[MineMan910]

[NOOB Mode = ON]Как установить Bootstrap на DLEшку?[mode = off]
Наверное никто от лайков не откажется?

 

[enselerizer]

[NOOB Mode = ON]Как установить Bootstrap на DLEшку?[mode = off]
Наверное никто от лайков не откажется?

1. Качаем бутстрап отсюда. Если надо кастомизировать (убрать те или иные компоненты), заходим сюда.​

2. Выкачиваем папки img, js, css в корень сайта.​

3. Пишем после тега <head> в main.tpl в шаблонах сайта DLE:​

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

P.S. Лайкнул

​