• Страница 1 из 1
  • 1
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Faq по uCoz » Изменение внешнего вида форума (дизайн форума, настройка CSS)
Изменение внешнего вида форума
exclusiv...
/avatar/01/4333-414916.png
1');return false;" rel="nofollow" href="javascript://" name="189">
21.07.2011 в 13:46 В системе Ucoz форум сделан таблицами и доступа к HTML-коду этих таблиц у пользователей нет. Сделано это из-за того, что уровень знаний большинства пользователей не позволяет редактировать HTML-код всегда корректно. Поэтому состав и форма форума неизменны, а менять можно только оформление форума. При этом для форума существует три шаблона:

1. Общий вид страниц форума.
2. Вид материалов (как выглядит отдельное сообщение на форуме)
3. Форма добавления сообщения.

Эти три шаблона + таблицы стилей позволяют сделать достаточно оригинальный форум, сохраняя всю функциональность системы Ucoz.

Часть таблицы стилей, имеющая непосредственное отношение к форуму:
Code
/* ===== forum Start ===== */  

  /* General forum Table View */  
  .gTable {background:#E1E1E1}  
  .gTableTop {padding:2px;background:url('http://src.ucoz.ru/t/999/3.gif') #559B36;color:#FFFFFF;font-weight:bold;height:21px;padding-left:10px;font-size:11px;}  
  .gTableSubTop {padding:2px;background:url('http://src.ucoz.ru/t/999/8.gif') #FFFFFF;color:#559B36;height:20px;padding-top:8px;}  
  .gTableBody {padding:2px;background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}  
  .gTableBody1 {padding:2px;background:#FFFFFF;}  
  .gTableBottom {padding:2px;background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}  
  .gTableLeft {padding:2px;background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;font-weight:bold;color:#559B36}  
  .gTableRight {padding:2px;background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC}  
  .gTableError {padding:2px;background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;color:#FF0000;}  
  /* ------------------------ */  

  /* Forums Styles */  
  .forumNameTd,.forumLastPostTd {padding:2px;background:#FFFFFF}  
  .forumIcoTd,.forumThreadTd,.forumPostTd {padding:2px;background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC}  
  .forumLastPostTd,.forumArchive {padding:2px;font-size:7pt;}  

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

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

  /* 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:#559B36;}  
  a.forum:visited, a.lastPostUserLink:visited, a.forumLastPostLink:visited, a.threadAuthorLink:visited {text-decoration:none; color:#559B36;}  
  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:#559B36;}  
  /* -------------------- */  

  /* forum Navigation Bar */  
  .forumNamesBar {padding-bottom:7px;font-weight:bold;font-size:7pt;}  
  .forumBarKw {font-weight:normal;}  
  a.forumBarA:link {text-decoration:none; color:#000000;}  
  a.forumBarA:visited {text-decoration:none; color:#000000;}  
  a.forumBarA:hover {text-decoration:none; color:#559B36;}  
  a.forumBarA:active {text-decoration:underline; color:#559B36;}  
  /* -------------------- */  

  /* forum Fast Navigation Blocks */  
  .fastNav,.fastSearch,.fastLoginForm {font-size:7pt;}  
  /* ---------------------------- */  

  /* forum Fast Navigation Menu */  
  .fastNavMain {background:#C7D7EF;}  
  .fastNavCat {background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}  
  .fastNavCatA {background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;color:#0000FF}  
  .fastNavForumA {color:#0000FF}  
  /* -------------------------- */  

  /* 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:#EEEEEE;font-weight:bold;color:#559B36;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:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC}  
  .threadLastPostTd {padding:2px;font-size:7pt;}  
  .threadDescr {color:#858585;font-size:7pt;}  
  .threadNoticeLink {font-weight:bold;}  
  .threadsType {padding:2px;background:#EEEEEE;height:20px;font-weight:bold;font-size:7pt;color:#000000;padding-left:40px;  }  
  .threadsDetails {padding:2px;background:#EEEEEE;height:20px;color:#000000;}  
  .forumOnlineBar {padding:2px;background:#EEEEEE;height:20px;color:#000000;}  

  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:#559B36;}  
  a.threadLink:visited {text-decoration:none; color:#559B36;}  
  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;}  
  /* ------------------- */  

  /* Posts View */  
  .postTable {background:#E1E1E1}  
  .postPoll {background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;text-align:center;}  
  .postFirst {background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;border-bottom:3px solid #FFFFFF;}  
  .postRest1 {background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}  
  .postRest2 {background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}  
  .postSeparator {height:3px;background:#F8FC00;}  

  .postTdTop {background:url('http://src.ucoz.ru/t/999/8.gif') #FFFFFF;color:#559B36;height:20px;padding-top:8px;}  
  .postBottom {background:#EEEEEE;height:20px}  
  .postUser {font-weight:bold;}  
  .postTdInfo {text-align:center;padding:5px;background:url('http://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}  
  .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;}  
  /* ---------- */  

  /* forum AllInOne Fast Add */  
  .newThreadBlock {background: #F9F9F9;border: 1px solid #B2B2B2;}  
  .newPollBlock {background: #F9F9F9;border: 1px solid #B2B2B2;}  
  .newThreadItem {padding: 0 0 0 8px; background: url('http://src.ucoz.ru/t/999/16.gif') no-repeat 0px 4px;}  
  .newPollItem {padding: 0 0 0 8px; background: url('http://src.ucoz.ru/t/999/16.gif') no-repeat 0px 4px;}  
  /* ----------------------- */  

  /* forum Post Form */  
  .loginButton {font-size:7pt;background:#FFFFFF;color:#575757;border:1px outset #636363;}  
  .pollBut, .searchSbmFl, .commSbmFl, .signButton {font-size:7pt;background:url('http://src.ucoz.ru/t/999/3.gif') #559B36;color:#FFFFFF;border:1px outset #615E58;}  

  .codeButtons {font-size:7pt;background:url('http://src.ucoz.ru/t/999/3.gif') #559B36;color:#FFFFFF;border:1px outset #615E58;}  
  .codeCloseAll {font-size:7pt; font-weight:bold;background:url('http://src.ucoz.ru/t/999/3.gif') #559B36;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}  
  /* ----------------- */  

  /* ====== forum End ====== */


General forum Table View, Forums Styles и forum Titles & other- классы отвечающие за общий вид таблиц форума.
forum Titles & other - классы отвечающие за вид на текст в таблицах на главной форума
forum Threads Style - классы отвечающие за вид списка тем
forum Navigation Bar - классы отвечающие за вид навигационной строки
forum Page switches - классы переключателей страниц
Posts View - классы отвечающие за вид сообщений
forum Post Form - классы отвечающие за вид формы добавления сообщений

Так же имеет отношение к форуму следующая часть таблицы стилей:
Code
/* Other Styles */  
  .replaceTable {background:#FFFFFF; border:1px solid #E1E1E1;height:100px;width:300px;}  
  .uLogBlock {width:166px;}  

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

Это вид страницы после размещения сообщения и вид легенды форума.

И естественно, имеет отошение к форуму начало таблицы стилей, где прописаны параметры фона страницы и общий вид ссылок.
Code
/* General Style */  
  a:link {text-decoration:none; color:#559B36;}  
  a:active {text-decoration:none; color:#559B36;}  
  a:visited {text-decoration:none; color:#559B36;}  
  a:hover {text-decoration:underline; color:#000000;}  

  td, body {font-family:verdana,arial,helvetica; font-size:8pt;}  
  form {padding:0px;margin:0px;}  
  input,textarea,select {vertical-align:middle; font-size:8pt; font-family:verdana,arial,helvetica;}  
  .copy {font-size:7pt;}
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Faq по uCoz » Изменение внешнего вида форума (дизайн форума, настройка CSS)
  • Страница 1 из 1
  • 1
Поиск: