Текущее время: 27 сен 2020, 04:05

Русская поддержка форума phpBB

Это сайт русской поддержки phpBB

Красивый блок навигации

Аватара пользователя
Сообщения: 358
Стаж: 8 лет 6 месяцев
Карма: 30
Россия

Сообщение » 13 июн 2012, 16:49

Что-то посмотрел, не нашёл темы как сделать блок навигации и красиво оформить :)
#787 #787#787
Корпус блока рипанул с одного сайта , чуть настроил корпусню и готова! =)
так начнёмс, инструкция для subsilver2, так как просильвер ну не переношу и не считаю его вообще за стиль = ))))
создаём текстовый файл naviga.html, берём любой пустой левый блок и копируем оформление блока туда
Пример:
Код: Выделить всё
{$LR_BLOCK_H_L}Навигация{$LR_BLOCK_H_R}
<table class="tablebg" cellspacing="1" width="100%">
тут может быть что угодно = )))
</table>
{$LR_BLOCK_F_L}{$LR_BLOCK_F_R}

Теперь вставляем туда саму навигацию навигацию (как вставлять думаю все знают :D )
чтобы получилось так:
Код: Выделить всё
{$LR_BLOCK_H_L}Навигация{$LR_BLOCK_H_R}
<table class="tablebg" cellspacing="1" width="100%">
<div id="left"><div id="navcontainer">
        <ul class="navlist">
        <li><a href="/">Карта сайта</a></li>
        <li><a href="/">Главная</a></li>
        <li><a href="/">Гостевая книга</a></li>
        <li><a href="/">Форум</a></li>
        <li><a href="/">Делаем сайт</a></li>
        <li><a href="/">Оптимизируем сайт</a></li>
        <li><a href="/">Раскручиваем сайт</a></li>
        <li><a href="/">Зарабатываем</a></li>
        <li><a href="/">Графика для Web</a></li>
        <li><a href="/">Уроки Photoshop</a></li>
        <li><a href="/">Уроки HTML</a></li>
        <li><a href="/">Уроки CSS</a></li>
        <li><a href="/">Уроки JavaScript</a></li>
        <li><a href="/">Уроки jQuery</a></li>
        <li><a href="/">Уроки SQL и БД</a></li>
        <li><a href="/">Уроки Joomla</a></li>
        </ul>
</div><div id="advertising">
</table>
{$LR_BLOCK_F_L}{$LR_BLOCK_F_R}

Кидаем его styles/ваш стиль/template/portal/block
блок готов! теперь нужно его подключить!!!
Открываем файл portal_left.html
находим:
Код: Выделить всё
<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
   <!-- INCLUDE portal/block/birthday_list.html -->
<!-- ENDIF -->

после вставляем:
Код: Выделить всё
<!-- INCLUDE portal/block/naviga.html -->

далее открываем файл stylesheet.css и запихиваем с ноги или с руки туда код , куда вам удобно, можно в конеЦ = )
Код: Выделить всё
/* NaV9CaraTT
 ------------ */
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0; }
#navcontainer  a#active{
display: block;
padding: 5px 10px 5px 20px;
width: 192px;
color: #000;
font-weight: bold;
font-size: 12px;
text-decoration: none;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/blocks/4.png);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer a
{
display: block;
padding: 5px 15px;
width: 192px;
color: #dcdcdc;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
font-weight: bold;
font-size: 12px;
background-image: url(images/blocks/3.png);
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/blocks/4.png);
background-repeat: no-repeat;
background-position: 0 0;
}
настраиваем как нужно, если к примеру у Вас блоки в админке по ширине выставлены 230, то и картинки должны быть аналогичного размера.
Теперь по директории styles/ваш стиль/theme/images/ кидаем папку с картинками Скачать
[hr][/hr][hr][/hr]
Всё готова! Проверить в живую этот блок можите тут http://9caratt.com/
p.s на стандартном шаблоне subsilver2 смотриться лучше чем ожидал! ;)
В следующий раз как время будет подгодовлю блок с выподающим меню, с js, он в принципи воляется на винте, но донастроить нужно = )))
Если нужен стиль для сайта, стучите: ICQ 560107181

Сообщения: 10
Стаж: 7 лет 11 месяцев
Откуда: PNZ
Карма: 6

Сообщение » 23 янв 2013, 10:25

Спасибо!!! Отличный блок, подскажите пожалуйста как реализовать на сайте несколько таких блоков разных цветов, допустим 1-й блок серый, 2-й красный?

Аватара пользователя
Сообщения: 358
Стаж: 8 лет 6 месяцев
Карма: 30
Россия

Сообщение » 23 янв 2013, 15:25

Создать в текстовике файл bloock.css, заливаем его в http://ваш сайт.ru/styles/имя стиля/theme/
Открываем: stylesheet.css
Ниходим:
Код: Выделить всё
/* Layout
 ------------ */
До вставляем:
Код: Выделить всё
@import url("bloock.css");

Открываем: http://ваш сайт.ru/styles/имя стиля/theme/bloock.css
Вставляем:
Код: Выделить всё
/* NaV9CaraTT - Серый цвет
 ------------ */
#alone_navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
 
#navcontainer li {
margin: 0;
}

#alone_navcontainer  a#active{
display: block;
padding: 5px 10px 5px 20px;
width: 192px;
color: #000;
font-weight: bold;
font-size: 12px;
text-decoration: none;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url('./images/blocks/4.png');
background-repeat: no-repeat;
background-position: 0 0;
}
#alone_navcontainer a{
display: block;
padding: 5px 15px;
width: 192px;
color: #dcdcdc;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
font-weight: bold;
font-size: 12px;
background-image: url('./images/blocks/3.png');
background-repeat: no-repeat;
background-position: 0 0;
}
 
#alone_navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url('./images/blocks/4.png');
background-repeat: no-repeat;
background-position: 0 0;
}
/* NaV9CaraTT - Красный цвет
 ------------ */
#dva_navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
 
#dva_navcontainer li {
 margin: 0;
}

#dva_navcontainer  a#active{
display: block;
padding: 5px 10px 5px 20px;
width: 192px;
color: #000;
font-weight: bold;
font-size: 12px;
text-decoration: none;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url('./images/blocks/2.png');
background-repeat: no-repeat;
background-position: 0 0;
}
#dva_navcontainer a{
display: block;
padding: 5px 15px;
width: 192px;
color: #dcdcdc;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
font-weight: bold;
font-size: 12px;
background-image: url('./images/blocks/1.png');
background-repeat: no-repeat;
background-position: 0 0;
}
 
#dva_navcontainer a:hover{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url('./images/blocks/2.png');
background-repeat: no-repeat;
background-position: 0 0;
}
Это html серого блока:
Код: Выделить всё
{$LR_BLOCK_H_L}Навигация{$LR_BLOCK_H_R}
<table class="tablebg" cellspacing="1" width="100%">
<div id="left"><div id="alone_navcontainer">
        <ul class="navlist">
        <li><a href="/">Карта сайта</a></li>
        <li><a href="/">Главная</a></li>
        <li><a href="/">Гостевая книга</a></li>
        <li><a href="/">Форум</a></li>
        <li><a href="/">Делаем сайт</a></li>
        <li><a href="/">Оптимизируем сайт</a></li>
        <li><a href="/">Раскручиваем сайт</a></li>
        <li><a href="/">Зарабатываем</a></li>
        <li><a href="/">Графика для Web</a></li>
        <li><a href="/">Уроки Photoshop</a></li>
        <li><a href="/">Уроки HTML</a></li>
        <li><a href="/">Уроки CSS</a></li>
        <li><a href="/">Уроки JavaScript</a></li>
        <li><a href="/">Уроки jQuery</a></li>
        <li><a href="/">Уроки SQL и БД</a></li>
        <li><a href="/">Уроки Joomla</a></li>
        </ul>
</div><div id="advertising">
</table>
{$LR_BLOCK_F_L}{$LR_BLOCK_F_R}
Это html красного блока:
Код: Выделить всё
{$LR_BLOCK_H_L}Навигация{$LR_BLOCK_H_R}
<table class="tablebg" cellspacing="1" width="100%">
<div id="left"><div id="dva_navcontainer">
        <ul class="navlist">
        <li><a href="/">Карта сайта</a></li>
        <li><a href="/">Главная</a></li>
        <li><a href="/">Гостевая книга</a></li>
        <li><a href="/">Форум</a></li>
        <li><a href="/">Делаем сайт</a></li>
        <li><a href="/">Оптимизируем сайт</a></li>
        <li><a href="/">Раскручиваем сайт</a></li>
        <li><a href="/">Зарабатываем</a></li>
        <li><a href="/">Графика для Web</a></li>
        <li><a href="/">Уроки Photoshop</a></li>
        <li><a href="/">Уроки HTML</a></li>
        <li><a href="/">Уроки CSS</a></li>
        <li><a href="/">Уроки JavaScript</a></li>
        <li><a href="/">Уроки jQuery</a></li>
        <li><a href="/">Уроки SQL и БД</a></li>
        <li><a href="/">Уроки Joomla</a></li>
        </ul>
</div><div id="advertising">
</table>
{$LR_BLOCK_F_L}{$LR_BLOCK_F_R}
Всё очень просто, но делал в слепую, перепроверьте, работает / не работает.
Если нужен стиль для сайта, стучите: ICQ 560107181

Сообщения: 10
Стаж: 7 лет 11 месяцев
Откуда: PNZ
Карма: 6

Сообщение » 23 янв 2013, 18:08

Попробовал, пока только так выводит, картинок нет
#787

Аватара пользователя
Сообщения: 358
Стаж: 8 лет 6 месяцев
Карма: 30
Россия

Сообщение » 23 янв 2013, 18:27

Картинки точно залиты там где нужно, 2.png, 1.png?
Если нужен стиль для сайта, стучите: ICQ 560107181

Сообщения: 10
Стаж: 7 лет 11 месяцев
Откуда: PNZ
Карма: 6

Сообщение » 23 янв 2013, 18:51

картинки все в одной папке styles\data-torrents\theme\images\blocks

Аватара пользователя
Сообщения: 358
Стаж: 8 лет 6 месяцев
Карма: 30
Россия

Сообщение » 23 янв 2013, 19:20

Чуть позже протестирую, посмотрю в чём дело, там лишняя css есть ... или в личку мне FTP доступ отправьте, посмотрю, может вы сами что-то не так сделали.
Если нужен стиль для сайта, стучите: ICQ 560107181

Сообщения: 10
Стаж: 7 лет 11 месяцев
Откуда: PNZ
Карма: 6

Сообщение » 23 янв 2013, 20:19

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

Аватара пользователя
Сообщения: 358
Стаж: 8 лет 6 месяцев
Карма: 30
Россия

Сообщение » 23 янв 2013, 20:43

Включил ICQ, пишите если что.
Если нужен стиль для сайта, стучите: ICQ 560107181

Сообщения: 10
Стаж: 7 лет 11 месяцев
Откуда: PNZ
Карма: 6

Сообщение » 23 янв 2013, 22:26

9CaraTT спасибо огромное за помощь, прекрасно работают оба блока, очень красивая менюшка получается.

След.

Вернуться в Не большие моды, хаки, улучшения



Кто сейчас на конференции

Сейчас этот форум просматривают: нет пользователей онлайн и гости: 1