Загружаем страницу...
Уроки по изменению дизайна cтандартного шаблона UCOZ - Мои статьи - Каталог статей - Рипы сайтов и адаптация шаблонов
Рекламное место:



Меню сайта
Категории раздела
Мои статьи [16]
Промо [0]
Реклама
Главная » Статьи » Мои статьи

Уроки по изменению дизайна cтандартного шаблона UCOZ
Насколько я знаю, весь шаблон меняется в 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 сверху
Категория: Мои статьи | Добавил: Ripsite (07.11.2011) W
Просмотров: 4350 | Комментарии: 3 | Теги: Уроки по изменению дизайна cтандарт | Рейтинг: 5.0/1
Всего комментариев: 3
1 Флеш уроки  

2 Олег  
сам то взял шаблон http://webstory.net.ru/news/2

3 Ripsite  
понравился он мне

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт
Счётчик
Поиск
Ads
Статистика
Проверка ТИЦ
Ссылки
Купить ссылку здесь за руб.
Статистика
| Карты сайта: Sitemap.xml и Sitemap-forum.xml