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

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

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

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

Код
/* ===== 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 - классы отвечающие за вид формы добавления сообщений

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

Код
/* 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;}
Inquisitоr
Эксперт uCoz
Сообщений: 898
Репутация: 338

Сообщение # 2 | 12:33:41
Quote
a:link {text-decoration:none; color:#559B36;}

Подкласс "link" используется для указание стилей ссылок которые пользователь ещё не посещал
Quote
a:active {text-decoration:none; color:#559B36;}

Подкласс "active" используется для указания стилей активных ссылок (это НЕ стиль ссылки страницы на которой Вы находитесь, хватит спрашивать об этом везде и всюду, проще говоря если ссылка активна, тыкните интер и Вы перейдёте по это ссылке:))
Quote
a:visited {text-decoration:none; color:#559B36;}

Подкласс "visited" используется для указания стилей ссылок на страницы которые пользователь уже посетил.
Quote
a:hover {text-decoration:underline; color:#000000;}

Подкласс "hover" используется для указания стилей ссылок над которыми находится указатель мыши (это когда по ссылке указателем мышки проводят, это понятно?)

Quote
td, body {font-family:verdana,arial,helvetica; font-size:8pt;}

td - это значит что мы указываем настройки для элемента <td> (все знаю что это за элемент? это в таблицах; так вот когда мы в css указываем настройки для этого элемента, то по умолчанию во всех таблицах будут те стили, которые мы указываем тут)
body - это значит что мы указываем настройки для элемента <body>

Почему мы указываем не

Quote
td {font-family:verdana,arial,helvetica; font-size:8pt;}
body {font-family:verdana,arial,helvetica; font-size:8pt;}

а именно в одной строчке?

да потомучто так проще, если Вам нужно для этих двух элементов указать разные стили, возьмите и разделите их, а может наоборот, добавьте туда ещё один:

Quote
p, td, body {font-family:verdana,arial,helvetica; font-size:8pt;}

я это говорю для тех, кто не знает что так делать можно.

Quote
form {padding:0px;margin:0px;} input,textarea,select {vertical-align:middle; font-size:8pt; font-family:verdana,arial,helvetica;}

здесь мы указываем стили для элементов <form>, <input>, <textarea>, <select>

и ещё раз для тех кто не знал - не обязательно для каждого элемента прописывать стили:
<input style="...">
не обязательно для каждого элемента указывать класс
<input class="...">
а потом в стилях его редактировать... если вы хотите "одновременно поправить" какие то элементы... сделайте это так, как описано выше

В аське каждый день об этом спрашиваю, не выдержал, чесн слово:D

Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
Иринка:)
Сообщений: 7
Репутация: 0

Сообщение # 3 | 19:12:14
Здравствуйте! Я совсем новичок в этом деле, подскажите пожалуйста, как расширить мне страницу форума на сайте http://little-dragons.ucoz.ru/forum/ ?
Selena
Сообщений: 15657
Репутация: 1099

Сообщение # 4 | 20:49:59
Иринка:), в этом дизайне вам кроме прописания других стилей придётся ещё и графику перерисовывать.

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Иринка:)
Сообщений: 7
Репутация: 0

Сообщение # 5 | 10:56:23
Цитата Selena ()
Иринка:), в этом дизайне вам кроме прописания других стилей придётся ещё и графику перерисовывать.
Графику - вы имеете ввиду верхнюю шапку?
Selena
Сообщений: 15657
Репутация: 1099

Сообщение # 6 | 17:55:27
Иринка:), я имею в виду эту картинку - http://little-dragons.ucoz.ru/.s/t/809/3.jpg и эту http://little-dragons.ucoz.ru/.s/t/809/4.jpg

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Иринка:)
Сообщений: 7
Репутация: 0

Сообщение # 7 | 18:57:25
Цитата Selena ()
Иринка:), я имею в виду эту картинку - http://little-dragons.ucoz.ru/.s/t/809/3.jpg и эту http://little-dragons.ucoz.ru/.s/t/809/4.jpg
ну то есть нереально расширить форум?
Selena
Сообщений: 15657
Репутация: 1099

Сообщение # 8 | 19:01:06
Цитата Иринка:) ()
ну то есть нереально расширить форум?

Всё реально. Я просто вас предупредила, что одними стилями не отделаться.

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Иринка:)
Сообщений: 7
Репутация: 0

Сообщение # 9 | 20:03:02
Цитата Selena ()
Всё реально. Я просто вас предупредила, что одними стилями не отделаться.
хорошо, я могу попробывать, вы сможете мне помочь?
Selena
Сообщений: 15657
Репутация: 1099

Сообщение # 10 | 20:18:08
Иринка:), перерисовывать картинку?

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Иринка:)
Сообщений: 7
Репутация: 0

Сообщение # 11 | 05:33:34
Цитата Selena ()
Иринка:), перерисовывать картинку?
Да, если можно shy
Selena
Сообщений: 15657
Репутация: 1099

Сообщение # 12 | 16:18:24
Иринка:), вам сюда - http://partner.ucoz.ru/

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Иринка:)
Сообщений: 7
Репутация: 0

Сообщение # 13 | 19:33:13
Цитата Selena ()
Иринка:), вам сюда - http://partner.ucoz.ru/
спасибо
pvperm
Сообщений: 2
Репутация: 0

Сообщение # 14 | 02:32:24
Здравствуйте. Что-то с первого раза ответа не дождался. Подскажите, пожалуйста, как сделать, чтобы на странице сайта в строке
со ссылкой на тему форума в скобках отображалось количество постов в
этой теме. Еще нужно убрать навигацию по Форуму и в идеале - прописать свой путь на каждую тему :).
Lega2431
Сообщений: 7
Репутация: 0

Сообщение # 15 | 15:47:12
День добрый. Решил поменять на своем сайте стандартный дизайн. Все бы хорошо, да вот пару дней назад понадобился форум и после его активации, он принял стандартный дизайн, а не тот что теперь на главной странице и вообще на остальных.

P.S.: Знания html на уровне самоучке.

вот ссылка главной странице:
http://nalsosh09.ucoz.ru/

И форума:
http://nalsosh09.ucoz.ru/forum/

Добавлено (03 Фев 2014, 15:47:12)
---------------------------------------------
Вопрос закрыт! Простите, что не там задал вопрос!

Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Настройка дизайна форума (дизайн форума, настройка CSS, изменение внешнего вида)
Страница 1 из 812378»
Поиск: