Winx Тех.Поддержка

Объявление

Админы:
Гл. Администратор: Стелла
Просто Администратор: Флора
Winx Тех.Поддержка
Баннер
Баннер не должен быть больше 120X60
Хочешь, чтобы твой форум стал лучше всех? чтобы был красивый дизайн? красивая шапка, баннер и много участников? Тогда регистрируйся на нашем форуме: Winx Поддержка Там не только всё для форумов винкс, но и для других!
Новости:
Форум: ТЕХ ПОДДЕРЖКИ WINX недавно открылась, но унас есть много интересных и полезных тем для вас!
Реклама:
Реклама только взаимная! иначе реклама будет удалена!(ваша)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Winx Тех.Поддержка » Дизайн » Учимся Переделывать Дизайны Для Форума (Новичкам Сюда!) Пошаговый Урок


Учимся Переделывать Дизайны Для Форума (Новичкам Сюда!) Пошаговый Урок

Сообщений 1 страница 2 из 2

1

Ну что?)))Вот Вы уже создали свой любимый и не с чем не сравнимый форум) а дизайн стоит обычный как у всех да?) хочется его немного изменить) понимаю...у меня тоже такое было) Так как я уже далеко в этом не новичок) но до сих пор помню как мне было сложно) решила провести пошаговый урок) чтоб Вам было не так тяжко как мне когда-то =)

С чего мы начнем? ))) Сперва нужно снять ограничения на своем форуме) иначе все скрипты не будут работать) Дизайн мы будем делать не через CSS а через ваш ХТМЛ ВВЕРХ =) Чтобы узнать как делать дизайн в CSS пройдите в нашу тему Задания для Дизайнеров 1 Курс ( пройдите 2 основных урока ) Но тем кому те уроки даются оч тяжко) будем делать дизайн вот так)

Чтоб снять ограничения у вас должно быть 5 зарегенных (или 3 уже не помню) 15 соощений и 5 тем (или 13 сообщений и 3 темы) там постоянно что-то меняется =/

Отлично) ограничения сняты=) Теперь идем в Администрирование---Настройки---Хтмл Вверх иии приступаем)

Чтобы поставить на своем форуме определенный стандартный стиль) В Настройках выберите любой вам подходящий) Я обычно это делаю со стилем Nevblack ) так как он оч простой) без всяких там прибомбасов) но Вы можете взять любой) который Вам нрав)

Я знаю что многие новички непонимают что и куда вставлять) я обьясню) Сперва вам нужно иметь (найти в инете, сделать самим или заказать у наших мастеров) для Шапки и прочего)
чтобы добавть в любое (почти) место картинку вставляйте в скрипт такой тег
background-image : url(ссыль);
пример)
Этот код заливает полностью форум определенным цветом

<style type="text/css">
#pun {background-color:blue;}
</style>
Но если вы хотите залить его не просто цветом а картинкой он будет выглядеть так)

<style type="text/css">
#pun {background-color:blue;background-image : url(ссыль);}
</style>
border-color: - Это цвет рамок на форуме
color: - цвет текста
pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited - это цвета ссылок

Начнем с того что сделаем форум прозрачным, для этого входим в администрирование, настройки и вставляем этот код в хтмл верх

<style type="text/css">
.punbb .main .container,
.punbb td.tc3,
.punbb .section .container,punbb td.tc2,.punbb td.tcr,#pun .tc2   {background-color: transparent; }
</style>
Отлично теперь можно начать делать верхушку форума а именно Шапку) (некоторые предпочитают обходится и без нее)

<style type="text/css">
#pun-title table {background-image : url(ссылка на шапку);
height : 132px;
}
</style>
Далее приступим к тому что сделаем себе другой задний фон

<style type="text/css">
HTML, BODY {background-image: url("ссылка")!important; background-repeat: repeat !important;}
</style>
Если вы хотите сделать себе стоячий задний фон то скрипт будет такой)

<style type="text/css">
HTML, BODY {background-image: url("ссыль"); background-attachment: fixed;}
</style>
Окей все сделали, теперь подгоним форум по своему желанию, тоесть сделаем его меньше либо наоборот шире 83 меняйте на свое)

<style type="text/css">
#pun {
width : 83%;
}
</style>
Теперь если кто-то хочет то может с помощью этого скрипта изменить размер текста на всем форуме, меняя на свое потходящее число

<style type="text/css">
body {
font-size: 150%;
}
</style>
С помощью этого кода можно изменить стиль шрифта на форуме, вместо Century Gothic пишем свой стиль шрифта

<style>
BODY A{font-family : "Century Gothic";}
</style>
поменять на главной 1,2,3,4 столбцы форума)а именно залить их своим цветом

<style type="text/css">
#pun  .tcl { color: цвет текста;
background-color : цвет фона;}
#pun  .tc2 { color: цвет текста;
background-color : цвет фона;}
#pun  .tc3 { color: цвет текста;
background-color : цвет фона;}
#pun  .tcr { color: цвет текста;
background-color : цвет фона;}
</style>
С помощью этого кода вы сможете вставить свою картинку в название категорий на главной страничке

<style type="text/css"> #pun-main h2 {
color : green;
background-color : transparent; background-image : url(ссылка);
}
</style>
Для наибольшей красоты поставим свою картинку и в строке Форум-Тем - Сообщений - Последнее сообщение

<style type="text/css"> #pun th {
color: red; background-color : #FF00FF; background-image : url(ссыль);
}
</style>
Сделаем рамку между столбцами)

<style type="text/css">#pun-main td {
border-color : #00FFFF;
border-width: 1px;}
</style>
Подвинем слегка верхнюю рекламу) Внимание если вы удалите рекламу ваш форум удалят) Рекламу можно только слегка отодвинуть в сторону или слегка передвинуть ее в другое место)меняйте эти цифры на свои
left: 510px - в лево 510 пикселей (510 и 190 меняйте по своему усмотрению)
top: 190px - вниз 190 пикселей
(510 и 190 меняйте по своему усмотрению)

<style> #pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 510px; top: 190px
}
</style>
Этот код сделает картинку около статистики)

<style type="text/css">
#pun-stats ul.container {
background-image:url(ссыль); padding-left:80px; height : 192px; background-repeat: no-repeat}
</style>
Ну чтож) думаю ваш дизайн уже изменился и стал немного другим) не так ли? =)
Если Вы справились) то Вы молодец) умниччко огамс) надеюсь я не зря старалась и хоть чем-то вам помогла)
Вообще дизайн на форуме можно мнооого чем и как украсить))) сделать его совсем необычным и тд)

0

2

Прикольно!

0


Вы здесь » Winx Тех.Поддержка » Дизайн » Учимся Переделывать Дизайны Для Форума (Новичкам Сюда!) Пошаговый Урок