Alternative Art : breath of a phoenix

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

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

Вы здесь » Alternative Art : breath of a phoenix » Восстановленное » Урок по созданию дизайна (цвета CSS)...

Урок по созданию дизайна (цвета CSS)...

Страница: 1

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

1

  • Автор: Lilika
  • ~Жизнь - это лишь страшный сон~
  • Lilika
  • Уважение: +48
  • Зарегистрирован: 24-09-2009
  • Провел на форуме:
    2 дня 4 часа
  • Возраст: 34 [1991-03-06]
  • Пол: Женский
  • Последний визит:
    25-01-2010 19:41:51

Урок по созданию дизайна (цвета CSS)
Для начала нам необходимо в генераторе стилей создать основу будущего стиля.
I. Мы подобрали цвета и, нажав "сохранить стиль", получили код "цвета CSS". Мой пример (специально взяты яркие цвета, чтобы было наглядней):
http://pic.ipicture.ru/uploads/091003/thumbs/GGiVUXVNuH.png

Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/

body {
	background-color: #CC0000;
}

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #FF3300;
  color: #333333;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #669933;
  color: #333333;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #993366;
  color: #FFFFFF;
  font-weight: normal;
font-style: normal;

  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #FF9900;
  color: #333333;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #669933;
  color: #333333
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #99FF99;
  color: #333333
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #EF2300;
  color: #333333
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #FF99CC;
  color: #FFFFFF;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

.punbb textarea, .punbb select, .punbb input {
  background-color: #CC0000;
  color: #333333
}

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #FFFF66 #FFFF66 #FFFF66 #FFFF66
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #BC0000
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #993366;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #993399;
  }

/* CS2.5 */
.punbb th {
  border-color: #99FF99
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #DF1300 #FF5320 #FF5320 #DF1300;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #DF1300
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #FF5320
  }

.punbb .divider {
  border-color: #DF1300 #FF5320 #FF5320 #FF5320
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #dedfdf
  }

li.pa-online {
  border-left-color: #FF99CC;
  }

.punbb .post-sig dt {
  border-top-color: #993399 !important;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #005CB1;
    border-bottom: 0px none #000;
  text-decoration: underline;

  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #333333
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #B42000;
    border-bottom: 0px none #000;
  text-decoration: underline;

  }

/* CS3.3 */
#pun-navlinks a {
  color: #FFFFFF;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #FFFFFF;
  font-weight: normal;
font-style: normal;
  border-bottom: 0px none #000;
  text-decoration: underline;

  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {border-color: #0080D7 #0060B7 #0050A7 #0060B7}
tr.iredirect div.icon {border-color: #669933 #669933 #669933 #669933}
div.inew {border-color: #E6E6E6 #C6C6C6 #B6B6B6 #C6C6C6}

#pun-main div.catleft, #pun-main div.catright {display: none}

II. Разбор полученного кода.

1.  CS1 Background and text colours - управляет цветовыми сочитаниями таблиц форума и текстов.

1.0. Фон форума.

Первое, что мы видим - это блок

Код:
body {
	background-color: #CC0000;
}

Он отвечает за цвет фона или фоновую картинку форума.
Для того, чтобы поставить свою картинку заменяем этот блок на:
а). Подвижный фон при прокрутке форума:

body {
background-image: url(Адрес картинки);
}

б). Неподвижны фон при прокрутке форума:

Код:
body {
background-color: #66a2b5; 
background-image: url(Адрес картинки); 
 background-no-repeat: repeatxy;background-attachment: fixed;
}

1.1. Основной цвет форума.

Блок
/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #FF3300;
  color: #333333;
  }

Он отвечает за фоновый цвет ячеек таблиц форума с количеством сообщений и тем, приветствие, низ форума, статистика форума, меня форума.
На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/FzC95RSR0V.png
Тег

Код:
background-color: #FF3300

устанавливает цвет фона этих элементов форума. Можно вставить своё фоновое изображение, заменив его на

Код:
background-image: url([color=maroon]Адрес картинки[/color]);

Тег

Код:
color: #333333

устанавливает цвет текста в этих блоках.

Можно дописать ниже (до фигурной скобки) теги для изменения шрифта:

Код:
font-weight: bold;

- текст станет жирным.

Код:
font-style: italic;

- текст будет курсивом.

1.2. Цвета таблиц форума и текста форума.

Блок

Код:
/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #669933;
  color: #333333;
  }

отвечает за цвета таблиц форума и текста форума.
На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/uYQUdRJycS.png

Цвет можно заменить на картинку:

Код:
background-image: url([color=maroon]Адрес картинки[/color]);
Код:
color: #333333;

- меняем цвет шрифта.
Можно дописать ниже (до фигурной скобки) теги для изменения шрифта:

Код:
font-weight: bold;

- текст станет жирным.

Код:
font-style: italic;

- текст будет курсивом.

1.3. Категории форума.

Блок

Код:
/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #993366;
  color: #FFFFFF;
  font-weight: normal;
font-style: normal;

  }

управляет категориями форума.

На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/L1TbSYHwkW.png

Цвет можно заменить на картинку:

Код:
background-image: url([color=maroon]Адрес картинки[/color]);
Код:
color: #FFFFFF;

- меняем цвет шрифта.
Можно дописать ниже (до фигурной скобки) теги для изменения шрифта:

Код:
font-weight: bold;

- текст станет жирным.

Код:
font-style: italic;

- текст будет курсивом.

[b]1.4. Шапка форума.[/b]

Блок

Код:
/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #FF9900;
  color: #333333;
  }

Корректирует шапку форума и текст в ней.
На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/17865a9Lj2.png
Цвет можно заменить на картинку:

Код:
background-image: url([color=maroon]Адрес картинки[/color]);
Код:
color: #333333;

- меняем цвет шрифта.
Можно дописать ниже (до фигурной скобки) теги для изменения шрифта:

Код:
font-weight: bold;

- текст станет жирным.

Код:
font-style: italic;

- текст будет курсивом.

1.5. Замечания и приписки.

Блок

Код:
/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #669933;
  color: #333333
  }

отвечает за все приписки и замечания форума, которые есть на движке mybb по умолчанию.

На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/I7Z0r2ju5V.png

Код:
 background-color: #669933;

- меняем цвет фона.

Код:
color: #333333;

- меняем цвет шрифта.
Можно дописать ниже (до фигурной скобки) теги для изменения шрифта:

Код:
font-weight: bold;

- текст станет жирным.

Код:
font-style: italic;

- текст будет курсивом.

1.6. Шапка форумных таблиц.

Блок

Код:
/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #99FF99;
  color: #333333
  }

управляет шапкой форумных таблиц и текстом в этой шапке.

На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/dfbD1W9RIj.png

Цвет можно заменить на картинку:

Код:
background-image: url([color=maroon]Адрес картинки[/color]);
Код:
color: #333333;

- меняем цвет шрифта.
Можно дописать ниже (до фигурной скобки) теги для изменения шрифта:

Код:
font-weight: bold;

- текст станет жирным.

Код:
font-style: italic;

- текст будет курсивом.

1.7. Задник.

Блок

Код:
/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #EF2300;
  color: #333333
  }

управляет так называемым задником форума (цвет фона цитаты, кода)

На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/lJCdWlU9tT.png

Цвет можно заменить на картинку:

Код:
background-image: url([color=maroon]Адрес картинки[/color]);
Код:
color: #333333;

- меняем цвет шрифта.
Можно дописать ниже (до фигурной скобки) теги для изменения шрифта:

Код:
font-weight: bold;

- текст станет жирным.

Код:
font-style: italic;

- текст будет курсивом.


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

Блок

Код:
/* CS1.8 */
#pun-navlinks .container {
  background-color: #FF99CC;
  color: #FFFFFF;
  }

управляет меню навигации.

На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/qUrXROKWbs.png

Цвет можно заменить на картинку:

Код:
background-image: url([color=maroon]Адрес картинки[/color]);
Код:
color: #FFFFFF;

- меняем цвет шрифта.
Можно дописать ниже (до фигурной скобки) теги для изменения шрифта:

Код:
font-weight: bold;

- текст станет жирным.

Код:
font-style: italic;

- текст будет курсивом.

Блок

Код:
.punbb textarea, .punbb select, .punbb input {
  background-color: #CC0000;
  color: #333333
}

регулирует цвет фона и шрифта в форме ответа (вместе с кнопками "отправить" и "пред. просмотр") и других формах для заполнения.

На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/2lesU6PfoD.png

Цвет можно заменить на картинку:

Код:
background-image: url([color=maroon]Адрес картинки[/color]);
Код:
color: #333333;

- меняем цвет шрифта.
Можно дописать ниже (до фигурной скобки) теги для изменения шрифта:

Код:
font-weight: bold;

- текст станет жирным.

Код:
font-style: italic;

- текст будет курсивом.

2. CS2 Border colours - цветовые сочетания форума.

2.1. Внешние границы форума.

Блок
/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #FFFF66 #FFFF66 #FFFF66 #FFFF66
  }
управляет внешними границами форума.

На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/ODNUW0pTDe.png

1 - цвет верхних границ
2 - цвет правых боковых границ
3 - цвет нижних границ
4 - цвет левых боковых границ.

2.2. цвет черты под нижней границей форума.

Блок

Код:
/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #BC0000
  }

я советую не трогать.

2.3.
Блок

Код:
/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #993366;
  }

управляет рамкой внизу и справа от полоски с названиями категорий.

Тоже советую не трогать, существенных изменений не несёт.

2.4. Внутренние рамки форума.
Блок

Код:
/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #993399;
  }

управляет внутренними рамками форумных таблиц.

На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/by5daSnhca.png

Код:
border-color: #993399;

- меняем цвет.

2.5. Полоски, разделяющие названия секций.

Блок

Код:
/* CS2.5 */
.punbb th {
  border-color: #99FF99
  }

Это полоски разделяющие : названия секций!

На скрине выделена его сфера влияния прямоугольниками:
http://pic.ipicture.ru/uploads/091003/thumbs/ekgqARRA6G.png

Код:
border-color: #993399;

- меняем цвет.

3. CS4 Post status icons - иконки.

3.1. Иконки.

Блок (в самом конце)

Код:
div.icon {border-color: #0080D7 #0060B7 #0050A7 #0060B7}
tr.iredirect div.icon {border-color: #669933 #669933 #669933 #669933}
div.inew {border-color: #E6E6E6 #C6C6C6 #B6B6B6 #C6C6C6}

отвечает за иконки.

Используем этот код (вставляем свои иконки в ссылки)

Код:
#pun-main table Div.icon {padding-left: 35px; padding-top: 15px; padding-bottom: 20px;}
Div.icon {
background-image : url(Адрес картинки для СТАРЫХ тем);
background-repeat: no-repeat;
}

TR.inew Div.icon {
background-image : url(Адрес картинки для НОВЫХ тем);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(Адрес картинки для ВАЖНЫХ тем); background-repeat: no-repeat;
}

TR.iclosed Div.icon {
background-image : url(Адрес картинки для ЗАКРЫТЫХ тем);
background-repeat: no-repeat;
}

Вот и всё, что нужно знать при создании дизайна.

(c) Урок написан мною, любое копирование без ссылки на меня, запрещено!

Отредактировано Lilika (03-12-2009 22:45:34)

+14

2

  • Автор: Лика
  • just dance
  • Лика
  • Уважение: +262
  • Зарегистрирован: 23-09-2009
  • Провел на форуме:
    10 дней 6 часов
  • Возраст: 17 [2008-07-01]
  • Последний визит:
    04-03-2013 14:34:23

Lilika
спасибо, мне это очень помогло! + тебе

0

3

  • Автор: sirène~
  • мотивы: неизвестны
  • sirène~
  • Уважение: +118
  • Зарегистрирован: 30-09-2009
  • Провел на форуме:
    9 дней 19 часов
  • Возраст: 33 [1992-03-04]
  • Пол: Женский
  • Последний визит:
    10-12-2012 02:36:37

спасибо, отличная подсказка))

0

4

  • Автор: .bubble
  • |наглая ня*|
  • .bubble
  • Уважение: +87
  • Зарегистрирован: 27-05-2009
  • Провел на форуме:
    3 дня 7 часов
  • Возраст: 30 [1995-05-07]
  • Пол: Женский
  • Последний визит:
    21-01-2012 15:08:17

Lilika
о, спасибо а то я уже во всем путаюсь

0

5

  • Автор: Yosei
  • Гость

Спасибо, вы просто чудо

0

6

  • Автор: Hikaru Sen
  • активный пользователь
  • Hikaru Sen
  • Уважение: +2
  • Зарегистрирован: 30-07-2009
  • Провел на форуме:
    15 часов 53 минуты
  • Откуда: Тамбов
  • Возраст: 37 [1988-09-02]
  • Пол: Женский
  • Последний визит:
    09-12-2010 14:00:43

картинки не открываются(

0

7

  • Автор: NY
  • без труда не вытащиш и схему из PC
  • NY
  • Уважение: +36
  • Зарегистрирован: 10-10-2009
  • Провел на форуме:
    3 дня 8 часов
  • Откуда: столько каваев ^_^
  • Пол: Мужской
  • Последний визит:
    15-10-2010 20:49:37

а у меня шапка форума очень узкая по вертикали как зделать больше???

0

8

  • Автор: Lilika
  • ~Жизнь - это лишь страшный сон~
  • Lilika
  • Уважение: +48
  • Зарегистрирован: 24-09-2009
  • Провел на форуме:
    2 дня 4 часа
  • Возраст: 34 [1991-03-06]
  • Пол: Женский
  • Последний визит:
    25-01-2010 19:41:51

Hikaru Sen
У меня открываются нормально. Может у вас с браузером что-то?
пейн
Это уже в структуре меня надо.

0

9

  • Автор: NY
  • без труда не вытащиш и схему из PC
  • NY
  • Уважение: +36
  • Зарегистрирован: 10-10-2009
  • Провел на форуме:
    3 дня 8 часов
  • Откуда: столько каваев ^_^
  • Пол: Мужской
  • Последний визит:
    15-10-2010 20:49:37

блин в структуре не смыслю по полной

-1

10

  • Автор: Deisy-
  • активный пользователь
  • Deisy-
  • Уважение: +892
  • Зарегистрирован: 27-03-2009
  • Провел на форуме:
    2 месяца 3 дня
  • Последний визит:
    10-11-2013 10:35:10

пейн
в структуре ищете группу D1 Logo and description и код:

#pun-title TD.title-logo-tdr {
  border: none;
  width: максимальная высота шапкиpx;
  vertical-align: center;
  padding-right: 20px;
}

вместо жирного ставите высоту своей шапки в пиксах.  Должно помочь.

+1

11

  • Автор: NY
  • без труда не вытащиш и схему из PC
  • NY
  • Уважение: +36
  • Зарегистрирован: 10-10-2009
  • Провел на форуме:
    3 дня 8 часов
  • Откуда: столько каваев ^_^
  • Пол: Мужской
  • Последний визит:
    15-10-2010 20:49:37

спасибо держите два +)))

0

12

  • Автор: Hikaru Sen
  • активный пользователь
  • Hikaru Sen
  • Уважение: +2
  • Зарегистрирован: 30-07-2009
  • Провел на форуме:
    15 часов 53 минуты
  • Откуда: Тамбов
  • Возраст: 37 [1988-09-02]
  • Пол: Женский
  • Последний визит:
    09-12-2010 14:00:43

Lilika
Все открылось, прошу прощения.. Наверное это с соединением проблемы были.
А у меня вот какой вопрос будет - как сделать статистику форума... Какой код за это отвечает? Если недоглядела - прошу прощения.

0

13

  • Автор: Deisy-
  • активный пользователь
  • Deisy-
  • Уважение: +892
  • Зарегистрирован: 27-03-2009
  • Провел на форуме:
    2 месяца 3 дня
  • Последний визит:
    10-11-2013 10:35:10

Hikaru Sen
т.е. картинку в статистику?

0

14

  • Автор: Will-chan
  • активный пользователь
  • Will-chan
  • Уважение: +4
  • Зарегистрирован: 12-08-2009
  • Провел на форуме:
    23 часа 52 минуты
  • Пол: Женский
  • Последний визит:
    20-02-2011 18:08:23

Ммм... Проблема ><
В этих местах появились частички шапки... Вот скрин > http://i33.tinypic.com/2dtypo0.png
Как их убрать?

0

15

  • Автор: Deisy-
  • активный пользователь
  • Deisy-
  • Уважение: +892
  • Зарегистрирован: 27-03-2009
  • Провел на форуме:
    2 месяца 3 дня
  • Последний визит:
    10-11-2013 10:35:10

Will-chan
вы их каким кодом вставляли? о...о

0

16

  • Автор: Hikaru Sen
  • активный пользователь
  • Hikaru Sen
  • Уважение: +2
  • Зарегистрирован: 30-07-2009
  • Провел на форуме:
    15 часов 53 минуты
  • Откуда: Тамбов
  • Возраст: 37 [1988-09-02]
  • Пол: Женский
  • Последний визит:
    09-12-2010 14:00:43

Deisy-
не только картинку... дизайн на наш форум делала не я, а там статистика вообще нестандартно оформлена, в итоге в ИЭ все едет, и графа "активные за 24 часа" залезает на рекламу. Хочу это исправить, но не знаю где и как.

0

17

  • Автор: Deisy-
  • активный пользователь
  • Deisy-
  • Уважение: +892
  • Зарегистрирован: 27-03-2009
  • Провел на форуме:
    2 месяца 3 дня
  • Последний визит:
    10-11-2013 10:35:10

Hikaru Sen
*нифига не понял*
код за картинку в панелях, где название категорий, где написано слово "статистика" находится в нижнем окне в CS1.3

0

18

  • Автор: Will-chan
  • активный пользователь
  • Will-chan
  • Уважение: +4
  • Зарегистрирован: 12-08-2009
  • Провел на форуме:
    23 часа 52 минуты
  • Пол: Женский
  • Последний визит:
    20-02-2011 18:08:23
Deisy- написал(а):

вы их каким кодом вставляли? о...о

От...

Lilika написал(а):

/* CS1.4 */ #pun-title, #pun-title .container, .punbb .modmenu .container { background-color: #FF9900; color: #333333; }

о_о я вставляла шапку, а они сами появились ><

0

19

  • Автор: =ёЖиГ v ТумaNe=
  • мяу
  • =ёЖиГ v ТумaNe=
  • Уважение: +187
  • Зарегистрирован: 28-01-2009
  • Провел на форуме:
    17 дней 18 часов
  • Возраст: 17 [2008-01-28]
  • Пол: Женский
  • Последний визит:
    01-02-2013 19:13:37

Lilika

Lilika написал(а):

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #FF9900;
  color: #333333;
  }

этот когда не для шапки Оо

Will-chan написал(а):

о_о я вставляла шапку, а они сами появились ><

код немнлжко не тот)

Rei написал(а):

во второе окошко вставь вот этот код:
#pun-title .title-logo {background-image : url("адрес картинки");
background-repeat : no-repeat; height : 182px;}
Прямо в самый верх нижнего окошка.Там где написано height: 182px; 182 нужно заменить на высоту твоего лого.

+1

20

  • Автор: Will-chan
  • активный пользователь
  • Will-chan
  • Уважение: +4
  • Зарегистрирован: 12-08-2009
  • Провел на форуме:
    23 часа 52 минуты
  • Пол: Женский
  • Последний визит:
    20-02-2011 18:08:23

=ёЖиГ v ТумaNe=
Аригато^^

0

21

  • Автор: Danessa
  • активный пользователь
  • Danessa
  • Уважение: +19
  • Зарегистрирован: 13-04-2009
  • Провел на форуме:
    2 дня 14 часов
  • Пол: Женский
  • Последний визит:
    15-11-2012 18:48:25

Как сделать, что бы прозрачность форума была 50%?

0

22

  • Автор: Danessa
  • активный пользователь
  • Danessa
  • Уважение: +19
  • Зарегистрирован: 13-04-2009
  • Провел на форуме:
    2 дня 14 часов
  • Пол: Женский
  • Последний визит:
    15-11-2012 18:48:25

А как сделать Меню навигации в логотипе? Как здесь.

0

23

  • Автор: =ёЖиГ v ТумaNe=
  • мяу
  • =ёЖиГ v ТумaNe=
  • Уважение: +187
  • Зарегистрирован: 28-01-2009
  • Провел на форуме:
    17 дней 18 часов
  • Возраст: 17 [2008-01-28]
  • Пол: Женский
  • Последний визит:
    01-02-2013 19:13:37
Danessa написал(а):

Как сделать, что бы прозрачность форума была 50%?

берешь фон, заливаешь цветом в фотошопе, уменьшаешь прозрачность заливки, заливаешь фоном форум

pun{background-image: url(сссыль);

Danessa написал(а):

А как сделать Меню навигации в логотипе? Как здесь.

Вопросыпроблемы со стилем
пост 292

0

24

  • Автор: Danessa
  • активный пользователь
  • Danessa
  • Уважение: +19
  • Зарегистрирован: 13-04-2009
  • Провел на форуме:
    2 дня 14 часов
  • Пол: Женский
  • Последний визит:
    15-11-2012 18:48:25

=ёЖиГ v ТумaNe=
Спасибо большое!!

В часто задаваемых вопросах по ксс есть такой вопрос:

=ёЖиГ v ТумaNe= написал(а):

#6 Как сделать иконки справа?

А у меня вот что получилось.

0

25

  • Автор: =ёЖиГ v ТумaNe=
  • мяу
  • =ёЖиГ v ТумaNe=
  • Уважение: +187
  • Зарегистрирован: 28-01-2009
  • Провел на форуме:
    17 дней 18 часов
  • Возраст: 17 [2008-01-28]
  • Пол: Женский
  • Последний визит:
    01-02-2013 19:13:37
Danessa написал(а):

А у меня вот что получилось.

извиняюсь, код жирного выделения был нарушен, все исправлено. Должно работать исправно), по крайней мере я все коды перепроверила сначала на тестовом Оо

0

26

  • Автор: Danessa
  • активный пользователь
  • Danessa
  • Уважение: +19
  • Зарегистрирован: 13-04-2009
  • Провел на форуме:
    2 дня 14 часов
  • Пол: Женский
  • Последний визит:
    15-11-2012 18:48:25

=ёЖиГ v ТумaNe=
Теперь иконки вообще исчезли

0

27

  • Автор: =ёЖиГ v ТумaNe=
  • мяу
  • =ёЖиГ v ТумaNe=
  • Уважение: +187
  • Зарегистрирован: 28-01-2009
  • Провел на форуме:
    17 дней 18 часов
  • Возраст: 17 [2008-01-28]
  • Пол: Женский
  • Последний визит:
    01-02-2013 19:13:37

Danessa
ох, вы размер поставили иконок?
я не знаю, я повторюсь, что все работает на тестовом Оо
давайте код, структуру, в общем стиль, который ставите в личку что ли...Оо"

0

28

  • Автор: Danessa
  • активный пользователь
  • Danessa
  • Уважение: +19
  • Зарегистрирован: 13-04-2009
  • Провел на форуме:
    2 дня 14 часов
  • Пол: Женский
  • Последний визит:
    15-11-2012 18:48:25

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

0

29

  • Автор: Kirio
  • активный пользователь
  • Уважение: +0
  • Зарегистрирован: 12-12-2009
  • Провел на форуме:
    4 часа 9 минут
  • Последний визит:
    14-03-2010 22:47:16

А можно границы у форума совсем убрать??
Прямо как здесь: http://s12.radikal.ru/i185/1001/5c/e04fdb0ac90dt.jpg

0

30

  • Автор: Deisy-
  • активный пользователь
  • Deisy-
  • Уважение: +892
  • Зарегистрирован: 27-03-2009
  • Провел на форуме:
    2 месяца 3 дня
  • Последний визит:
    10-11-2013 10:35:10

Kirio
урр, не тут вопросы задаём ><"
и поиском надо уметь пользоваться, мусолили это тысячу и один раз.
в /* CS2 Border colours везде ставим вместо #цвет это: transparent

0

Страница: 1

Вы здесь » Alternative Art : breath of a phoenix » Восстановленное » Урок по созданию дизайна (цвета CSS)...

Рейтинг форумов | Создать форум бесплатно