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

Модификации и расширения phpBB




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

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

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

Что-то посмотрел, не нашёл темы как сделать блок навигации и красиво оформить :)
#842 #842#842
Корпус блока рипанул с одного сайта , чуть настроил корпусню и готова! =)
так начнёмс, инструкция для 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, он в принципи воляется на винте, но донастроить нужно = )))
_______________________
[size=90:335q8cfb][color=#727272:335q8cfb]Если нужен стиль для сайта, стучите: ICQ 560107181[/color:335q8cfb][/size:335q8cfb]
Профиль  Отправить личное сообщение
Идеальный заработок для торрент-трекеров
Donate

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

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

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

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

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

Создать в текстовике файл 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}
Всё очень просто, но делал в слепую, перепроверьте, работает / не работает.
_______________________
[size=90:335q8cfb][color=#727272:335q8cfb]Если нужен стиль для сайта, стучите: ICQ 560107181[/color:335q8cfb][/size:335q8cfb]
Профиль  Отправить личное сообщение
Donate

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

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

Попробовал, пока только так выводит, картинок нет
#842
Профиль  Отправить личное сообщение
Admin
Аватара пользователя

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

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

Картинки точно залиты там где нужно, 2.png, 1.png?
_______________________
[size=90:335q8cfb][color=#727272:335q8cfb]Если нужен стиль для сайта, стучите: ICQ 560107181[/color:335q8cfb][/size:335q8cfb]
Профиль  Отправить личное сообщение
Donate

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

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

картинки все в одной папке styles\data-torrents\theme\images\blocks
Профиль  Отправить личное сообщение
Admin
Аватара пользователя

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

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

Чуть позже протестирую, посмотрю в чём дело, там лишняя css есть ... или в личку мне FTP доступ отправьте, посмотрю, может вы сами что-то не так сделали.
_______________________
[size=90:335q8cfb][color=#727272:335q8cfb]Если нужен стиль для сайта, стучите: ICQ 560107181[/color:335q8cfb][/size:335q8cfb]
Профиль  Отправить личное сообщение
Donate

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

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

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

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

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

Включил ICQ, пишите если что.
_______________________
[size=90:335q8cfb][color=#727272:335q8cfb]Если нужен стиль для сайта, стучите: ICQ 560107181[/color:335q8cfb][/size:335q8cfb]
Профиль  Отправить личное сообщение
Donate

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

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

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

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

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

cron