Помни,общение - самое главное.Здесь ты его найдешь.

Добро пожаловать на форум!
Чтобы видеть все разделы форума войдите или зарегистрируйтесь
Помни,общение - самое главное.Здесь ты его найдешь.

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

    Comparteixi
    avatar
    Admin
    Admin

    Сообщения : 272
    Очки : -2147483648
    Репутация : 3 Дата регистрации : 11/12/2009

    Лист персонажа
    Тест:

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

    Missatge por Admin el Dj 24 Des 2009 - 1:36

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

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

    <style type="text/css">
    ..........................................
    .........................................
    .........................................
    ........................................
    ........................................
    </style>

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


    Для тех, кто имеет слабые или приблизительные представления о 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;}

    Таким образом, например, мы придадим одинаковые фон, высоту и ширину меню навигации и меню пользовательских ссылок.

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

    Сообщения : 272
    Очки : -2147483648
    Репутация : 3 Дата регистрации : 11/12/2009

    Лист персонажа
    Тест:

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

    Missatge por Admin el Dj 24 Des 2009 - 1:37

    Параметры CSS

    ПРИМЕЧАНИЕ 1: для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соотвествующего цвета. Их можно найти тут: ТАБЛИЦА ВЕБ-ЦВЕТОВ

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

    Код:

    #element1 {background-color: #FF0000;}

    ПРИМЕЧАНИЕ 2: для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения
    em - текущий кегль (высота шрифта);
    ех - высота буквы х для текущего кегля;
    рх - пикселы (относительно координат окна).
    in - дюймы;
    cm - сантиметры;
    mm - миллиметры;
    pt - пункты;
    ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ
    Например, вот так мы задаем ширину и высоту элемента
    Код:

    #elemnt1 {height: 200px; width: 70%;}

    background-color
    Цвет фона элемента. Значением может быть веб-название цвета.
    Пример: #element1{backgroun-color: #FF0000;}

    background-attachment
    Определяет, будет ли прокручиваться фон.
    Значения:
    scroll - фон поддается прокрутке
    fixed - не поддается прокрутке.
    Пример: #element1 {background-attachment: fixed;}

    background-image
    Фоновая картинка
    Значения:
    url ("...") - где в скобках адрес картинки
    none - никакой картинки
    Пример: #element1 {background-image: url("http://forum.mybb.ru/viewtopic.php?pid=40#p40.jpg");}

    background-repeat
    Определяет, будет ли размножаться фоновая картинка
    Значения:
    no-repeat - Не размножается
    repeatx - размножается по горизонтлаи
    repeaty - размножанется по вертикали
    repeatxy - размножается в обоих направлениях.

    background-position
    Расположение фоновой картинки на странице
    Значения:
    Сначала указывается расположение по вертикальной оси: top, center или bottom, затем по горизонтальной: left, center или right
    Пимер: #element1 {background-position: top center;}

    border
    Все параметры рамки, например, толщина, цвет и т.д.
    Пример: #element1 {border: #FF0000 2px;}

    border-color
    Цвет рамки
    Пример: #element1 {border-color: #FF0000;}

    border-width
    Толщина рамки
    Пример: #element1 {border-width: 2px;}

    border-style
    Стиль оформления рамки всех сторон рамки
    Значения:
    none - указывает на то, что рамки нет.
    dotted - задает пунктирную рамку из точек
    dashed - задает штрих - пунктирную рамку
    solid - задает одинарную сплошную рамку
    double - задает двойную сплошную рамку
    groove - создает трехмерный эффект
    ridge - создает трехмерный эффект возвышающейся рамки
    inset - создает трехмерный эффект заглубленности фона
    outset - создает трехмерный эффект выпуклости фона
    Пример: #element1 {border-style: none solid none none;}

    border-top
    Все параметры верхней рамки
    border-bottom
    Все параметры нижней рамки
    border-left
    Все параметры левой рамки
    border-right
    Все параметры правой рамки
    Пример: #element1 {border-top: none #FF0000 2px}

    color
    Цвет шрифта в элементе
    Пример: #element1 {color: #FF0000;}

    float
    Отображение растекающегося объекта
    Значения:
    left - отображает растекающийся объект на левой стороне
    right - отображает растекающийся объект на правой стороне
    none отображает объект вставленным в страницу
    Пример: #element1 {float: left;}

    font-size
    Размер шрифта
    Значения: См. Примечание 2.
    А также:
    xx-small, x-small, small, medium, large, x-large, xx-large.
    Пример: #element1 {font-size: small;}

    font-style
    Начертание шрифта.
    Значения:
    normal - соответствует основному начертанию
    italic - курсив
    oblique - чуть менее наклонный, чем курсив
    Пример: #element1 {font-style: italic;}

    font-weight
    Толщина начертания
    Значения:
    normal - обычный шрифт
    bold - полужирный
    число от 100 (минимальная жирность) до 900 (максимальная)
    Пример: #element1 {font-weight: 200;}

    font-family
    Семейство шрифта
    Пример: #element1 {font-family: sans serif;}

    font
    Все вышеперечисленные параметры шрифта вместе
    Пример: #element1 {font-: sans serif #FF0000 small bold;}

    display
    Способ отображения элемента
    Значения:
    none - элемент вообще не виден
    block - выдает элемент в рамке
    list-item - выдает элемнт как часть списка и присваивает ему маркер
    inline - выводит объект в одну строку.
    #element1 {display: none;}

    height
    высота элемента
    width
    ширина элемента
    Значения: см. Примечание2.
    Пример: #element1 {height: 20px; width: 400px;}

    padding и margin
    Это два на первый взгляд похожик параметра. Но между ними есть разница:
    padding - линия отбивки материнского объекта
    margin - линия отступа дочернего объекта.
    Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут распологаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данноом случае текст.

    padding-top
    Верхняя отбивка
    padding-bottom
    нижняя отбивка
    padding-left
    левая отбивка
    padding-right
    Правая отбивка.
    padding
    все стороны отбивки сразу.
    Значения: смотри Примечание 2.
    Пример: #element1 {padding-top: 20px;}

    margin-top
    Верхний отступ
    margin-bottom
    нижний отступ
    margin-left
    левый отсуп
    margin-right
    Правый отсуп
    margin
    все стороны отступа сразу.
    Значения: смотри Примечание 2. ДЛЯ ОТСТУПОВ ДОПУСТИМЫ ОТРИЦАТЕЛЬНЫЕ ЗНАЧЕНИЯ
    Пример: #element1 {margin-top: -20px;}

    text-align
    Выравнимание текста внутри элемента.
    Значения:
    left - по левому краю
    right - по правому краю
    justify - по ширине
    center - по центру
    Пример: #element1 {text-align: center;}

    text-decoration
    Украшение текста
    Значения:
    underline - подчеркивание
    overline - верхнее подчеркивание
    none - никакого
    blink - мигание.
    Пример: #element1 {text-decoration: underline;}

    vertical-align
    выравнивание элемента по вертикали
    Значения:
    top - по верхнему краю
    bottom - по нижнему
    middle - посередине
    Пример: #element1 {vertical-align: middle;}
    avatar
    Admin
    Admin

    Сообщения : 272
    Очки : -2147483648
    Репутация : 3 Дата регистрации : 11/12/2009

    Лист персонажа
    Тест:

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

    Missatge por Admin el Dj 24 Des 2009 - 1:39

    Стиль страницы
    tyle 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;
    }


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

    HTML, BODY {...}

    Пример:


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


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

    #pun {...}

    Пример:


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

    #pun-title table {...}

    Пример:


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

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

    Пример:
    Код:



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



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

    #pun-navlinks .container {...}

    Пример:
    Код:


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

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

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

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

    Пример:
    Код:



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

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

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

    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 {...}

    Пример:
    Код:



    Ссылки:
    Код:



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

    #pun-announcement h2 {...}

    Пример:
    Код:



    8. Объявление(Скрин 1, элемент Cool
    Код:

    #pun-announcement .container {...}

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

    #pun-status .container {...}

    Пример:
    Код:



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

    #pun-crumbs1 .container {
    ...}

    Пример:
    Код:

    avatar
    Admin
    Admin

    Сообщения : 272
    Очки : -2147483648
    Репутация : 3 Дата регистрации : 11/12/2009

    Лист персонажа
    Тест:

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

    Missatge por Admin el Dj 24 Des 2009 - 1:40

    Стиль страницы
    Код:


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



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

    #pun-main h2 {...}

    Пример:


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

    #pun th {...}

    Пример:


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

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

    Пример:


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



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



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



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



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

    .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 {...}

    Пример:


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

    #pun .tc3 {...}

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

    #pun .tcr {...}

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

    .modlist {...}

    Пример:


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


    Contenido patrocinado

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

    Missatge por Contenido patrocinado

      Temas similares

      -

      Data i hora actual: Dc 14 Nov 2018 - 9:06