Тех-помощь по форумамあ

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

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

Вы здесь » Тех-помощь по форумамあ » Вопросы по оформлению форума » FAQ по дизайну форума в CSS

FAQ по дизайну форума в CSS

Страница: 1

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

1

  • Автор: Spirit of Air
  • Администратор
  • Spirit of Air
  • Зарегистрирован: 2010-09-21
  • Приглашений: 0
  • Сообщений: 26
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    5 часов 12 минут
  • Последний визит:
    2011-02-28 22:30:17

Являясь администратором форума, мы можем полностью изменить всю его графическую разметку. Инитерфейс форума состоит из отдельных элементов - чаще всего таблиц и других объектов, лежащих внутри этих таблиц. Это не значит, что мы можем изменить СОДЕРЖАНИЕ этих элементов, по крайней мере черех CSS, однако пользуясь исклюсительно CSS кодами мы можем в абсолютной степени из менить все, что касается их дизайна и графического оформлание - ФОНЫ, ФОНОВЫЕ РИСУНКИ,  ОБРАМЛЕНИЯ, ВЫРАВНИВАНИЕ ТЕКСТА, ВСЕ ПАРАМЕТРЫ ШРИФТОВ И МНОГОЕ ДРУГОЕ.

Вся работа с дизайном форума через css коды будет представлять собой прописывание кодов для отдельных элементов. Вставлять данные коды необходимо в Администрирование - Настройки - HTML-верх.
Так как речь идет о css кодах, то прежде чем начать прописывать css текст для каждого отдельного элемента форума необходимо будет проставить теги стиля, между которыми можно будет расположить css для отдельных элементов.
Код:

Код:
<style type="text/css">
..........................................
.........................................
.........................................
........................................
........................................
</style>

Вписав в HTML-верх эти два тега между ними, вместо многоточия, можно будет вставлять все необходимые для нового дизайна css коды.
Принципиальное правило которое нужно учитывать: вы можете прописать коды для всех элементов или только для одного, а также только для некоторых, но чтобы они работали, размещайте их всегда МЕЖДУ тегами <style type="text/css">    и  </style>

0

2

  • Автор: Spirit of Air
  • Администратор
  • Spirit of Air
  • Зарегистрирован: 2010-09-21
  • Приглашений: 0
  • Сообщений: 26
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    5 часов 12 минут
  • Последний визит:
    2011-02-28 22:30:17

Для тех, кто имеет слабые или приблизительные представления о CSS

Как было сказано, менять дизайн всех элементов мы будем при помощи css кодов для этих элементов.
Что проедставляет собой css код для какого либо элемента?
Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.
Стандартный css код выглядит следующим образом.

#element1 {parameter: argument;}

#element1 - это ИМЯ элемента, который мы собрались менять
parameter - это любое СВОЙСТВО этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument - это ЗНАЧЕНИЕ свойства. Наприимер, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.

Код:
#pun-navlinks {backgroud-color: #FF0000;}

где #pun-navlinks - название элемента, background-color - свойство, ЦВЕТ ФОНА в даном случае, а #FF0000 - само название цвета.

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

Код:
#pun-navlinks {background-color: #FF0000; width: 400px; height: 200px;}

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

Код:
#pun-navlinks, #pun-ulinks {background-color: #FF0000; width: 400px; height: 200px;}


Таким образом, например, мы придадим одинаковые фон, высоту и ширину меню навигации и меню пользовательских ссылок.
Далее следует список наиболее часто используемых ПАРАМЕТРОВ. Вы не обязаны прописывать их все для каждого элемента, а только те, которые собрались менять.

0

3

  • Автор: Spirit of Air
  • Администратор
  • Spirit of Air
  • Зарегистрирован: 2010-09-21
  • Приглашений: 0
  • Сообщений: 26
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    5 часов 12 минут
  • Последний визит:
    2011-02-28 22:30:17

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

Код:
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>

0

4

  • Автор: Spirit of Air
  • Администратор
  • Spirit of Air
  • Зарегистрирован: 2010-09-21
  • Приглашений: 0
  • Сообщений: 26
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    5 часов 12 минут
  • Последний визит:
    2011-02-28 22:30:17

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>

0

5

  • Автор: Spirit of Air
  • Администратор
  • Spirit of Air
  • Зарегистрирован: 2010-09-21
  • Приглашений: 0
  • Сообщений: 26
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    5 часов 12 минут
  • Последний визит:
    2011-02-28 22:30:17

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

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

Пример:

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

0

Страница: 1

Вы здесь » Тех-помощь по форумамあ » Вопросы по оформлению форума » FAQ по дизайну форума в CSS

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