Новые сообщения на форуме · Пользователи · Правила форума · Поиск · RSS
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум » Ucoz и все что с ним связано » Сss, Html - Примеры изменения кода » UCOZ CSS - Изменение Стиля сайта (Изменение внешнего вида форума)
UCOZ CSS - Изменение Стиля сайта
ElectromasterДата: Понедельник, 29.06.2009, 13:56 | Сообщение # 1
Сообщений: 270
Статус: Offline
В системе Ucoz форум сделан таблицами и доступа к HTML-коду этих таблиц у пользователей нет. Сделано это из-за того, что уровень знаний большинства пользователей не позволяет редактировать HTML-код всегда корректно. Поэтому состав и форма форума неизменны, а менять можно только оформление форума. При этом для форума существует три шаблона:

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

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

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

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

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

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

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

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

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

Code
/* 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;}

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

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

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

a:hover {text-decoration:underline; color:#000000;} - Подкласс "hover" используется для указания стилей ссылок над которыми находится указатель мыши (это когда по ссылке указателем мышки проводят, это понятно?)

td, body {font-family:verdana,arial,helvetica; font-size:8pt;} - td - это значит что мы указываем настройки для элемента <td> (все знаю что это за элемент? это в таблицах; так вот когда мы в css указываем настройки для этого элемента, то по умолчанию во всех таблицах будут те стили, которые мы указываем тут)

body - это значит что мы указываем настройки для элемента <body>

Почему мы указываем не разделили их? а именно в одной строчке?

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

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

p, 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;}

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

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

 
ElectromasterДата: Понедельник, 15.02.2010, 01:20 | Сообщение # 2
Сообщений: 270
Статус: Offline
Вот еще - изменяет стиль сообщения, при переходе на добавленный комментарий на форуме.

.replaceBody {background:url('http://rar.my1.ru/templates/back.gif') #191919;}
.replaceTable {background:#aac57a;height:100px;width:300px;border:1px solid #555555;}

 
DomainMasterДата: Понедельник, 29.03.2010, 07:50 | Сообщение # 3
Сообщений: 2
Статус: Offline
Может не в той теме пишу, новую создавать не стал, если что, перенесёте сообщение.
Уважаемый Electromaster, подскажите, как на Ucoz настроить репутацию так, чтобы она увеличивалась только тогда, когда пользователю скажут спасибо за сообщение. На некоторых форумах такое есть (Поблагодарить за сообщение), ссылку можно вывести в нижней панели сообщения (там, где Профиль, ЛС, Цитата, Доложить).
Буду очень благодарен!
Да, и ещё: можно ли на Ucoz вместо статуса Online/Offline выводить Online/<Время и дата последнего посещения>?

Сообщение отредактировал DomainMaster - Понедельник, 29.03.2010, 07:57
 
ElectromasterДата: Суббота, 03.04.2010, 21:06 | Сообщение # 4
Сообщений: 270
Статус: Offline
Первое вполне реализуемо, а второе не совсем и нужное...
 
SniperДата: Вторник, 20.04.2010, 16:30 | Сообщение # 5
Сообщений: 1
Статус: Offline
прикольно biggrin
 
VIRGILДата: Четверг, 22.04.2010, 16:56 | Сообщение # 6
Сообщений: 4
Статус: Offline
Помогите пожалуйсто советом! я облазил весь шаблон CSS но никак не могу сменить цвет текста во время создания новой темы на форуме.

Создание новой темы => "Название темы: Описание темы:"

Описание и название у меня по стилю шаблона идёт чёрным цветом на тёмно синем фоне, а как сменить этот дурацкий черный цвет текста я не понимаю, если е сложно напишите кусочек кода в шаблоне CSS который отвечает за цвет вводимого текста при создании новой темы на форуме.

Заранее спасибо )

 
ElectromasterДата: Пятница, 23.04.2010, 01:39 | Сообщение # 7
Сообщений: 270
Статус: Offline
Если я правильно вас понял то вам нужно изменить вот эти стили

.postNameFl,.postDescrFl {background:#fff;border:1px solid #9CCF00;width:400px;color:RED}

где color:RED - цвет текста

Просмотр исходного кода, поиск к примеру название темы и находим класс в коде или сами его задаем и изменяем стили сайта. Как видите все просто.

<TR id="frM25"><TD class="gTableLeft" id="frM26">Название темы:</TD> <TD class="gTableRight" id="frM27"><input type="text" id="frF3" style="width:100%" name="name" value="" class="postNameFl" size="50" maxlength="60" /></TD></TR>

<TR id="frM28"><TD class="gTableLeft" id="frM29">Описание темы:</TD><TD class="gTableRight" id="frM30"><input type="text" style="width:100%" id="frF4" name="description" value="" class="postDescrFl" size="50" maxlength="60" /></TD></TR>

 
VIRGILДата: Пятница, 23.04.2010, 03:00 | Сообщение # 8
Сообщений: 4
Статус: Offline
Я наверное что-то не то делаю, подобного кода у меня нет ((

Ради уточнения, мы обсуждаем изменение цвета в названии новой темы ?
Мне надо изменить цвет текста там где красные точечки на картинке ниже.

 
ElectromasterДата: Понедельник, 26.04.2010, 00:22 | Сообщение # 9
Сообщений: 270
Статус: Offline
/* Post Form */
.pollBut, .loginButton, .searchSbmFl, .commSbmFl, .signButton {font-size:7pt;background: #5C6884;color:#FFFFFF;border:1px outset #AFBDE4;}

.codeButtons {font-size:7pt;background: #5C6884;color:#FFFFFF;border:1px outset #AFBDE4;}
.codeCloseAll {font-size:7pt;background: #5C6884;color:#FFFFFF;border:1px outset #AFBDE4;font-weight:bold;}
.postNameFl,.postDescrFl {background:#131A2E;border:1px solid #1D2C57;width:400px;color:#FF0000}
.postPollFl,.postQuestionFl {background:#131A2E;border:1px solid #1D2C57;width:400px}
.postResultFl {background:#131A2E;border:1px solid #1D2C57;width:50px}
.postAnswerFl {background:#131A2E;border:1px solid #1D2C57;width:300px}
.postTextFl {background:#131A2E;border:1px solid #1D2C57;width:550px;height:150px;color:#FFFF00}
.postUserFl {background:#131A2E;border:1px solid #1D2C57;width:300px}

.pollHelp {font-weight:normal;font-size:7pt;padding-top:3px;}
.smilesPart {padding-top:5px;text-align:center}
/* --------- */

 
VIRGILДата: Понедельник, 26.04.2010, 01:08 | Сообщение # 10
Сообщений: 4
Статус: Offline
ПАСЯБААА!!!! Ура получилось! Выручил просто жуть как лофиии +
 
ElectromasterДата: Четверг, 29.04.2010, 22:24 | Сообщение # 11
Сообщений: 270
Статус: Offline
Quote (VIRGIL)
Слушай а может подскажешь у меня довольно много групп пользователей при заходе на сайт обычно у каждой группы пользователей свой цвет ника внизу. В настройке CSS я нашёл вот такую запись:
/* User Group Marks */
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:#0ed850;}
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:#10eadd;}
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:#20bef9;}
/* ---------------- */
что нужно добавить что-бы остальные группы которые я создал тоже имели свой цвет?

/* User Group Marks */
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:blue} - админ
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:red} - модеры
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:green} - проверенные
a.groupFriends:link,a.groupFriends:visited,a.groupFriends:hover {color:#} - друзья |цвета выбирай по дизайну..
a.groupOther1:link,a.groupOther1:visited,a.groupOther1:hover {color:#} - журналисты
a.groupUser:link,a.groupUser:visited,a.groupUser:hover {color:#} - пользователи
a.groupBanned:link,a.groupBanned:visited,a.groupBanned:hover {color:#} - вбане
/* User Group Marks */

 
VIRGILДата: Суббота, 01.05.2010, 00:00 | Сообщение # 12
Сообщений: 4
Статус: Offline
А если на пример у меня есть группы на русском языке (Эльфы, гномы, орки и т.п.) как мне сделать запись о них?
 
ElectromasterДата: Суббота, 01.05.2010, 10:05 | Сообщение # 13
Сообщений: 270
Статус: Offline
a.groupOther1:link,a.groupOther1:visited,a.groupOther1:hover {color:#} - группа 1
a.groupOther2:link,a.groupOther2:visited,a.groupOther2:hover {color:#} - группа 2
a.groupOther3:link,a.groupOther3:visited,a.groupOther3:hover {color:#} - группа 3
a.groupOther4:link,a.groupOther4:visited,a.groupOther4:hover {color:#} - группа 4
a.groupOther5:link,a.groupOther5:visited,a.groupOther5:hover {color:#} - группа 5
просмотри исходный код, там все написано...
 
AKUSTEKДата: Воскресенье, 29.08.2010, 00:08 | Сообщение # 14
Сообщений: 1
Статус: Offline
Я поставил дизайн отдельный для форума, так вот, у меня названия форумов ЕЛЕ ВИДНЫ! Как изменить размер названий? cry
 
ElectromasterДата: Воскресенье, 29.08.2010, 00:53 | Сообщение # 15
Сообщений: 270
Статус: Offline
Ссылку в студию (я на память не помню, да и не надо - просто надо знать где это можно найти)

и поточнее опишите вашу проблему...

 
Форум » Ucoz и все что с ним связано » Сss, Html - Примеры изменения кода » UCOZ CSS - Изменение Стиля сайта (Изменение внешнего вида форума)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: