Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Настройка дизайна форума (дизайн форума, настройка CSS, изменение внешнего вида)
Настройка дизайна форума
Модератор форума
Сообщение # 1 | 11:10:54 01 Июл 2008
В системе Ucoz форум сделан таблицами и доступа к HTML-коду этих таблиц у пользователей нет. Сделано это из-за того, что уровень знаний большинства пользователей не позволяет редактировать HTML-код всегда корректно. Поэтому состав и форма форума неизменны, а менять можно только оформление форума. При этом для форума существует три шаблона:

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

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

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

Код
/* ===== forum Start ===== */

/* General forum Table View */
.gTable {background:#E1E1E1}
.gTableTop {padding:2px;background:url('http:https://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:https://src.ucoz.ru/t/999/8.gif') #FFFFFF;color:#559B36;height:20px;padding-top:8px;}
.gTableBody {padding:2px;background:url('http:https://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}
.gTableBody1 {padding:2px;background:#FFFFFF;}
.gTableBottom {padding:2px;background:url('http:https://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}
.gTableLeft {padding:2px;background:url('http:https://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;font-weight:bold;color:#559B36}
.gTableRight {padding:2px;background:url('http:https://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC}
.gTableError {padding:2px;background:url('http:https://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:https://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:https://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}
.fastNavCatA {background:url('http:https://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:https://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:https://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;text-align:center;}
.postFirst {background:url('http:https://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;border-bottom:3px solid #FFFFFF;}
.postRest1 {background:url('http:https://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}
.postRest2 {background:url('http:https://src.ucoz.ru/t/999/4.gif') bottom repeat-x #FCFCFC;}
.postSeparator {height:3px;background:#F8FC00;}

.postTdTop {background:url('http:https://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:https://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:https://src.ucoz.ru/t/999/16.gif') no-repeat 0px 4px;}
.newPollItem {padding: 0 0 0 8px; background: url('http:https://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:https://src.ucoz.ru/t/999/3.gif') #559B36;color:#FFFFFF;border:1px outset #615E58;}

.codeButtons {font-size:7pt;background:url('http:https://src.ucoz.ru/t/999/3.gif') #559B36;color:#FFFFFF;border:1px outset #615E58;}
.codeCloseAll {font-size:7pt; font-weight:bold;background:url('http:https://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 - классы отвечающие за вид формы добавления сообщений

Так же имеет отношение к форуму следующая часть таблицы стилей:

Код
/* Other Styles */
.replaceTable {background:#FFFFFF; border:1px solid #E1E1E1;height:100px;width:300px;}
.uLogBlock {width:166px;}

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


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

И естественно, имеет отошение к форуму начало таблицы стилей, где прописаны параметры фона страницы и общий вид ссылок.

Код
/* 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;}
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 46 | 17:43:14 13 Май 2014
Ирокез, после $USERNAME$</a> вставьте <?if($USER_STATUS$)?><div class="statusBlock">Статус: $USER_STATUS$</div><?endif?>
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Ирокез
Сообщений: 86
Репутация: 17

Сообщение # 47 | 16:41:12 17 Май 2014
Selena, огромное спасибо, все получилось smile

Добавлено (17 Май 2014, 16:41:12)
---------------------------------------------
Возник еще один вопрос. Сделал графические значки онлайн/оффлайн. Теперь не могу найти способ приписать к ним всплывающие подписи "оффлайн" и "онлайн". Значки реализованы не через CSS, а при помощи замены стандартных надписей пользователей на картинки.

Код в видах материала прописан так: $USERNAME$</a> <?if($USER_STATUS$)?><div class="statusBlock">Статус: $USER_STATUS$</div><?endif?>

Насколько я понимаю, за значки теперь отвечает "statusBlock". Где его найти, чтобы добавить надписи "онлайн" и "оффлайн" при наведении курсора? Или можно реализовать это по-другому?

P.S. В CSS есть три строки:

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

но прописать в них не получается (не работает). Подскажите пожалуйста.

Адрес сайта: http://fc-legion.ucoz.com/
Сообщение отредактировал Ирокез - Суббота, 17 Май 2014, 16:42:33
alexandr_riabokon
Сообщений: 48
Репутация: 8

Сообщение # 48 | 01:34:18 22 Май 2014
Здравствуйте. Возможно как-то изменить структуру стандартной таблицы главной странички форума?
askwiki.ru - найди ответ на свой вопрос.
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 49 | 16:25:29 22 Май 2014
Цитата Ирокез ()
Насколько я понимаю, за значки теперь отвечает "statusBlock". Где его найти, чтобы добавить надписи "онлайн" и "оффлайн" при наведении курсора? Или можно реализовать это по-другому?

Здесь, например, это сделано так:
Код
<a href="javascript://" rel="nofollow" onClick="emoticon('[b]$USERNAME$[/b],');return false;" class="pusername postUser"<?if(!$PROFILE_URL$)?> style="padding:0;"<?endif?>>$USERNAME$<?if($PROFILE_URL$)?> <span class="<?if($USER_STATUS$ == '<span class="statusOnline">где-то тут</span>')?>useronline" title="Онлайн<?else?>useroffline" title="Оффлайн<?endif?>"></span><?endif?></a><br/>
  

Разбирайтесь.

alexandr_riabokon, а что вы конкретно имеете в виду под структурой таблицы главной страницы форума?
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
alexandr_riabokon
Сообщений: 48
Репутация: 8

Сообщение # 50 | 19:57:36 22 Май 2014
Selena, т.е. могу ли изменять/добавлять/удалять не нужные/нужные мне классы, ячейки, строки, блоки т.п.
askwiki.ru - найди ответ на свой вопрос.
Komoff
Сообщений: 595
Репутация: 276

Сообщение # 51 | 20:18:54 22 Май 2014
Цитата alexandr_riabokon ()
могу ли изменять/добавлять/удалять не нужные/нужные мне классы, ячейки, строки, блоки т.п.
нет
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 52 | 20:27:02 22 Май 2014
alexandr_riabokon, можно кое-что спрятать стилями, но сам код таблиц и классы элементов таблиц формируются системно.
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Ирокез
Сообщений: 86
Репутация: 17

Сообщение # 53 | 23:42:50 22 Май 2014
Selena, спасибо, разобрался.)

Возможно я уже надоел Вам, однако прошу помочь еще раз. Поставил на сайт часы (см. скрин №1), однако они почему-то отображаются под формой входа и профилем, а не после них. Необходимо, чтобы они встали в одну строку (см.скрин №2). Пытался выровнять (обертывал скрипт часов в div, прописывал в CSS отступ от левого края - часы стали после форм, однако формы сползли вверх), но не получилось из-за нехватки знаний.



Скрин №2 (должно получиться так)



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


Адрес сайта: http://fc-legion.ucoz.com/
Прикрепления: 3205497.png (37.1 Kb) · 2384330.png (7.9 Kb)
Сообщение отредактировал Ирокез - Четверг, 22 Май 2014, 23:48:26
Komoff
Сообщений: 595
Репутация: 276

Сообщение # 54 | 13:53:13 24 Май 2014
Цитата Ирокез ()
Поставил на сайт часы (см. скрин №1), однако они почему-то отображаются под формой входа и профилем, а не после них.
Можно сделать ещё одну ячейку у таблицы и запихать туда часы. Ну или взять код в
Код
<div style="float:right>...</div>
Сообщение отредактировал Komoff - Воскресенье, 25 Май 2014, 00:23:12
6oPH
Сообщений: 11
Репутация: 12

Сообщение # 55 | 14:37:19 24 Май 2014
Ирокез, достаточно просто у таблицы прописать inline-table) Замени открывающий тег таблицы после скрипта на вот эту:


Код
<table border="0" bgcolor="#000000" cellspacing="1" cellpadding="3" class="clock24st" style="line-height:14px; padding: 0;margin-left: 10px;display: inline-table;">
http://updatesite.ru - лучшие скрипты для uCoz
Ирокез
Сообщений: 86
Репутация: 17

Сообщение # 56 | 12:27:14 30 Май 2014
6oPH, практически получилось, часы стали как надо. Сама же форма ушла вниз, на одну линию с часами. Как бы ее еще заставить располагаться по центру... Так, как справа RSS...

http://fc-legion.ucoz.com/

Ладно, буду пробовать выравнивать. Спасибо за помощь.

P.S. Ребята, помогите, иначе сойду с ума.) Как сделать, чтобы форма входа и скрипт часиков располагались ровно по центру. Точно так, как на картинке:



Удалось поставить их в одну линию с помощью display: inline-table, однако теперь форма входа визуально находится ниже:



Вот участок кода (скрипт часов выделен красным):


Вот адрес сайта: http://fc-legion.ucoz.com/
Прикрепления: 0994622.png (36.1 Kb) · 3119089.png (40.1 Kb)
Сообщение отредактировал Ирокез - Пятница, 30 Май 2014, 16:34:25
MSerega
Сообщений: 122
Репутация: 4

Сообщение # 57 | 11:13:23 12 Июн 2014
Хочу сделать себе такие же кнопки как на этом форуме "Ответить", "Новая тема", "Новый Опрос". Я не хочу загружать их как картинку. Тут посмотрел на код так тут просто ссылка идет без картинок! Как мне так же сделать?
Если не можешь прожить жизнь нормально, проживи ее афигенно
nata777
Сообщений: 34
Репутация: 17

Сообщение # 58 | 21:42:15 07 Июл 2014
здравствуйте , не могу найти в таблице стилей как и где поставить фон таблицы форума здесь http://nata777.ucoz.ru/forum , здесь http://nata777.ucoz.ru/forum/7 , и фон вида материалов http://nata777.ucoz.ru/forum/7-110-1 , почему то вначале идет общий фон форума , а затем шаблонный , как можно свой однотонный поставить ?
и пожалуйста подскажите как изменить цвет и размер шрифта http://nata777.ucoz.ru/forum/40 и http://nata777.ucoz.ru/forum/ .
спасибо!
----------------------------

РАЗОБРАЛАСЬ
Сообщение отредактировал nata777 - Среда, 09 Июл 2014, 16:14:48
Nafretiri
Сообщений: 25
Репутация: 0

Сообщение # 59 | 15:14:36 10 Июл 2014
Здравствуйте. Подскажите, как выделить подфорумы. Хотелось бы поменять цвет слова "Подфорумы" и чтоб между списком подфорумом не было "|", а другой значок. точка хотя бы.



сайт - http://nafretiri.ru/forum/
Сообщение отредактировал Nafretiri - Четверг, 10 Июл 2014, 15:16:18
4istoe3oloto
Сообщений: 5
Репутация: 0

Сообщение # 60 | 14:56:43 19 Июл 2014
Здравствуйте. Помогите растянуть форум по ширине шапки, не трогая главную страницу сайта (каталог статей).

Общий вид страниц форума:


Код
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>$MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
$GLOBAL_SEO$
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
</head>
<body>
$ADMIN_BAR$
<div id="all">
$GLOBAL_AHEADER$
<div id="content">
<div id=content-top></div>
<div id="content-mid">
<div id="maincol">
<div class="forumContent"><table border="0" cellpadding="0" height="30" cellspacing="0" width="100%">
<tr>
<td align="right">[<?if($USER_LOGGED_IN$)?>
<a href="javascript://" rel="nofollow" id="upml" class="fNavLink" onclick="window.open('$PM_URL$','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><!--<s3065>-->Личные сообщения<!--</s>-->($UNREAD_PM$)</a> ·
<?if($IS_NEW_PM$)?><script type="text/javascript">function flashit(id,cl){var c=document.getElementById(id);if (c.style.color=='red'){c.style.color=cl;}else {c.style.color='red';}}setInterval("flashit('upml','')",500)</script><bgsound src="http://s89.ucoz.net/img/fr/pm.wav" loop="1" volume="0" balance="0">
<?endif?><?endif?>
<a class="fNavLink" href="$RECENT_POSTS_LINK$" rel="nofollow"><!--<s5209>-->Новые сообщения<!--</s>--></a> ·  
<a class="fNavLink" href="$MEMBERS_LIST_LINK$" rel="nofollow"><!--<s5216>-->Участники<!--</s>--></a> ·  
<a class="fNavLink" href="$BOARD_RULES_LINK$" rel="nofollow"><!--<s5166>-->Правила форума<!--</s>--></a> ·  
<a class="fNavLink" href="$SEARCH_PAGE_LINK$" rel="nofollow"><!--<s3163>-->Поиск<!--</s>--></a> ·  
<a class="fNavLink" href="$RSS_LINK$" rel="nofollow"></a><?if($USER_LOGGED_IN$)?> ·  
<a class="fNavLink" href="$SUBSCRIPTION_LINK$" rel="nofollow"><!--<s6773>-->Подписки<!--</s>--></a><?endif?> ]</td>
</tr>
</table>
$BODY$
</div><br />
</div>
<div style="clear: both;"></div>
</div>
</div>
$GLOBAL_BFOOTER$
</div>
</div>
</body>
</html>
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Настройка дизайна форума (дизайн форума, настройка CSS, изменение внешнего вида)
Поиск: