Форум web-мастеров phpBB3

Модификации и расширения phpBB
Регистрация ·  Логин: Пароль: Запомнить   · Забыли пароль?




Ответить на тему
Пред. тема | След. тема 
Автор Сообщение
Admin
Аватара пользователя

Карма
29
Стаж: 6 лет 1 месяц
Сообщения: 312
Россия

Ответить с цитатой

Что-то посмотрел, не нашёл темы как сделать блок навигации и красиво оформить :)
#775 #775#775
Корпус блока рипанул с одного сайта , чуть настроил корпусню и готова! =)
так начнёмс, инструкция для 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


Профиль  Отправить личное сообщение
Идеальный заработок для торрент-трекеров
Donate

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

Ответить с цитатой

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


Профиль  Отправить личное сообщение
Admin
Аватара пользователя

Карма
29
Стаж: 6 лет 1 месяц
Сообщения: 312
Россия

Ответить с цитатой

Создать в текстовике файл 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


Профиль  Отправить личное сообщение
Donate

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

Ответить с цитатой

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


Профиль  Отправить личное сообщение
Admin
Аватара пользователя

Карма
29
Стаж: 6 лет 1 месяц
Сообщения: 312
Россия

Ответить с цитатой

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


Профиль  Отправить личное сообщение
Donate

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

Ответить с цитатой

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


Профиль  Отправить личное сообщение
Admin
Аватара пользователя

Карма
29
Стаж: 6 лет 1 месяц
Сообщения: 312
Россия

Ответить с цитатой

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


Профиль  Отправить личное сообщение
Donate

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

Ответить с цитатой

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


Профиль  Отправить личное сообщение
Admin
Аватара пользователя

Карма
29
Стаж: 6 лет 1 месяц
Сообщения: 312
Россия

Ответить с цитатой

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


Профиль  Отправить личное сообщение
Donate

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

Ответить с цитатой

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


Профиль  Отправить личное сообщение
Страница 1 из 2
На страницу 1, 2  След.
Показать сообщения за:  Поле сортировки  
Ответить на тему

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


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

cron



Powered by phpBB, 9CaraTT.RU, 2012-2018.
Обратная связь
000webhost logo