Ну Санни, чему ты хочешь научится?
Солне и цветы (для Sunflower)
Сообщений 1 страница 10 из 43
Поделиться230-08-2010 21:42:29
для начала я бы хотел разобраться с кодом цветов. Вот с форума, над которым я работаю:
/* CS1 Background and text colours -------------------------------------------------------------*/ /* CS1.1 */ html, body {background-color: #ffffff; background-image: url(http://xmages.net/storage/10/1/0/2/d/upload/5413e918.gif); background-repeat: repeaty; background-attachment: fixed; background-position: center; color: black;} BODY {background:fixed;} /* CS1.2 */ .punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer { background-color: #; color: #4D2708; } /* CS1.3 */ #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 { background-image : url(http://xmages.net/storage/10/1/0/4/f/upload/60022053.png); color: #fff; font-style: italic; font-family: Arial Narrow; text-align: center; } /* CS1.4 */ #pun-title, #pun-title .container, .punbb .modmenu .container { background-color: #; color: #333; } #pun-title .title-logo{background: url(http://xmages.net/storage/10/1/0/5/2/upload/c41d7303.png) no-repeat top center; padding: 0px;} #pun-title table { background: url() repeat-x; background-position: 0px 1px; } /* CS1.5 */ .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span { background-color: #f7f7f7; color: #561E07 } /* CS1.6 */ .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl { background-color: #6B5846; color: #683330 } /* CS1.7 */ .punbb .quote-box, .punbb .code-box { background-color: #f9f9f9; color: #333 } /* CS1.8 */ #pun-navlinks .container { background-color: #0F5995; color: #f1f1f1; } .offline li.pa-online strong { font-weight: normal } /* CS2 Border colours -------------------------------------------------------------*/ /* CS2.1 */ .punbb .container, .punbb .post-body, .post h3, #pun-title { border-color: #ccc #ccc #aaa #ccc } /* CS2.2 */ .punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info, .punbb .category, .punbb .post { border-color: #f5f5f5 } /* CS2.3 */ #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 { border-color: #004F90; } /* 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: #C9D6E0; } /* CS2.5 */ .punbb th { border-color: #dedfdf } /* CS2.6 */ .punbb .quote-box, .punbb .code-box { border-color: #ccc #fff #fff #ccc; } #pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span { border-color: #ccc } #pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend { border-color: #fff } .punbb .divider { border-color: #ccc #fff #fff #fff } .punbb .formal fieldset .post-box, .punbb .info-box { border: 1px solid #dedfdf } li.pa-online { border-left-color: #005EAB; } /* 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: #005EAB } .punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited { color: #333 } /* 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; } /* CS3.3 */ #pun-navlinks a { color: #eee; text-decoration: none } /* CS3.4 */ #pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active { color: #fff; text-decoration: underline } #pun-pagelinks a:active, #pun-pagelinks a:focus { background-color: #333; color: #fff; } /* CS4 Post status icons -------------------------------------------------------------*/ div.icon { background: url(http://xmages.net/storage/10/1/0/a/c/upload/4ac5aec8.gif) no-repeat; } tr.inew div.icon { background: url(http://xmages.net/storage/10/1/0/2/4/upload/e49e8568.gif) no-repeat; } tr.iclosed div.icon { background: url(http://xmages.net/storage/10/1/0/c/9/upload/f7e9ec92.gif) no-repeat; } tr.iredirect div.icon { background: url(http://xmages.net/storage/10/1/0/8/6/upload/bf44d634.gif) no-repeat; } tr.isticky div.icon { background: url(http://xmages.net/storage/10/1/0/8/6/upload/bf44d634.gif) no-repeat; } #pun-main div.catleft, #pun-main div.catright {display: none} #pun-about p.container {background-image: url("http://xmages.net/storage/10/1/0/5/4/upload/1dab5ab0.jpg"); background-repeat: no-repeat; height: 250px;}
мне бы поподробнее, какой код за что отвечает? Имею ввиду только цвета(текст, фон и т.п.)
Что можно сделать прозрачным, а от чего не отвяжешься?
Поделиться330-08-2010 21:44:35
с ответом не тороплю, можно(даже желательно) постепенно, чтоб всё в голове отложилось и больше методом тыка работать не пришлось.
Поделиться430-08-2010 21:44:55
А ты откуда взяла эти коды
Поделиться530-08-2010 21:51:32
сам тестовик - http://rictest.mybb.ru/
Администрирование-->Стиль--->Цвета style_cs.css
Поделиться630-08-2010 21:56:53
А ты нек хочешь заново свой стиль сделать? Ты фш владеешь?
Поделиться730-08-2010 22:01:26
в смысле? опять с нуля. Фотошопом я владею - все элементы на тестовике собственного производства. Даже как-то умудрился таблицу сделать.
но могу зарегистрировать ещё один сайт исключительно для наших уроков^^
Поделиться830-08-2010 22:02:20
-Что такое дизайн для форума? Это его внешний вид. Так вот, для этого мы должны понять, что лежит в основе построения(написания) стиля для форума!? Правильно, это его структура. Но сначала мы постараемся сделать только цвета для нашего форума, а структуру подобрать. Начнем с самого малого. Для написания стиля нам понадобиться некоторые программки. Это:
http://www.radikal.ru/
- Радикал (можно савип ру, но мне радикал ближе)
http://0pk.ru/generator/
- Генератор стилей оформления. (чтобы не писать код целиком)
http://my forumnamename.mybbl.ru/
- Ваш форум- тестовик (для того, что бы тестировать стили.)
И ещё, никакого русского не должно быть в коде.
Начальные понятия:
Структура - style.css
Цвета - style_cs.css
И так, приступим к изучению. Структуру вы увидите потом, но для начала, чтобы понять как делать стиль, вы должны сделать пару штук под заказ. С опытом работы все лучше и лучше становятся. Вот ваш план действий по цветам:
1) Поставить фон
2) Поставить шапку
3) Сделать иконки
4) Стиль готов!
А что такое цвета и структура?
Структура:
Это как скелет форума. Там все основное.
Цвета:
Вот это уже более широкое понятие. Это все иконки, шапка, цвета....
Как работать с генератором стилей оформления?
Зайдите по ссылке генератора, которую я вам дала. Там есть окошко. В нем написано: Сгенерировать стиль основываясь на цвете ... и потом окошко с цветом. Выбираете свой цвет. И нажимаете кнопку "Генерация". Если вам не понравилось, вы можете попробовать "инвертировать", то есть сделать стиль наоборот. Для этого нужно поставить галочки на двух местах. И нажать генерацию. Понятно. Но если результат вам понравился, то переходим в следующую вкладку: "Разное". Там написано:
Настройки страницы
Под ним всякие настройки. Ставите на свое. И ещё одно примечание: если стиль инвертированный, то цвет текста измените НЕ НА БЕЛЫЙ. Если вы этого не сделаете, тогда текст не будет видно. Текст форума должен совпадать по цвету с текстом в шапке! После того, как ввели настройки, переходим во вкладку "Стили ссылок". В ней написан подраздел "Начальное состояние". Это когда ссылке не подвергается наведению курсора. Делаете настройки. А в подразделе "При наведении курсора"
это состояние ссылки при наведении курсора на неё. Далее. Переходим в окошко "Стили меню".
Там делаем тоже самое, что и с ссылками, только это уже меню (форум, участники...).
Если вы все закончили, то нажимаете в окошке "Основное" кнопку "Сохранить стиль". И копируете код. После того, как его скопируете вставьте его в эту тему. А я скажу что делать дальше.
Поделиться930-08-2010 22:03:29
Я тебе кое что выложила попробуй сделать пока это!
Поделиться1030-08-2010 22:25:33
ладно, спасибо. Щас из-за компа выгоняют. Принцип я поняла, отчитаюсь по-нормальному завтра, если успею^^ещё раз спасибо, что взялась за меня