Главная » Статьи » Уроки по изменению дизайна » Полностью меняем дизайн

Меняем шаблон 903
Насколько я знаю, весь шаблон меняется в CSS
Меняем шапку
Загружаем шапку в корень сайта.
Идем в CSS
Code
/* General Style */
body {background:url('/.s/t/903/1.gif') center repeat-y #252525; margin:0px; padding:0px;}
#contanier {background:url('/.s/t/903/3.jpg') top center no-repeat;text-align:center;padding-top:20px;}
#content {width:740px;margin-left:auto;margin-right:auto;}
#header {background:url('/.s/t/903/4.jpg') no-repeat;height:152px;color:#FFFFFF;font-size:20pt;font-weight:bold;padding-top:150px;text-align:left;padding-left:400px;}
  *html #header {height:302px !important;}
#dataBar {border-top:1px solid #4D1C00;border-bottom:1px solid #4D1C00;height:25px;margin-top:10px;margin-bottom:10px;font-size:7pt;color:#903400;}
#navBar {float:left;padding-top:5px;}
#loginBar {float:right;padding-top:5px;}
.boxTable {width:200px;background:url('/.s/t/903/5.gif') top no-repeat #252525;margin-bottom:5px;border-bottom:1px solid #FF4A00;}
.boxTitle {padding:10px;color:#FF4A00;text-align:center;font-weight:bold;}
.boxContent {padding:5px;background:url('/.s/t/903/6.gif') bottom no-repeat;}
#footer {height:55px;background:url('/.s/t/903/2.jpg') center no-repeat #DD3800;color:#FFFBD7;}

Выделенное заменяем на адрес шапки.
Разбираем код:
Code
body {background:url('/.s/t/903/1.gif') center repeat-y #252525; margin:0px; padding:0px;}

Это код фона (фон вокруг основного блока, фон самого блока)
Code
#contanier {background:url('/.s/t/903/3.jpg') top center no-repeat;text-align:center;padding-top:20px;}

тоже код фона, но того где рисунок
Code
.boxTable {width:200px;background:url('/.s/t/903/5.gif') top no-repeat #252525;margin-bottom:5px;border-bottom:1px solid #FF4A00;}

код фона блоков. желательно заменить адрес и цвет фона (#252525)
Code
.boxTitle {padding:10px;color:#FF4A00;text-align:center;font-weight:bold;}

как написан заголовок блоков
Code
#footer {height:55px;background:url('/.s/t/903/2.jpg') center no-repeat #DD3800;color:#FFFBD7;}

Code
a:link {text-decoration:underline; color:#FFCD7F;}
a:active {text-decoration:underline; color:#FFCD7F;}
a:visited {text-decoration:underline; color:#FFCD7F;}
a:hover {text-decoration:none; color:#FFFFFF;}

стиль ссылок на всем сайте

Меню

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

.uMenuV .uMenuItem {font-weight:normal;}
.uMenuV li a:link {text-decoration:none; color:#CCCCCC}
.uMenuV li a:active {text-decoration:none; color:#CCCCCC}
.uMenuV li a:visited {text-decoration:none; color:#CCCCCC}
.uMenuV li a:hover {text-decoration:none; color:#FFFFFF}

.uMenuV .uMenuItemA {font-weight:bold;}
.uMenuV a.uMenuItemA:link {text-decoration:none; color:#FFFFFF;}
.uMenuV a.uMenuItemA:visited {text-decoration:none; color:#FFFFFF}
.uMenuV a.uMenuItemA:hover {text-decoration:underline; color:#FFFFFF}
.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/903/8.gif') no-repeat 0px 3px; margin-bottom: .6em;}
/* --------- */

меню. стиль ссылок, стиль активной ссылки. если хотите убрать красную стрелочку, в последнем коде уберите стрелочку.

Новости

Code
/* Entries Style */
.eBlock {border-bottom:1px solid #000000;}
.eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:13px;font-weight:bold;background:url('/.s/t/903/2.jpg') center no-repeat #DD3800;color:#FFFBD7;text-align:center;padding:10px;}
.eTitle a:link {text-decoration:underline; color:#FFFBD7;}
.eTitle a:visited {text-decoration:underline; color:#FFFBD7;}
.eTitle a:hover {text-decoration:none; color:#FFFFFF;}
.eTitle a:active {text-decoration:underline; color:#FFFBD7;}

.eText {text-align:justify; padding:5px;border-top:1px dashed #ffffff;}

.eDetails {background:#111111;color:#666666;padding-bottom:5px;padding-top:3px;text-align:left;font-size:7pt; }
.eDetails1 {background:#111111;color:#666666;padding-bottom:5px;padding-top:3px;text-align:left;font-size:8pt; }
.eDetails2 {background:#111111;color:#666666;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/903/9.gif') no-repeat 0px 0px;}
/* --------------- */

Code
.eBlock {border-bottom:1px solid #000000;}

видите красную полоску под новостью? вот за нее этот код и отвечает.
Code
.eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:13px;font-weight:bold;background:url('/.s/t/903/2.jpg') center no-repeat #DD3800;color:#FFFBD7;text-align:center;padding:10px;}

все о заголовке: фон, цвет, стиль шрифта, обводка... за фон здесь отвечает ссыль.
Code
.eTitle a:link {text-decoration:underline; color:#FFFBD7;}
.eTitle a:visited {text-decoration:underline; color:#FFFBD7;}
.eTitle a:hover {text-decoration:none; color:#FFFFFF;}
.eTitle a:active {text-decoration:underline; color:#FFFBD7;}

ссылки в новостях
Code
.eDetails {background:#111111;color:#666666;padding-bottom:5px;padding-top:3px;text-align:left;font-size:7pt; }
.eDetails1 {background:#111111;color:#666666;padding-bottom:5px;padding-top:3px;text-align:left;font-size:8pt; }
.eDetails2 {background:#111111;color:#666666;padding-bottom:5px;padding-top:3px;text-align:left;font-size:8pt; }

меняйте их одинаково. это полоска под новостью, где написано кто добавил новость, когда.

Комментарии и стиль гостевой книги

Code
/* Comments Style */
.cAnswer {color:#838383;padding-left:15px;padding-top:4px;font-style:italic;}

.cBlock1 {background:#1F1F1F;border:1px solid #252525;}
.cBlock2 {background:#1F1F1F;border:1px solid #252525;}
/* -------------- */

Code
.cAnswer {color:#838383;padding-left:15px;padding-top:4px;font-style:italic;}

стиль ответа в комментарии
Code
.cBlock1 {background:#1F1F1F;border:1px solid #252525;}
.cBlock2 {background:#1F1F1F;border:1px solid #252525;}

стиль комментария, фон и обводка

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

Code
/* Comments Form Style */
.commTable {border:1px solid #252525;background:#ffffff;}
.commTd1 {color:#bfbbff;font-weight:bold;padding-left:5px;}
.commTd2 {padding-bottom:2px;}
.commFl {width:100%;color:#000000;background:#bfbbff;border:1px solid #252525;}
.smiles {border:1px solid #252525;background:#1B1B1B;}
.commReg {padding: 10 0 10 0px; text-align:center;}
.commError {color:#FF0000;}
.securityCode {color:#636363;background:#bfbbff;border:1px solid #252525;}
/* ------------------- */

Code
.commTable {border:1px solid #252525;background:#ffffff;}

фон всей таблицы и обводка
Code
.commFl {width:100%;color:#000000;background:#b00bff;border:1px solid #252525;}

где писать сообщение - фон и расположение
Code
.smiles {border:1px solid #252525;background:#1B1B1B;}

смайлы - обводка, фон
Code
.securityCode {color:#636363;background:#bfbbff;border:1px solid #252525;}

где пишешь код, если не зарегистрирован

Другие стили

Code
/* Other Styles */
.replaceTable {background:#1F1F1F;height:100px;width:300px;border:1px solid #ffffff;}
.replaceBody {background:url('/.s/t/903/1.gif') center repeat-y #ffffff; margin:0px; padding:0px;}

.legendTd {font-size:7pt;}
/* ------------ */

чтобы шрифт был черным, а не серым, во вторую строчку добавьте color:#000000 перед "}"

ФОРУМ
Основной стиль

Code
/* General forum Table View */
.gTable {background:#000000;border-bottom:2px solid #FF4A00;}
.gTableTop {padding:2px;font-family:Verdana,Arial,Sans-Serif;font-size:13px;font-weight:bold;background:url('/.s/t/903/2.jpg') center no-repeat #DD3800;color:#FFFBD7;text-align:center;padding:10px;}
.gTableSubTop {padding:2px;background:url('/.s/t/903/12.gif') #000000;color:#767676;height:21px;font-size:10px;border:1px solid #494949;}
.gTableBody {padding:2px;background:#202020;}
.gTableBody1 {padding:2px;background:#202020;}
.gTableBottom {padding:2px;background:#202020;}
.gTableLeft {padding:2px;background:#202020;font-weight:bold;color:#CCCCCC}
.gTableRight {padding:2px;background:#202020;color:#666666;}
.gTableError {padding:2px;background:#202020;color:#FF0000;}
/* ------------------------ */

Code
.gTable {background:#000000;border-bottom:2px solid #FF4A00;}

контур, фон названия раздела
Code
.gTableTop {padding:2px;font-family:Verdana,Arial,Sans-Serif;font-size:13px;font-weight:bold;background:url('/.s/t/903/2.jpg') center no-repeat #DD3800;color:#FFFBD7;text-align:center;padding:10px;}

Стиль названия раздела - фон, шрифт, и т.д. Если убрать фон (ссылку), фоновым цветом будет цвет контура.
Code
.gTableSubTop {padding:2px;background:url('/.s/t/903/12.gif') #000000;color:#767676;height:21px;font-size:10px;border:1px solid #494949;}

отвечает за фон блока названия форума. можно заменить ссыль на свою, а можно убрать ее и заменить цветовой код.
Code
.gTableBody {padding:2px;background:#202020;}
.gTableBody1 {padding:2px;background:#202020;}
.gTableBottom {padding:2px;background:#202020;}
.gTableLeft {padding:2px;background:#202020;font-weight:bold;color:#CCCCCC}
.gTableRight {padding:2px;background:#202020;color:#666666;}
.gTableError {padding:2px;background:#202020;color:#FF0000;}

здесь я вставляю один и тот же цвет, так как все они отвечают за стиль дополнительной информации

Стили форума

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

a.catLink:link {text-decoration:none; color:#FFFBD7;}
a.catLink:visited {text-decoration:none; color:#FFFBD7;}
a.catLink:hover {text-decoration:underline; color:#FFFFFF;}
a.catLink:active {text-decoration:underline; color:#FFFBD7;}

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

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

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

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

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

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

Code
/* forum Page switches */
.pagesInfo {background:#202020;padding-right:10px;font-size:7pt;}
.switches {background:#2B2B2B;}
.switch {background:#202020;width:15px;font-size:7pt;}
.switchActive {background:#252525;font-weight:bold;color:#CCCCCC;width:15px}
a.switchDigit:link,a.switchBack:link,a.switchNext:link {text-decoration:none; color:#CCCCCC;}
a.switchDigit:visited,a.switchBack:visited,a.switchNext:visited {text-decoration:none; color:#CCCCCC;}
a.switchDigit:hover,a.switchBack:hover,a.switchNext:hover {text-decoration:underline; color:#FFFFFF;}
a.switchDigit:active,a.switchBack:active,a.switchNext:active {text-decoration:underline; color:#CCCCCC;}
/* ------------------- */

здесь желательно все фоны поменять на какой-нибудь один цвет, а цвет шрифта - на другой

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

Code
.threadNametd,.threadAuthTd,.threadLastPostTd {padding:2px;padding:2px;background:#202020}
.threadIcoTd,.threadPostTd,.threadViewTd {padding:2px;background:#1B1B1B}
.threadLastPostTd {padding:2px;font-size:7pt;}
.threadDescr {color:#666666;font-size:7pt;}
.threadNoticeLink {font-weight:bold;}
.threadsType {padding:2px;background:#1B1B1B;height:20px;font-weight:bold;font-size:7pt;color:#FFFFFF;padding-left:40px; border:1px solid #494949;}
.threadsDetails {padding:2px;background:#373737;height:20px;color:#252525;color:#FFFFFF;border:1px solid #494949;}
.forumOnlineBar {padding:2px;background:#161616;height:20px;color:#CCCCCC;border:1px solid #494949;}

a.threadPinnedLink:link {text-decoration:none; color:#CCCCCC;}
a.threadPinnedLink:visited {text-decoration:none; color:#CCCCCC;}
a.threadPinnedLink:hover {text-decoration:underline; color:#FFFFFF;}
a.threadPinnedLink:active {text-decoration:underline; color:#CCCCCC;}

.threadPinnedLink,.threadLink {font-weight:bold;}
a.threadLink:link {text-decoration:underline; color:#CCCCCC;}
a.threadLink:visited {text-decoration:underline; color:#CCCCCC;}
a.threadLink:hover {text-decoration:none; color:#FFFFFF;}
a.threadLink:active {text-decoration:underline; color:#CCCCCC;}

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

Code
.threadNametd,.threadAuthTd,.threadLastPostTd {padding:2px;padding:2px;background:#202020}
.threadIcoTd,.threadPostTd,.threadViewTd {padding:2px;background:#1B1B1B}

Название форума, иконка, количество постов, последний пост - фоны этих блоков здесь как цветовые коды.
Code
.threadLastPostTd {padding:2px;font-size:7pt;}
.threadDescr {color:#666666;font-size:7pt;

Описание и последний пост
Code
.threadsType {padding:2px;background:#1B1B1B;height:20px;font-weight:bold;font-size:7pt;color:#FFFFFF;padding-left:40px; border:1px solid #494949;}
.threadsDetails {padding:2px;background:#373737;height:20px;color:#252525;color:#FFFFFF;border:1px solid #494949;}
.forumOnlineBar {padding:2px;background:#161616;height:20px;color:#CCCCCC;border:1px solid #494949;}

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

Стиль поста

Code
/* Posts View */
.postTable {background:#252525}
.postPoll {background:#1B1B1B;text-align:center;}
.postFirst {background:#1B1B1B;border-bottom:1px solid #FFFFFF;}
.postRest1 {background:#1B1B1B;}
.postRest2 {background:#1B1B1B;}
.postSeparator {height:2px;background:#FF4A00;}

.postTdTop {background:url('/.s/t/903/12.gif') #000000;color:#767676;height:21px;font-size:10px;border:1px solid #494949;}
.postBottom {background:#202020;height:20px;color:#555555;}
.postUser {font-weight:bold;}
.postTdInfo {background:#1B1B1B;text-align:center;padding:5px;}
.postRankName {margin-top:5px;}
.postRankIco {margin-bottom:5px;margin-bottom:5px;}
.reputation {margin-top:5px;}
.signatureHr {margin-top:20px;color:#CCCCCC;}
.posttdMessage {background:#202020;padding:5px;}

.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:#252525;font-size:9px;}
.quoteMessage {background:#252525;font-size:9px;}

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

.statusBlock {padding-top:3px;}
.statusOnline {color:#FFFF00;}
.statusOffline {color:#FFFFFF;}
/* ---------- */

Code
.postTable {background:#252525}
контур
Code
.postPoll {background:#1B1B1B;text-align:center;}
стиль опроса
Code
.postRest1 {background:#ECECEC;}  
.postRest2 {background:#ECECEC;}
хз
Code
.postSeparator {height:2px;background:#FF4A00;}
разделитель постов

Code
.postTdTop {background:url('/.s/t/903/12.gif') #000000;color:#767676;height:21px;font-size:10px;border:1px solid #494949;}
.postBottom {background:#202020;height:20px;color:#555555;}

верх и низ поста,желательно поменять на один цвет, темнее чем иформация о юзере и фон сообщения
Code
.postUser {font-weight:bold;}
как написана информация о юзере
Code
.postTdInfo {background:#1B1B1B;text-align:center;padding:5px;}

фон блока, где написана информация о юзере
Code
.posttdMessage {background:#202020;padding:5px;}
фон сообщения
Code
.codeMessage {background:#252525;font-size:9px;}
.quoteMessage {background:#252525;font-size:9px;}
цитата, код
Code
.statusOnline {color:#FFFF00;}
.statusOffline {color:#FFFFFF;}
онлайн и офлайн

Форма добавления сообщения

Code
/* Post Form */
.pollBut, .loginButton, .searchSbmFl, .commSbmFl, .signButton {font-size:7pt;background: #333333;color:#FFFFFF;border:1px outset #333333;}

.codeButtons {font-size:7pt;background: #333333;color:#FFFFFF;border:1px outset #333333;}
.codeCloseAll {font-size:7pt;background: #333333;color:#FFFFFF;border:1px outset #333333;font-weight:bold;}
.postNameFl,.postDescrFl {background:#1F1F1F;border:1px solid #252525;width:400px}
.postPollFl,.postQuestionFl {background:#1F1F1F;border:1px solid #252525;width:400px}
.postResultFl {background:#1F1F1F;border:1px solid #252525;width:50px}
.postAnswerFl {background:#1F1F1F;border:1px solid #252525;width:300px}
.postTextFl {background:#1F1F1F;border:1px solid #252525;width:550px;height:150px;color:#666666;}
.postUserFl {background:#1F1F1F;border:1px solid #252525;width:300px}

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

из всего этого лучше поменять 2 строчку, 4 сверху.
Категория: Полностью меняем дизайн | Добавил: Alaina (03.01.2010)
Просмотров: 2603 | Комментарии: 14 | Рейтинг: 0.0/0
Всего комментариев: 14
14 Porovdnik  
0
А как изменить ширину сайта? самой, средней части. А то узко как то

12 алекс  
0
как изменить картинку на шаблоне 903 ?

13 Alaina  
0
картинка - это шапка?
о шапке в самом начале урока

11 Alaina  
0
beautiful_lie , спасибо, мне очень приятно happy

10 beautiful_lie  
0
Alaina
шикарно!))
умничка, отлично все расписала))

8 ☼Sunny☼  
0
А где можно поменять фон мини чата?

9 Alaina  
0
Насколько я помню, он меняется, как и комментарии.

6 Солнышко  
0
А где меняется нижняя часть сайта?
(Я про оранжевую полосу внизу)

7 Alaina  
0
Code
#footer {height:55px;background:url('/.s/t/903/2.jpg') center no-repeat #DD3800;color:#FFFBD7;}

5 Ничка-Клубничка  
0
А где в этом шаблоне настраивается css персональной страницы пользователя, страница ЛС и страница изменения персональных данных пользователя?

3 Ничка-Клубничка  
0
А как поменять фон в статьях?

4 Alaina  
0
дык он так вроде и должен поменяться

1 Ничка-Клубничка  
0
А как заменить общий фон на сайте в этом шаблоне?

2 Alaina  
0
Code
#contanier {background:url('/.s/t/903/3.jpg') top center no-repeat;text-align:center;padding-top:20px;}

отвечает за фон, где рисунок
Code
body {background:url('/.s/t/903/1.gif') center repeat-y #252525; margin:0px; padding:0px;}

общий фон

а вообще попробуй методом тыка


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Профиль
Четверг
31.07.2025



Случайная графика

Реклама
Девичник - сайт для девчонок Frozen Projects - your online graphic resource

Аффилиаты

Категории
Полностью меняем дизайн [5]

Наши баннеры
Афф


Обычный баннер

Чат

ShoutMix chat widget

Обновления

[PSD колоризации]
PSD Tutorial #146 (4)

[PSD колоризации]
PSD Tutorial #145 (2)

[PSD колоризации]
PSD Tutorial #144 (7)

Статистика сайта

Статистика
Статистика:

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сейчас на сайте:

[Полный список]



Copyright MyCorp © 2025
Бесплатный хостинг uCoz