• Страница 3 из 8
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • …
  • 7
  • 8
  • »
Модератор форума: 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;}
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 31 | 22:16:28 09 Фев 2014
СтУдЕнТ1461, что автоматом? стили автоматом скроют ссылку на картинку, а саму картинку можно двинуть мышкой один раз и поставить в тег
ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Ruddyi102
Сообщений: 2
Репутация: 0

Сообщение # 32 | 23:35:05 25 Фев 2014
Как установить шаблон на форум не изменяя шаблон на самом сайте?
Тоисть, на сайте один шаблон на форуме другой...
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 33 | 00:57:10 26 Фев 2014
Ruddyi102, у форума свой шаблон, его и меняйте. Только конструктор блоков не будет после этого работать. Его лучше тогда вообще отключить. Чтобы не путал.
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Ruddyi102
Сообщений: 2
Репутация: 0

Сообщение # 34 | 12:44:27 26 Фев 2014
Selena, Это "Общий вид страниц форума", "Вид материалов", "Форма добавления сообщения", это надо менять?
gregor2826
Сообщений: 16
Репутация: 7

Сообщение # 35 | 22:27:34 27 Фев 2014
Первый раз написал видимо не в ту тему. Надо скорее всего здесь. Как мне изменить ширину вот этого блока в форуме ? Обвёл его белой чертой вокруг,что бы было понятно

webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 36 | 22:32:54 27 Фев 2014
gregor2826,
Цитата
<tr><td width="23%" class="postTdTop" align="center">
значение выделенное красным меняете под себя.

на правах гадания по стандартному шаблону
ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
gregor2826
Сообщений: 16
Репутация: 7

Сообщение # 37 | 22:42:42 27 Фев 2014
Большое спасибо за помощь. Исправил. Всё отлично теперь ! Премного благодарен !!!
Ксения9249
Сообщений: 5
Репутация: 0

Сообщение # 38 | 18:44:17 22 Апр 2014
Прошу помощи! В форуме цитата имеет некрасивый вид узкой полоски. Как сделать ее шире, а еще лучше заменить каким-нибудь фоном?



Вот код (Форум, вид материалов)

Код
<table border="0" width="100%" cellspacing="1" cellpadding="2" class="postTable">
<tr><td width="23%" class="postTdTop" align="center"><a class="postUser" href="javascript://" rel="nofollow" onClick="emoticon('[b]$USERNAME$[/b],');return false;">$USERNAME$</a></td><td class="postTdTop"><?if($AWARDS_DO_URL$ && $USER_LOGGED_IN$ && $CUR_USER_ID$!=$UID$)?><div style="float:right"><a href="javascript://" rel="nofollow" onclick="new _uWnd('AwD','Вручить награду',380,200,{autosize:1,maxh:300},{url:'/index/55-$UID$-28-forum-$FID$_$TID$_$ID$_16_$TIMESTAMP$'};);return false;"><img alt="" src="http://s86.ucoz.net/img/icon/thumbu.png" width="13" border="0" title="Хороший пост"></a> <a href="javascript://" rel="nofollow" onclick="new _uWnd('AwD','Вручить награду',380,200,{autosize:1,maxh:300},{url:'/index/55-$UID$-47-forum-$FID$_$TID$_$ID$_16_$TIMESTAMP$'};);return false;"><img alt="" src="http://s86.ucoz.net/img/icon/thumbd.png" width="13" border="0" title="Плохой пост"></a></div><?endif?>Дата: $WDAY$, $DATE$, $TIME$ | Сообщение # $NUMBER$</td></tr>
<tr><td class="postTdInfo" valign="top">
<?if($AVATAR_URL$)?><img alt="" title="$USERNAME$" class="userAvatar" border="0" src="$AVATAR_URL$"><?endif?><?if($USER_TITLE$)?><div class="postRankName">$USER_TITLE$</div><?else?><div class="postRankName">$USER_RANK_NAME$</div><?endif?>

<?if($GROUP_ICON$)?><div class="postRankIco">$GROUP_ICON$</div><?else?><div class="postRankIco">$USER_RANK_ICON$</div><?endif?>
<?if($GROUP_NAME$)?><div class="postUserGroup">Группа: $GROUP_NAME$</div><?endif?>
<?if($POSTS$)?><div class="numposts">Сообщений: <span="unp">$POSTS$</span></div><?endif?>
<?if($AWARDS_READ_URL$)?><div class="reputation">Награды: <a href="$AWARDS_READ_URL$" title="Список наград"><span class="repNums"><b>$AWARDS$</b></span></a> <?if($AWARDS_DO_URL$)?> <a href="$AWARDS_DO_URL$"><span style="font-size:10pt" title="Вручить награду"><b>+</b></span></a><?endif?><?endif?>
<?if($READ_REP_URL$)?><div class="reputation">Репутация: <a title="Смотреть историю репутации" class="repHistory" href="$READ_REP_URL$"><b>$REP_RATING$</b></a> <?if($DO_REP_URL$)?> <a class="reputationDo" title="Изменить репутацию" href="$DO_REP_URL$"><span style="font-size:10pt"><b>±</b></span></a></div><?endif?><?endif?>
<?if($READ_BAN_URL$)?><div class="userBan">Замечания: <a class="banPercent" title="Смотреть историю замечаний" href="$READ_BAN_URL$">$BAN_RATING$</a> <?if($DO_BAN_URL$)?> <a title="Изменить уровень замечаний" class="banDo" href="$DO_BAN_URL$">±</a></div><?endif?><?endif?>
<?if($USER_STATUS$)?><div class="statusBlock">Статус: $USER_STATUS$</div><?endif?>
<?if($GROUP_ID$)?> <?else?><br><br><br><br><br><?endif?>
</td><td class="posttdMessage" valign="top">$MESSAGE$
<?if($ATTACHMENT$)?> <div align="left" class="eAttach">Прикрепления: $ATTACHMENT$</div><?endif?>
<?if($SIGNATURE$)?><br><hr size="1" width="150" align="left" class="signatureHr"><span class="signatureView">$SIGNATURE$</span><?endif?>
<?if($EDITEDBY$)?><br><br><div class="edited">Сообщение отредактировал $EDITEDBY$</div><?endif?></td></tr>
<tr><td class="postBottom" align="center"><?if($USER_IP$)?><div class="postip">[ <a class="postIpLink" href="https://apps.db.ripe.net/search/query.html?searchtext=$USER_IP$" target="_blank">$USER_IP$</a><?if($POST_COUNTRY_ID$)?> (<a href="javascript://" rel="nofollow" onclick='prompt("","$POST_COUNTRY$");return false;'>$POST_COUNTRY_ID$</a>)<?endif?> ]</div><?else?> <?endif?></td><td class="postBottom">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr><td>$USER_DETAILS_ICON_BAR$</td><td align="right" style="padding-right:15px;">$ENTRY_MANAGE_ICON_BAR$</td><td width="2%" nowrap align="right">$ON_TOP_ICON$$DEL_ENTRY_FIELD$</td></tr>
</table></td></tr></table>

Несколько часов промаялась, ничего не получается cry
Прикрепления: 0910131.jpg (48.3 Kb)
Сообщение отредактировал webanet - Вторник, 22 Апр 2014, 19:28:38
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 39 | 18:52:49 22 Апр 2014
Ксения9249, а ведь написано в первом сообщении темы, что оформление на форуме делается в основном стилями...
Вот как вариант оформления цитат и кода:

Код
.bbQuoteName,.bbCodeName {
padding-left:40px;
color:grey;
font-size:10px;
border: 1px dashed black;
-moz-border-radius:25px 12px;
-webkit-border-radius:25px 12px;
border-radius:25px 12px;
width:200px;}  
.codeMessage,.quoteMessage {background: #18181a;color:white;font-style:italic;text-shadow:black 0px 1px 0px;padding: 5px 15px 5px;border:2px solid grey !important;
-moz-border-radius:13px 35px !important;
-webkit-border-radius:13px 35px !important;
border-radius:13px 35px !important;}
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Ксения9249
Сообщений: 5
Репутация: 0

Сообщение # 40 | 19:06:18 22 Апр 2014
Selena, большое-пребольшое Вам спасибо! Красиво! Все получилось.
Ирокез
Сообщений: 86
Репутация: 17

Сообщение # 41 | 22:37:05 11 Май 2014
Использовал следующий код, чтобы скрыть замечания.

<?if($GROUP_ID$="2")?><?else?><?if($READ_BAN_URL$)?><div class="userBan">Замечания: <a class="banPercent" title="Смотреть историю замечаний" href="$READ_BAN_URL$">$BAN_RATING$</a> <?if($DO_BAN_URL$)?> <a title="Изменить уровень замечаний" class="banDo" href="$DO_BAN_URL$">±</a></div><?endif?><?endif?><?endif?>

Подскажите, как правильно прописать несколько ID групп пользователей в одном коде?
Короче, как скрыть замечания для всех групп?
Сообщение отредактировал Ирокез - Воскресенье, 11 Май 2014, 22:46:25
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 42 | 16:09:26 12 Май 2014
Цитата Ирокез ()
Короче, как скрыть замечания для всех групп?

Ирокез, скрыть для нескольких групп или показать только нескольким? Поскольку, если для ВСЕХ скрыть, то группы указывать нет смысла.
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Ирокез
Сообщений: 86
Репутация: 17

Сообщение # 43 | 14:38:46 13 Май 2014
Selena, спасибо, вопрос решен. Помогите пожалуйста со следующим решением. Хочу сделать поле для сообщения более компактным по длине. Для этого необходимо:
а) перенести информацию о пользователе в место указанное на рисунке (см. рисунок 1)
б) сделать графический статус онлайн в виде красного/синего кружка после ника пользователя, как на этом форуме. (см. рисунок 2)





Можно ли это реализовать и как это сделать? Буду благодарен за любую помощь!

Сайт: http://fc-legion.ucoz.com/
Прикрепления: 7399600.jpg (57.5 Kb) · 9781779.jpg (49.6 Kb)
Сообщение отредактировал Ирокез - Вторник, 13 Май 2014, 15:21:28
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 44 | 17:15:52 13 Май 2014
Ирокез, есть шаблон "Вид материалов" форума. Обычно это таблица. Из ячейки с классом class="postTdInfo" в ячейку с классом class="postTdTop" переносим коды нужных полей. То есть, всё после строки относящейся к коду $AVATAR_URL$ и до закрывающего ячейку тега сносим в конец ячейки postTdTop.
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Ирокез
Сообщений: 86
Репутация: 17

Сообщение # 45 | 17:19:28 13 Май 2014
Selena, ок, попробую, спасибо. А по поводу графического статуса после ника?
Вот вид материалов, если необходимо:
Сообщение отредактировал Ирокез - Вторник, 13 Май 2014, 17:31:28
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Настройка дизайна форума (дизайн форума, настройка CSS, изменение внешнего вида)
  • Страница 3 из 8
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • …
  • 7
  • 8
  • »
Поиск: