Модератор форума: Yuri_G |
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Настройка дизайна форума (дизайн форума, настройка CSS, изменение внешнего вида) |
Настройка дизайна форума |
В системе 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;} |
СтУдЕнТ1461, что автоматом? стили автоматом скроют ссылку на картинку, а саму картинку можно двинуть мышкой один раз и поставить в тег
|
Ruddyi102, у форума свой шаблон, его и меняйте. Только конструктор блоков не будет после этого работать. Его лучше тогда вообще отключить. Чтобы не путал.
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
|
Первый раз написал видимо не в ту тему. Надо скорее всего здесь. Как мне изменить ширину вот этого блока в форуме ? Обвёл его белой чертой вокруг,что бы было понятно
|
gregor2826,
Цитата <tr><td width="23%" class="postTdTop" align="center"> на правах гадания по стандартному шаблону |
Большое спасибо за помощь. Исправил. Всё отлично теперь ! Премного благодарен !!!
|
Прошу помощи! В форуме цитата имеет некрасивый вид узкой полоски. Как сделать ее шире, а еще лучше заменить каким-нибудь фоном?
Вот код (Форум, вид материалов) Код <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> Несколько часов промаялась, ничего не получается Прикрепления:
0910131.jpg
(48.3 Kb)
Сообщение отредактировал webanet - Вторник, 22 Апр 2014, 19:28:38
|
Ксения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;} Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
|
Selena, большое-пребольшое Вам спасибо! Красиво! Все получилось.
|
Использовал следующий код, чтобы скрыть замечания.
<?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, спасибо, вопрос решен. Помогите пожалуйста со следующим решением. Хочу сделать поле для сообщения более компактным по длине. Для этого необходимо:
а) перенести информацию о пользователе в место указанное на рисунке (см. рисунок 1) б) сделать графический статус онлайн в виде красного/синего кружка после ника пользователя, как на этом форуме. (см. рисунок 2) Можно ли это реализовать и как это сделать? Буду благодарен за любую помощь! Сайт: http://fc-legion.ucoz.com/ Прикрепления:
7399600.jpg
(57.5 Kb)
·
9781779.jpg
(49.6 Kb)
Сообщение отредактировал Ирокез - Вторник, 13 Май 2014, 15:21:28
|
Ирокез, есть шаблон "Вид материалов" форума. Обычно это таблица. Из ячейки с классом class="postTdInfo" в ячейку с классом class="postTdTop" переносим коды нужных полей. То есть, всё после строки относящейся к коду $AVATAR_URL$ и до закрывающего ячейку тега сносим в конец ячейки postTdTop.
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
|
| |||