Модератор форума: 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;} |
Selena, огромное спасибо, все получилось
Добавлено (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
|
Здравствуйте. Возможно как-то изменить структуру стандартной таблицы главной странички форума?
askwiki.ru - найди ответ на свой вопрос.
|
Насколько я понимаю, за значки теперь отвечает "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, а что вы конкретно имеете в виду под структурой таблицы главной страницы форума? Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
|
Selena, т.е. могу ли изменять/добавлять/удалять не нужные/нужные мне классы, ячейки, строки, блоки т.п.
askwiki.ru - найди ответ на свой вопрос.
|
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
|
Поставил на сайт часы (см. скрин №1), однако они почему-то отображаются под формой входа и профилем, а не после них. Код <div style="float:right>...</div> Сообщение отредактировал Komoff - Воскресенье, 25 Май 2014, 00:23:12
|
Ирокез, достаточно просто у таблицы прописать 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
|
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
|
Хочу сделать себе такие же кнопки как на этом форуме "Ответить", "Новая тема", "Новый Опрос". Я не хочу загружать их как картинку. Тут посмотрел на код так тут просто ссылка идет без картинок! Как мне так же сделать?
Если не можешь прожить жизнь нормально, проживи ее афигенно
|
здравствуйте , не могу найти в таблице стилей как и где поставить фон таблицы форума здесь 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
|
Здравствуйте. Подскажите, как выделить подфорумы. Хотелось бы поменять цвет слова "Подфорумы" и чтоб между списком подфорумом не было "|", а другой значок. точка хотя бы.
сайт - http://nafretiri.ru/forum/ Сообщение отредактировал Nafretiri - Четверг, 10 Июл 2014, 15:16:18
|
Здравствуйте. Помогите растянуть форум по ширине шапки, не трогая главную страницу сайта (каталог статей).
Общий вид страниц форума: Код <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> |
| |||