FAQ по дизайну CSS (облегченное)

Страница: 1

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

Поделиться12009-09-20 22:24:43

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

С разрешением Zebrы. F.A.Q. по дизайну в CSS

CSS селекторы для всех элементов форума

Главная страница - верх
СКРИН 1

Стиль страницы

Код:

<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("http://forum.mybb.ru/viewtopic.php?pid=44#p44.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
#pun {background-color: transparent; width: 76%;}
#pun-title table {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/header.gif);
height : 132px; 
}
#pun-title .title-logo {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/logo.gif);
background-repeat : no-repeat; height : 132px;
}
#pun-title .title-logo span {display: none;}
#pun-navlinks .container {
padding-top : 4px;  background-color : #C0C0C0;
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
font-weight: bold;
text-align: center;
}
#pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited span {color: green;}
#pun-navlinks a:hover, #pun-navlinks a:hover span { 
color: red;
#pun-ulinks .container {
background-color : #00FFFF !important;
}
#pun-ulinks a {
color : #00FFFF
}
#pun-announcement h2 {background-color: #FF0000; color: red}
#pun-status .container { color : red;
background-color : #9900CC;
}
#pun-crumbs1 .container,  #pun-crumbs2 .container{
color : red; background-color : #00FFFF !important;
}
</style>

1. Основной фон(Скрин 1, элемент 1)

Код:

HTML, BODY {...}

Пример:

Код:

<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("http://forum.mybb.ru/viewtopic.php?pid=44#p44.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
</style>

Если не отображается фоновая картинка делаете так пример(ссылка Ваша на картинку, спасибо Lion

Код:

<style type="text/css">
HTML, BODY {background-image: url("http://m.foto.radikal.ru/0704/15/f6d7a1fb3c3d.jpg")!important; background-repeat: repeat !important;}
</style>

2. Фон под таблицами(Скрин 1, элемент 2)

Вы можете ззаметить, что под таблицами располагается дополнительный фон. Он заполняет промежутки между таблицами форума. Проще всего сделать его прозрачным, чтобы из-под него выглядывал основной фон и форум был в одном стиле. Также его ширина отвечает за ширину всех таблиц форума.

Код:

#pun {...}

Пример:

Код:

<style type="text/css">
#pun {background-color: transparent; width: 76%;}
</style>

3. Шапка форума(Скрин 1, элемент 3)
Шапка - это таблица, на которой расположены логотип форума и баннер. Баннер мы не под каким видом трогать не можем. Мы можем оформить таблицу под логотип и расширить ее.

Код:

#pun-title table {...}

Пример:

Код:

<style type="text/css">
#pun-title table {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/header.gif);
height : 132px;
}
</style>

4. Логотип форума(Скрин 1, элемент4)

Код:

#pun-title .title-logo {...}

Пример:

Код:

<style type="text/css">
#pun-title .title-logo {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/logo.gif);
background-repeat : no-repeat; height : 132px;
}
</style>

Если из под логотипа выглядывает название форума текстом введите

Код:

<style type="text/css">
#pun-title .title-logo span {display: none;}
</style>

5. Меню навигации(Скрин 1, элемент 5)

Код:

#pun-navlinks .container {...}

Пример:

Код:

<style type="text/css">
#pun-navlinks .container {
padding-top : 4px;  background-color : #C0C0C0;
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
font-weight: bold;
text-align: center;
}
</style>

ВАЖНО: если вы хотите изменить внешний вид ссылок внутри какого-лиюбо элемента, достаточно в коде после названия элемента добавить букву a . Это изменитт вид ссылки во всех состояниях
В нашем случае это будет выглядеть так

Код:

#pun-navlinks a {color: #FF0000;}

Можно также поставить разное оформление для ссылки в нормальном состоянии, после посещения и при наведении, добавляя вместо a

Код:

a:link - для нормальной ссылки
a:visited - для ссылки после посещения
a:hover - для ссылки при наведении мышкой

Пример:

Код:

<style type="text/css">
#pun-navlinks a:link, #pun-navlinks a:visited {color: green;}
#pun-navlinks a:hover { 
color: red;
}
</style>

Этот код сделает ссылки в навигации до и после посещения зелеными, а при наведении - красными.

Так как ссылки в меню навигации специфичны, полный код для них будет выглядеть так

Код:

<style type="text/css">
#pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited span {color: green;}
#pun-navlinks a:hover, #pun-navlinks a:hover span { 
color: red;
}
</style>

Вряд ли вам понадобится оформлять все ссылки по-разному, но на всякий случай вот их специфические коды:

Форум

Код:

li#navindex a span {...}

- Чат

Код:

li#navextra1 a  {...}

- Участники

Код:

li#navuserlist a span {...}

- Поиск

Код:

li#navsearch a span {...}

- Профиль

Код:

li#navprofile a span {...}

- Сообщения

Код:

li#navpm a span {...}

- Администрирование

Код:

li#navadmin a span {...}

- Выход

Код:

li#navlogout a span {...}

6. Пользовательские ссылки(Скрин 1, элемент 6)

Код:

#pun-ulinks .container {...}

Пример:

Код:

<style type="text/css">
#pun-ulinks .container {
background-color : #00FFFF !important;
}
</style>

Ссылки:

Код:

<style type="text/css">
#pun-ulinks a {
color : #00FFFF
}
</style>

7. Заголовок объявления(Скрин 1, элемент 7)

Код:

#pun-announcement h2 {...}

Пример:

Код:

<style type="text/css">
#pun-announcement h2 {background-color: #FF0000; color: red}
</style>

8. Объявление(Скрин 1, элемент 8)

Код:

#pun-announcement .container {...}

9. Окно статуса(Скрин 1, элемент 9)

Код:

#pun-status .container {...}

Пример:

Код:

<style type="text/css">
#pun-status .container { color : red;
background-color : #9900CC;
}
</style>

10. Название форума(Скрин 1, элемент 10)

Код:

#pun-crumbs1 .container {
...}

Пример:

Код:

<style type="text/css">
#pun-crumbs2 .container {
color : red; background-color : #00FFFF !important;
}
</style>

Поделиться22009-09-20 22:24:53

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

Главная страница - середина

СКРИН 2

Стиль страницы

Код:

<style type="text/css">
#pun-main h2 { 
color : green;
background-color : transparent; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
#pun th {
color: red; background-color : #FF00FF; background-image : url(http://i17.photobucket.com/albums/b80/Zebra_/Senzanome.jpg);
}
Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
#pun .tcl, #pun .tcr {width: 20%;}
#pun  .tc2, #pun .tc3 { color: red;
background-color : #FF0000;
}
.modlist {display: none;}
#pun-main td {
border-color : #00FFFF;
}
</style>

Ширина форума(ХТМЛ -низ ставить.....):

Код:

    <style type="text/css">
    #pun {
    width : 90%;
    }
    </style>

1. Название категории (Скрин 2. элемент 1)

Код:

#pun-main h2 {...}

Пример:

Код:

    <style type="text/css"> #pun-main h2 {
    color : green;
    background-color : transparent; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
    }
    </style>

2. Строка Форум - Тем - Сообщений - Последнее сообщение (Скрин 2 элемент 2)

Код:

#pun th {...}

Пример:

Код:

    <style type="text/css"> #pun th {
    color: red; background-color : #FF00FF; background-image : url(http://i17.photobucket.com/albums/b80/Z … zanome.jpg);
    }
    </style>

3. Иконка сообщений (Скрин 2. элемент 3)

Иконка "Нет новых сообщений"
Там где выделено или так в такие скобки => {...} внутрь вставляем ссылку на свою картинку, которая потом станет картинкой на Вашем форуме; в остальных кодах для иконок анологично делаем (или также)

Пример:

Код:

    <style type="text/css"> Div.icon {
    background-image : url();
    background-repeat: no-repeat;
    }
    </style>

Иконка "Новое сообщение"

Код:

    <style type="text/css">TR.inew Div.icon {
    background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
    }
    </style>

Иконка "Выделенная тема"

Код:

    <style type="text/css">TR.isticky Div.icon {
    background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
    }
    </style>

Иконка "Закрытая тема"

Код:

    <style type="text/css"> TR.iclosed Div.icon {
    background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
    }
    </style>

Иконка "Перенесенная тема"

Код:

    <style type="text/css"> TR.iredirect Div.icon {
    background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
    }
    </style>

!!!В определенных стилях форума данные коды для иконки могут не сработать. В таком случае код иконки "Нет новых сообщений" следует прописать так:

Код:

.punbb table Div.icon {float: left; display: block; width: 30px; height: 30px; border-style: none none none none;}

4. Первый столбец - Форумы (Скрин 2. элемент 4)

Код:

#pun .tcl {...}

Пример:

Код:

#pun .tcl {width: 20%;}

5. Второй столбец - Тем (Скрин 2. элемент 5)]

Код:

#pun .tc2 {...}

Пример:

Код:

<style type="text/css">#pun  .tc2 { color: red;
    background-color : #FF0000;
    }
    </style>

6. Третий столбец - Сообщений (Скрин 2. элемент 6)

Код:

#pun .tc3 {...}

7. Четвертый столбец -Последнее сообщение (Скрин 2. элемент 7)

Код:

#pun .tcr {...}

8. Список модераторов (Скрин 2. элемент 8)

Код:

.modlist {...}

Пример:

Код:

    <style type="text/css">.modlist {display: none;}</style>

9. Рамка межу столбцами (Скрин 2. элемент 9)

Код:

    <style type="text/css">#pun-main td {
    border-color : #00FFFF;
    }
    </style>

Поделиться32009-09-20 22:25:06

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

Главная страница - низ
СКРИН №3

Стиль страницы

Код:

<style type="text/css">
#pun-stats .container {
color : red;
background-color : #FF00FF;
}
li#onlinelist {
border-top-style : solid; border-top-width : 2px; border-top-color : #00FFFF; background-color: #FFCCCC;
}
li#onlinelist div {
text-align : center; color: green; background-color: #CC66FF;
}
#pun-about p.container {text-align : center; color: green; background-color: #CC66FF;}
#html-footer .container {background-color: #00FF00; color: #FF0000;}
</style>

1. Окно статистики(Cкрин 3, элемент1)

Код:

#pun-stats .container {...}

Если не работает, то пишем это:

Код:

#pun-stats .statscon {...}

Пример:

Код:

    <style type="text/css">#pun-stats .container {
    color : red;
    background-color : #FF00FF;
    }
    </style>

2. Средняя часть статистики(Cкрин 3, элемент2)

Элементы 2 и 3 по умолчанию принимают те же параметры внешнего вида, что и элемент 1. Вряд ли возникнет необходимость оформлять их в отличном цвете, как на скрине, однако их коды могут понадобиться для выравнивания элементов внутри них и оформления текста, а также для того, чтобы при желании скрыть их.

Код:

li#onlinelist {...}

Пример:

Код:

    <style type="text/css"> li#onlinelist {
    border-top-style : solid; border-top-width : 2px; border-top-color : #00FFFF; background-color: #FFCCCC;
    }
    </style>

3. Нижняя часть статистики(Cкрин 3, элемент3)

Код:

li#onlinelist div {...}

Пример:

Код:

    <style type="text/css">li#onlinelist div {
    text-align : center; color: green; background-color: #CC66FF;
    }
    </style>

4. Название форума внизу.(Cкрин 3, элемент 4)

Код:

#pun-crumbs2 p.container {...}

Пример:

Код:

    <style type="text/css">#pun-crumbs2 p.container {
    color : red; background-color : #00FFFF;
    }
    </style>

5. Строка Powered by(Cкрин 3, элемент 5)

Код:

#pun-about p.container {...}

6. HTML низ(Cкрин 3, элемент 6)

В этом окне отображается все, что вы вводите в поле HTML-низ в настройках.

Код:

#html-footer .container {...}

Пример:

Код:

<style type="text/css">#html-footer .container {background-color: #00FF00; color: #FF0000;}</style>

Поделиться42009-09-20 22:25:19

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

Страница тем
СКРИН №4

Стиль страницы

Код:

<style tye="text/css">
#pun-main h1 {
color : green;
background-color : #FF00FF; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
#pun-main .pagelink, #pun-main .postlink {color: red;}
#pun-main .modmenu p.container {
color : red; background-color: #00FFFF;
}
#pun-main .modmenu p.container strong {color: red;}
#pun-main .modmenu .container a:link, #pun-main .modmenu .container a:visited {
color : yellow;
}
</style>

Страница списка тем наследует большинство параметров главной страницы - ширину и цвет столбцов, обрамление таблицы, иконки.

Однако некоторые элементы все же определяются отдельно:

1. Название темы (Скрин 4, элемент 1)

Код:

#pun-main h1 {...}

Пример:

Код:

    <style type="text/css"> #pun-main h1 {
    color : green;
    background-color : #FF00FF; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
    }
    </style>

2. Ссылка "Страницы" (Скрин 4, элемент 2)

Код:

#pun-main .pagelink {...}

3. Ссылки "Начать тему" и "Начать опрос" (Скрин 4, элемент 3)

Код:

#pun-main .postlink {...}

4. Окно модерирования (Скрин 4, элемент 4)

Код:

#pun-main .modmenu p.container {...}

Пример:

Код:

    <style type="text/css"> #pun-main .modmenu p.container {
    color : red; background-color: #00FFFF;
    }
    </style>

Слова "Модерирование темы"

Код:

#pun-main .modmenu p.container strong {...}

Ссылки в окне модерирования.
Как уже было сказано, для обозначения ссылок внутри элемента достаточно добавить к его основному селектору a, a:link, a:visited или a:hover

Пример:

Код:

    <style type="text/css"> #pun-main .modmenu .container a:link, #pun-main .modmenu .container a:visited {
    color : yellow;
    }
    </style>

Поделиться52009-09-20 22:25:30

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

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

СКРИН №5

Стиль страницы

Код:

<style type="text/css">
#pun-main .post h3 {border-color : #00FFFF;
 background-color : #00FFFF;
}
#pun-main .post h3 span, #pun-main .post .permalink, #pun-main .post h3 strong  { border-color : #00FFFF;
color : #000000; background-color : #FFCCCC; 
}
#pun-main .post-author ul {border-color : #00FFFF;
color : #000000; background-color : #FF9966;
}
#pun-main .post .container {border-color : #00FFFF;
color : #000000; background-color : #FF9966;
}
#pun-main .post-body { border-color : #00FFFF;
color : #000000; background-color : #FFCCCC; 
}
#pun-main .post-content {
background-color : #FFFF33; color : #00FFFF;
}
#pun-main .quote-box, #pun-main .code-box {color: #00FF00; background-color: #FFFFFF;}
#pun-main .post-links li,  #pun-main .post-links ul {
 background-color : #FFCCFF;
}
</style>

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

1.(Скрин 5, элемент 1)

Код:

#pun-main .post h3 {...}

Пример:

Код:

    <style type="text/css">#pun-main .post h3 {border-color : #00FFFF;
    background-color : #00FFFF;
    }
    </style>

2.(Скрин 5, элемент 2)

Код:

#pun-main .post h3 span {...}

3. Дата сообщения(Скрин 5, элемент 3)

Код:

#pun-main .post .permalink {...}

4. Номер сообщения(Скрин 5, элемент 4)

Код:

#pun-main .post h3 strong {...}

Пример:

Код:

    <style type="text/css">#pun-main .post h3 span, #pun-main .post .permalink, #pun-main .post h3 strong  { border-color : #00FFFF;
    color : #000000; background-color : #FFCCCC;
    }
    </style>

5. Информация об авторе(Скрин 5, элемент 5)

Код:

#pun-main .post-author ul {...}

Пример:

Код:

    <style type="text/css"> #pun-main .post-author ul {border-color : #00FFFF;
    color : #000000; background-color : #FF9966;
    }
    </style>

Каждая строка об авторе имеет свой специфический код. На тот случай, если вам захочется скрыть или переоформить некоторые элементы - вот их полный список.

Ник

Код:

.pa-author {...}

Статус

Код:

.pa-title {...}

Регистрация

Код:

.pa-reg {...}

Cообщений

Код:

.pa-posts {...}

Аватар

Код:

.pa-avatar {...}

Репутация

Код:

.pa-reputation {...}

Код:

.pa-ip {...}

Активен

Код:

.pa-online {...}

6.(Скрин 5, элемент 6)
В том случае, если у вас не хватает каких-то полей профиля под аватаром, у вас может остаться не закрашенное пространство

Код:

#pun-main .post .container {...}

Пример:

Код:

    <style type="text/css"> #pun-main .post .container {border-color : #00FFFF;
    color : #000000; background-color : #FF9966;
    }</style>

8. Ячейка для текста сообщения(Скрин 5, элемент 8)

Код:

#pun-main .post-body {...}

Пример:

Код:

    <style type="text/css"> #pun-main .post-body { border-color : #00FFFF;
    color : #000000; background-color : #FFCCCC;
    }
    </style>

7, 9. Текст сообщения и фон под ним(Скрин 5, элементы 7, 9)

Код:

#pun-main .post-content{...}

Пример:

Код:

    <style type="text/css"> #pun-main .post-content {
    background-color : #FFFF33; color : #00FFFF;
    }
    </style>

10. Блок кода.(Скрин 5, элемент 10)

Код:

#pun-main .quote-box {...}

11. Блок цитаты(Скрин 5, элемент 11)

Код:

#pun-main .code-box {...}

Пример:

Код:

 <style type="text/css"> #pun-main .quote-box, #pun-main .code-box {color: #00FF00; background-color: #FFFFFF;}</style>

12. Ссылки под сообщением (ЛС, Удалить, Редактировать, Пофиль и т.д.)(Скрин 5, элемент 12)

Код:

#pun-main .post-links li {...}

13. Полоса с ссылками под сообщениями(Скрин 5, элемент 13)

Код:

#pun-main .post-links ul {...}

Пример:

Код:

    <style type="text/css"> #pun-main .post-links li,  #pun-main .post-links ul {
    background-color : #FFCCFF;
    }
    </style>

Поделиться62009-09-20 22:25:44

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

Форма ответа (быстрый и обычный ответ)
СКРИН №6

Стиль страницы

Код:

<style type="text/css">
#pun-main .formal .container, #pun-main fieldset, #pun-main .fs-box {
background-color : #00FF00; color: red;
}
#pun-main .formsubmit input {
background-color : #FFCCCC;
}
#pun-main .formal textarea {background-color : #FFCCCC;}
</style>

Форма ответа также состоит из множества налагающихся друг на друга элементов. Даже если вам ненужно все их раскрашивать в разные цвета, меняя внешний вид формы вам хотя бы придется написать одинаковые параметры для всех ее элементов.

1. Ссылка "Подписаться"(Скрин 6, элемент 1)

Код:

#pun-main .subscribelink {...}

Пример:

Код:

    <style type="text/css">#pun-main .subscribelink {color: #FF0000;}</style>

2.(Скрин 6, элемент 2)

Код:

#pun-main .formal .container {...}

3. (Скрин 6, элемент 3)

Код:

#pun-main fieldset {...}

5. (Скрин 6, элемент 5)

Код:

#pun-main .fs-box {...}

Пример:

Код:

    <style type="text/css">#pun-main .formal .container, #pun-main fieldset, #pun-main .fs-box {
    background-color : #00FF00; color: red;
    }
    </style>

6. Кнопки "Отправить" и "Редактировать" (Скрин 6, элемент 6)

Код:

#pun-main .formsubmit input {...}

Пример:

Код:

    <style type="text/css">#pun-main .formsubmit input {
    background-color : #FFCCCC;
    }
    </style>

7. Поле, куда вводится текст сообщения

Код:

#pun-main .formal textarea {...}

Поделиться72009-09-20 22:25:57

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

Страница своего профиля
СКРИН №7

Стиль страницы

Код:

<style type="text/css">
#profilenav .container {background-color: #FFCC99;}
#profilenav, #profilenav h2, #profilenav h2 span, #profilenav ul  {
color : #FFFFFF; background-color : #FF0000;
}
#profilenav li {
background-color : #FF00FF;
}
#profilenav li а:link,  #profilenav li a:visited{
color : #FF00FF;
}
#profilenav li a:hover {color: #00FF00;}
#profilenav fieldset, #profilenav .fs-box {background-color: #00FFFF;}
</style>

1. Окно с профилем (Скрин 7, элемент 1)

Код:

#profilenav .container {...}

Пример:
<style type="text/css">#profilenav .container {background-color: #FFCC99;}</style>

2. (Скрин 7, элемент 2)

Код:

#profilenav {...}

3. (Скрин 7, элемент 3)

Код:

#profilenav h2 {...}

4. (Скрин 7, элемент 4)

Код:

#profilenav h2 span {...}

5. (Скрин 7, элемент 5)

Код:

#profilenav ul {...}

Пример:

Код:

    <style type="text/css">#profilenav, #profilenav h2, #profilenav h2 span, #profilenav ul  {
    color : #FFFFFF; background-color : #FF0000;
    }
    </style>

6.Меню ссылок для навигации по профилю (Скрин 7, элемент 6)

Код:

#profilenav li {...}

Пример:

Код:

    <style type="text/css">#profilenav li {
    background-color : #FF00FF;
    }
    </style>

Ссылки для навигации по пофилю:

Код:

#profilenav li а {...}

Пример:
<style type="text/css">#profilenav li а {
color : #FF00FF;
}
</style>

Или:

Код:

    <style type="text/css">#profilenav li а:link,  #profilenav li a:visited{
    color : #FF00FF;
    }
    </style>

Код:

#profilenav li a:hover {color: #00FF00;}

7. Поле с личными данными (Скрин 7, элемент 7)
Код:

Код:

#profilenav fieldset{...}

8. (Скрин 7, элемент 8)

Код:

#pun-main .fs-box {...}

Пример:
<style type="text/css">#profilenav fieldset, #profilenav .fs-box {background-color: #00FFFF;}</style>

Поделиться82009-09-20 22:26:09

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

Страница профиля - Управление
СКРИН №8

Стиль страницы

Код:

<style type="text/css">
#pun-main .fs-box .submitfield input {
background-color : #00FFFF;
}
#setmods dl {
color : red; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>

1. Кнопки (Скрин 8, элемент 1)

Код:

#pun-main .fs-box .submitfield input {...}

Пример:

Код:

    <style type="text/css">#pun-main .fs-box .submitfield input {
    background-color : #00FFFF;
    }
    </style>

2. Названия модерируемых категорий (Скрин 8, элемент 2)

Код:

#setmods dl {...}

b] [Пример:[/b]
<style type="text/css"> #setmods dl {
color : red; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>

Поделиться92009-09-20 22:26:21

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

Страница чужого профиля
СКРИН №9

1. Окно профиля (Скрин 9, элемент 1)

Код:

#viewprofile .container {...}

2. Cлово профиль (Скрин 9, элемент 2)

Код:

#viewprofile h2 span {...}

3. (Скрин 9, элемент 3)

Код:

#viewprofile h2  {...}

4. (Скрин 9, элемент 4)

Код:

#viewprofile ul {...}

Пример:

Код:

    <style type="text/css"> #viewprofile .container, #viewprofile h2 span, #viewprofile h2, #viewprofile ul {
    color : #FF0000; background-color : #00FF00;
    }
    </style>

5. Название поля (Скрин 9, элемент 5)

Код:

#viewprofile li span {...}

Пример:

Код:

    <style type="text/css">#viewprofile li span {
    color : red; background-color : #00FF00; background-image : url (http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
    }
    </style>

6. Личные данные (Скрин 9, элемент 6)

Код:

#viewprofile li strong {...}

Пример:

Код:

    <style type="text/css">#viewprofile li strong {
    color : #FFFFFF; background-color : #FF0000;
    }
    </style>

Поделиться102009-09-20 22:26:34

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

Страница Участники
СКРИН №10

Стиль страницы

Код:

<style type="text/css">
#pun-userlist .fs-box  {
color : #FFFFFF; background-color : #FF0000;
}
#pun-userlist .usertable .container {
background-color : #FF00FF;
}
</style>

1. Окно с участниками (Скрин 10, элемент 1)

Код:

#pun-userlist .usertable table {...}

2. (Скрин 10, элемент 2)

Код:

#pun-userlist fieldset {...}

3. (Скрин 10, элемент 3)

Код:

#pun-userlist .fs-box {...}

Пример:

Код:

    <style type="text/css">#pun-userlist .usertable table, #pun-userlist fieldset, #pun-userlist .fs-box  {
    color : #FFFFFF; background-color : #FF0000;
    }
    </style>

4. Поле вокруг таблицы с участниками (Скрин 10, элемент 4)

Код:

#pun-userlist .usertable .container {...}

Пример:

Код:

    <style type="text/css">
    #pun-userlist .usertable .container {
    background-color : #FF00FF;
    }
    </style>

Поделиться112009-09-20 22:26:49

Автор: Лила
>>Не злая<<
Зарегистрирован: 2009-09-17
Приглашений: 0
Сообщений: 52
Уважение: [+11/-0]
Позитив: [+1/-0]
Пол: Женский
Возраст: 35 [1989-03-19]
Провел на форуме:
10 часов 30 минут
Последний визит:
2010-03-16 01:00:13

Общие коды

Есть некоторые параметры, которые чаще всего деляют одинаковыми для всех страниц и элементов форума. Наиболее часто встречающиеся:
1. Цвета всех ссылок форума

Код:

.punbb a:link, .punbb a:visited {color:...;}  - цвет все ссылок в обычном сотсоянии
.punbb a:hover {color: ...;} - цвет всех сслок при наведении

2. Курсор (только для IE)

Код:

HTML, BODY {cursor: url(...);}  - где вместо троеточия - ссылка на курсор.
.punbb a:hover {cursor: url("...");} - вид курсора при наведении на ссылку

3. Полоса прокрутки

Код:

HTML, BODY {
scrollbar-face-color: #889B9F;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #C3D6DA; 
}

, где
scrollbar-face-color - цвет бегунка
scrollbar-shadow-color - цвет рамки бегунка
scrollbar-highlight-color - цвет светлых граней бегунка, создающий 3D эффект
scrollbar-3dlight-color - цвет тени кнопок со стрелками
scrollbar-darkshadow-color - цвет тени от бегунка
scrollbar-track-color - цвет дорожки
scrollbar-arrow-color - цвет стрелок

Страница: 1

Style Art

Меню навигации

Пользовательские ссылки

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

FAQ по дизайну CSS (облегченное)

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

Поделиться12009-09-20 22:24:43

Поделиться22009-09-20 22:24:53

Поделиться32009-09-20 22:25:06

Поделиться42009-09-20 22:25:19

Поделиться52009-09-20 22:25:30

Поделиться62009-09-20 22:25:44

Поделиться72009-09-20 22:25:57

Поделиться82009-09-20 22:26:09

Поделиться92009-09-20 22:26:21

Поделиться102009-09-20 22:26:34

Поделиться112009-09-20 22:26:49