Меняем дизайн 985. Часть 2 - CSS - Установка дизайна - Cайтостроение - Каталог статей

После того, как мы поменяли HTML, поднимается вопрос: а как же поменять это ужасное меню? а форум? а новости? а фон в комментариях? для этого у нас есть СSS.Прежде всего хочется поменять меню
в коде ищем то, что выделено, и стираем или меняем на свое:

/* Site Menus */
.uMenuH li {float:left;padding:0 5px;}

.uMenuV .uMenuItem {font-family:Tahoma,Arial,Helvetica;}
.uMenuV li a:link {text-decoration:none; color:#000000}
.uMenuV li a:visited {text-decoration:none; color:#000000}
.uMenuV li a:hover {text-decoration:none; color:#578A8D; font-weight:bold;}
.uMenuV li a:active {text-decoration:none; color:#000000; font-weight:bold;}

.uMenuV .uMenuItemA {font-weight:bold;}
.uMenuV a.uMenuItemA:link {text-decoration:none; color:#578A8D}
.uMenuV a.uMenuItemA:visited {text-decoration:none; color:#578A8D}
.uMenuV a.uMenuItemA:hover {text-decoration:none; color:#578A8D;}
.uMenuV .uMenuArrow {position:absolute;width:10px;height:10px;right:0;top:3px;background:url('/.s/img/wd/1/ar1.gif') no-repeat 0 0;}
.uMenuV li {margin: 0; padding: 0 0 0 13px; background: url('/.s/t/985/13.gif') no-repeat;line-height:27px;}
/* --------- */

ЭТО должно убраться.

новости

их код:

/* Entries Style */
.eBlock {background: #959595;color:#FFFFFF;}
.eTitle {font-family:Arial,Sans-Serif;font-size:13px;font-weight:bold;color:#578A8D; padding: 2px; border:1px solid #FFFFFF; background: url('/.s/t/985/14.gif');}
.eMessage {text-align:justify;padding-bottom:5px;background:#FFFFFF;color:#000000;}
.eText {text-align:justify;padding-bottom:5px;padding-top:5px;background:#FFFFFF;color:#000000;}
.textHr {color:#DDDDDD;height:1px;border:1px dashed #DDDDDD;}

.eDetails {background:#E7E7E7;font-family:Tahoma,Arial,Sans-Serif;color:#1A1A1A;padding-bottom:5px;padding-top:3px;text-align:left;font-size:7pt;}
.eDetails1 {background:#E7E7E7;font-family:Tahoma,Arial,Sans-Serif;color:#1A1A1A;padding-bottom:5px;padding-top:3px;text-align:left;font-size:8pt;}
.eDetails2 {background:#E7E7E7;font-family:Tahoma,Arial,Sans-Serif;color:#1A1A1A;padding-bottom:5px;padding-top:3px;text-align:left;font-size:8pt;}

.eRating {font-size:7pt;}

.eAttach {margin: 16px 0 0 0; padding: 0 0 0 15px; background: url('/.s/t/985/15.gif') no-repeat 0px 0px;}
/* ------------- */

разберем по порядку.
Первая строчка (.eBlock {background: #959595;color:#FFFFFF;}) отвечает за обводку новости и цвет ее заголовка
Вторая строчка (.eTitle {font-family:Arial,Sans-Serif;font-size:13px;font-weight:bold;color:#000000; padding: 2px; border:1px solid #FFFFFF;})
отвечает за шрифт заголовка
Третья строчка (.eMessage {text-align:justify;padding-bottom:5px;background:#FFFFFF;color:#000000;}) отвечает за фон сообщения и цвет шрифта
Четвертая строчка (.eText {text-align:justify;padding-bottom:5px;padding-top:5px;background:#b4d9ec;color:#000000;}) отвечает за стиль текста в сообщении
за что отвечает 5, я не разобралась
дальше идет три кода eDetails. за что отвечает каждый из них, я тоже не разобралась, поэтому всегда меняю их одинаково.

Стиль комментариев

Этот код совсем маленький. так же как в случае с eDetails я меняла их одинаково. Если не ошибаюсь, первая строчка отвечает за ответ в самом комментарии.

Стиль добавления комментариев

/* Comments Form Style */
.commTable {background:#FFFFFF; border:1px solid #E1E1E1;}
.commTd1 {color:#000000;}
.commTd2 {}
.commFl {width:100%;}
.smiles {border:1px inset;background:#FFFFFF; border:1px solid #E1E1E1;}
.commReg {padding: 10 0 10 0px; text-align:center;}
.commError {color:#FF0000;}
.securityCode {}
/* ------------------- */

здесь нужно менять только 2 фона: фон всей таблички и фон смайликов. (то есть 1 и 5 строчку) желательно брать тот же цвет что и для комментов
Следующие два стиля мы благополучно пропускаем, так как я не знаю к чему они относятся.

Календарь

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

/* News/Blog Calendar Style */
.calMonth {text-align:right; }
.calWday {background:url('/.s/t/985/18.gif') #AD7C67;color:#FFFFFF; width:17px;border:1px solid #FFFFFF;}
.calWdaySe {background:url('/.s/t/985/18.gif') #AD7C67; width:17px;color:#FFFFFF; font-weight:bold;border:1px solid #FFFFFF;}
.calWdaySu {background:url('/.s/t/985/18.gif') #AD7C67; width:17px; font-weight:bold; color:#FFFFFF;border:1px solid #FFFFFF;}
.calMday {border:1px solid #E1E1E1; background:#FFFFFF;}
.calMdayA {border:1px inset #E1E1E1; background:#FFFFFF; font-weight:bold;}
.calMdayIs {border:1px outset #E1E1E1; background:#FFFFFF;}
.calMdayIsA {border:1px outset; background:#A4CFD1;font-weight:bold;}
a.calMonthLink:link {text-decoration:none; color:#578A8D;}
a.calMonthLink:visited {text-decoration:none; color:#578A8D;}
a.calMonthLink:hover {text-decoration:underline; color:#578A8D;}
a.calMonthLink:active {text-decoration:underline; color:#000000;}
a.calMdayLink:link {text-decoration:underline; color:#578A8D;}
a.calMdayLink:visited {text-decoration:underline; color:#578A8D;}
a.calMdayLink:hover {text-decoration:underline; color:#000000;}
a.calMdayLink:active {text-decoration:underline; color:#000000;}
/* ------------------------ */

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

ФОРУМ

О, для форума целый раздел отведен.

Стиль названия, субтопа и дополнительной информации

/* General forum Table View */
.gTable {background:#959595}
.gTableTop {padding:2px;background:url('/.s/t/985/14.gif') top #575757;color:#578A8D;font-weight:bold;height:22px;padding-left:10px;font-size:10pt;border:1px solid #FFFFFF;}
.gTableSubTop {padding:2px;background:url('/.s/t/985/18.gif') center #AD7C67;color:#000000;height:20px;border:1px solid #FFFFFF;}
.gTableBody {padding:2px;background:#ECECEC;}
.gTableBody1 {padding:2px;background:#FFFFFF;}
.gTableBottom {padding:2px;background:#ECECEC;}
.gTableLeft {padding:2px;background:#ECECEC;font-weight:bold;color:#578A8D}
.gTableRight {padding:2px;background:#ECECEC}
.gTableError {padding:2px;background:#ECECEC;color:#FF0000;}
/* ------------------------ */

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

Стили форума

/* Forums Styles */
.forumNameTd,.forumLastPostTd {padding:2px;background:#FFFFFF}
.forumIcoTd,.forumThreadTd,.forumPostTd {padding:2px;background:#ECECEC}
.forumLastPostTd,.forumArchive {padding:2px;font-size:7pt;}

a.catLink:link {text-decoration:none; color:#578A8D;}
a.catLink:visited {text-decoration:none; color:#578A8D;}
a.catLink:hover {text-decoration:underline; color:#000000;}
a.catLink:active {text-decoration:underline; color:#578A8D;}

.lastPostGuest,.lastPostUser,.threadAuthor {font-weight:bold}
.archivedForum{font-size:7pt;color:#FF0000;font-weight:bold;}
/* ------------- */

первая строчка - фон названия форума и последнего добавленного сообщения
вторая строчка - фон иконки, счетчика тем и сообщений
в них только поменять цвет на другой или на фон
третья строчка - шрифт которым написано последний пост и [архив]
следующие 4 - это ссылки, то есть как написано название форума и остальные ссылки.
link - ссылка в обычном состоянии
visited - ссылка на которой вы уже были
hover - ссылка на которую наведен курсор
active - насколько я поняла, это гда вы находитесь сейчас.

Заголовки форумов

так написано в стилях. в общем то этот раздел отвечает за второстепенную информацию, такую как модер, кто добавил последнее сообщение и т.д.

/* forum Titles & other */
.forum {font-weight:bold;font-size:9pt;}
.forumDescr,.forumModer {color:#858585;font-size:7pt;}
.forumViewed {font-size:9px;}
a.forum:link, a.lastPostUserLink:link, a.forumLastPostLink:link, a.threadAuthorLink:link {text-decoration:none; color:#578A8D;}
a.forum:visited, a.lastPostUserLink:visited, a.forumLastPostLink:visited, a.threadAuthorLink:visited {text-decoration:none; color:#578A8D;}
a.forum:hover, a.lastPostUserLink:hover, a.forumLastPostLink:hover, a.threadAuthorLink:hover {text-decoration:underline; color:#6F8EB3;}
a.forum:active, a.lastPostUserLink:active, a.forumLastPostLink:active, a.threadAuthorLink:active {text-decoration:underline; color:#578A8D;}
/* -------------------- */

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

Счетик страниц

/* forum Page switches */
.switches {background:#E1E1E1;}
.pagesInfo {background:#FFFFFF;padding-right:10px;font-size:7pt;}
.switch {background:#FFFFFF;width:15px;font-size:7pt;}
.switchActive {background:#ECECEC;font-weight:bold;color:#578A8D;width:15px}
a.switchDigit:link,a.switchBack:link,a.switchNext:link {text-decoration:none; color:#000000;}
a.switchDigit:visited,a.switchBack:visited,a.switchNext:visited {text-decoration:none; color:#000000;}
a.switchDigit:hover,a.switchBack:hover,a.switchNext:hover {text-decoration:underline; color:#FF0000;}
a.switchDigit:active,a.switchBack:active,a.switchNext:active {text-decoration:underline; color:#FF0000;}
/* ------------------- */

здесь все фоны я меняю на какой-то один цвет

Стиль тем

/* forum Threads Style */
.threadNametd,.threadAuthTd,.threadLastPostTd {padding:2px;padding:2px;background:#FFFFFF}
.threadIcoTd,.threadPostTd,.threadViewTd {padding:2px;background:#ECECEC}
.threadLastPostTd {padding:2px;font-size:7pt;}
.threadDescr {color:#858585;font-size:7pt;}
.threadNoticeLink {font-weight:bold;}
.threadsType {padding:2px;background:#E5BFAD;height:20px;font-weight:bold;font-size:7pt;color:#000000;padding-left:40px;}
.threadsDetails {padding:2px;background:#C1D6D7;height:20px;color:#000000;}
.forumOnlineBar {padding:2px;background:#9DAEAF;height:20px;color:#FFFFFF;}

a.threadPinnedLink:link {text-decoration:none; color:#0000FF;}
a.threadPinnedLink:visited {text-decoration:none; color:#0000FF;}
a.threadPinnedLink:hover {text-decoration:none; color:#FF0000;}
a.threadPinnedLink:active {text-decoration:underline; color:#FF0000;}

a.threadLink:link {text-decoration:none; color:#578A8D;}
a.threadLink:visited {text-decoration:none; color:#578A8D;}
a.threadLink:hover {text-decoration:underline; color:#000000;}
a.threadLink:active {text-decoration:underline; color:#000000;}

.postpSwithces {font-size:7pt;}
.thDescr {font-weight:normal;}
.threadFrmBlock {font-size:7pt;text-align:right;}
/* ------------------- */

здесь первые две строчки меняем как в стилях форума, то есть на какой-нибудь определенный один или два цвета
.threadLastPostTd {padding:2px;font-size:7pt;}
.threadDescr {color:#858585;font-size:7pt;}
отвечают за последний пост и описание темы, желательно поменять на один и тот же цвет (шрифта)
.threadsType {padding:2px;background:#E5BFAD;height:20px;font-weight:bold;font-size:7pt;color:#000000;padding-left:40px;}
.threadsDetails {padding:2px;background:#C1D6D7;height:20px;color:#000000;}
.forumOnlineBar {padding:2px;background:#9DAEAF;height:20px;color:#FFFFFF;}
я их всегда меняю на какой-нибудь один цвет. отвечает за детали, онлайн бар и тип тем (важные, не важные)

Стиль постов

/* Posts View */
.postTable {background:#E1E1E1}
.postPoll {background:#ECECEC;text-align:center;}
.postFirst {background:#ECECEC;border-bottom:3px solid #FFFFFF;}
.postRest1 {background:#ECECEC;}
.postRest2 {background:#ECECEC;}
.postSeparator {height:3px;background:#B4FCFF;}

.postTdTop {background:url('/.s/t/985/18.gif') center #AD7C67;border:1px solid #FFFFFF;}
.postBottom {background:#B8B8B8;height:20px}
.postUser {font-weight:bold;}
.postTdInfo {text-align:center;padding:5px;background:#ECECEC;}
.postRankName {margin-top:5px;}
.postRankIco {margin-bottom:5px;margin-bottom:5px;}
.reputation {margin-top:5px;}
.signatureHr {margin-top:20px;color:#597798;}
.posttdMessage {padding:5px;background:#FFFFFF;}

.postPoll {padding:5px;}
.pollQuestion {text-align:center;font-weight:bold;}
.pollButtons,.pollTotal {text-align:center;}
.pollSubmitBut,.pollreSultsBut {width:140px;font-size:7pt;}
.pollSubmit {font-weight:bold;}
.pollEnd {text-align:center;height:30px;}

.codeMessage {background:#FFFFFF;font-size:9px;}
.quoteMessage {background:#FFFFFF;font-size:9px;}

.signatureView {font-size:7pt;}
.edited {padding-top:30px;font-size:7pt;text-align:right;color:gray;}
.editedBy {font-weight:bold;font-size:8pt;}

.statusBlock {padding-top:3px;}
.statusOnline {color:#0000FF;}
.statusOffline {color:#FF0000;}
/* ---------- */

большой раздельчик, большой...
.postTable {background:#E1E1E1} - контур
.postPoll {background:#ECECEC;text-align:center;} - стиль опроса, фон на котором сами вопросы
.postFirst {background:#ECECEC;border-bottom:3px solid #FFFFFF;}
.postRest1 {background:#ECECEC;}
.postRest2 {background:#ECECEC;} - меняйте все на один цвет
.postSeparator {height:3px;background:#B4FCFF;} - разделитель постов

.postTdTop {background:url('/.s/t/985/18.gif') center #AD7C67;border:1px solid #FFFFFF;}
.postBottom {background:#B8B8B8;height:20px} - верх и низ поста,желательно поменять на один цвет, темнее чем иформация о юзере и фон сообщения
.postUser {font-weight:bold;} - каким шрифтом написана информация о юзере
.postTdInfo {text-align:center;padding:5px;background:#ECECEC;} - фон юзера
.posttdMessage {padding:5px;background:#FFFFFF;}
- фон сообщения. желательно поменять на один цветс фоном юзера
.postPoll {padding:5px;}
.pollQuestion {text-align:center;font-weight:bold;}
.pollButtons,.pollTotal {text-align:center;}
.pollSubmitBut,.pollreSultsBut {width:140px;font-size:7pt;}
.pollSubmit {font-weight:bold;}
.pollEnd {text-align:center;height:30px;} - здесь я никогда ничего не меняю

.codeMessage {background:#FFFFFF;font-size:9px;}
.quoteMessage {background:#FFFFFF;font-size:9px;} - фон цитаты и кода, шрифт

.statusOnline {color:#0000FF;}
.statusOffline {color:#FF0000;} - чем написано онлайн и оффлайн

Стиль добавления сообщения

/* forum Post Form */
.loginButton {font-size:7pt;background:#FFFFFF;color:#575757;border:1px outset #636363;}
.pollBut, .searchSbmFl, .commSbmFl, .signButton {font-size:7pt;background:url('/.s/t/985/18.gif') #AD7C67;color:#FFFFFF;border:1px outset #615E58;}

.codeButtons {font-size:7pt;background:url('/.s/t/985/18.gif') #AD7C67;color:#FFFFFF;border:1px outset #615E58;}
.codeCloseAll {font-size:7pt; font-weight:bold;background:url('/.s/t/985/18.gif') #AD7C67;color:#FFFFFF;border:1px outset #615E58;}
.postNameFl,.postDescrFl {width:400px}
.postPollFl,.postQuestionFl {width:400px}
.postResultFl {width:50px}
.postAnswerFl {width:300px}
.postTextFl {width:550px;height:150px}
.postUserFl {width:300px}

.pollHelp {font-weight:normal;font-size:7pt;padding-top:3px;}
.smilesPart {padding-top:5px;text-align:center}
/* ----------------- */

.codeButtons {font-size:7pt;background:url('/.s/t/985/18.gif') #AD7C67;color:#FFFFFF;border:1px outset #615E58;} - отвечает за BB кнопки. поменять фон и цвет шрифта, если не подходит
больше здесь желательно ничего не менять

Вот и все, CSS изменено