[ New messages · Members · Forum rules · Search · RSS ]
  • Page 1 of 1
  • 1
Forum moderator: Aloyasha, Vodka  
Gfx Syndicate » General uCoz » Coding Archive » Change Of Forum Appearance (Forum design, CSS, Change forum color, section color...)
Change Of Forum Appearance
Aloyasha
Messages: 274
Group: Head Admin
Title: Boo! Boo!
Reputation: 2
Status: Offline

Awards: 4Loading awards ...
:Date:
Thursday,
2010-11-18,
3:16 AM

Message # 1
Forum in Ucoz system is made as tables and users have no access to the HTML code of these tables. This is so because the majority of users don’t have enough knowledge to edit HTML code correctly. That’s why forum structure and form are constant, you can only change forum appearance/design. Forum has three templates:

1. General appearance of forum pages.
2. Appearance of entries (how a separate forum post looks)
3. Message addition form.

These three templates + CSS permit to make an individual forum and preserve all uCoz functionality.

The part of CSS that refers to forum:

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 and forum Titles & other are the classes responsible for the common appearance of forum tables.
forum Titles & other are the classes responsible for the appearance of the text in forum main page tables
forum Threads Style are the classes responsible for the appearance of threads list
forum Navigation Bar are the classes responsible for the appearance of the navigation bar
forum Page switchers – the classes responsible for the appearance of page switchers
forum Post Form – the classes responsible for the appearance of posts
forum Post Form - the classes responsible for the appearance of posts addition form

The following CSS part also refers to forum:

Code

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

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

This is the appearance of a page after addition of a post and the appearance of forum legend.

The beginning of CSS, where page background parameters and common appearance of links are written, refers to forum as well.

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


FAV:

LATEST:

Your worst nightmare is just to unfold. As your despair awakens your heart becomes more bear less.

People love there lives, If they don't then why are they living it?

Rules Forum Here:
Rules Thread READ EM OR ELSE

Aloyasha
Messages: 274
Group: Head Admin
Title: Boo! Boo!
Reputation: 2
Status: Offline

Awards: 4Loading awards ...
:Date:
Thursday,
2010-11-18,
3:20 AM

Message # 2
Quote
a:link {text-decoration:none; color:#559B36;}

"link" subclass is used to specify styles of hyperlinks which a user haven’t visited yet

Quote
a:active {text-decoration:none; color:#559B36;}

"active" subclass is used to specify styles of active hyperlinks

Quote
a:visited {text-decoration:none; color:#559B36;}

"visited" subclass is used to specify styles of hyperlinks of the pages, already visited by a user.

Quote
a:hover {text-decoration:underline; color:#000000;}

"hover" subclass is used to specify styles of hyperlinks with the mouse cursor over

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

td – this means that we specify settings for the element <td> (when we specify settings for this element in CSS all tables will have these settings on default)
body – this means that we specify settings for the element <body>

Why don’t we write this in separate lines

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

but in a new line?

Because it’s easier. If you want to set different styles for these elements then just separate them. You can also add one more element if you need:

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

here we specify styles for the elements <form>, <input>, <textarea>, <select>

It is not necessary to write styles for each element separately:
<input style="...">
and it is not necessary to specify a class for each element
<input class="...">
if you want to edit several elements at the same time do it as it is described above.


FAV:

LATEST:

Your worst nightmare is just to unfold. As your despair awakens your heart becomes more bear less.

People love there lives, If they don't then why are they living it?

Rules Forum Here:
Rules Thread READ EM OR ELSE

Aloyasha
Messages: 274
Group: Head Admin
Title: Boo! Boo!
Reputation: 2
Status: Offline

Awards: 4Loading awards ...
:Date:
Thursday,
2010-11-18,
3:22 AM

Message # 3
Forum Main Page CSS



FAV:

LATEST:

Your worst nightmare is just to unfold. As your despair awakens your heart becomes more bear less.

People love there lives, If they don't then why are they living it?

Rules Forum Here:
Rules Thread READ EM OR ELSE

Aloyasha
Messages: 274
Group: Head Admin
Title: Boo! Boo!
Reputation: 2
Status: Offline

Awards: 4Loading awards ...
:Date:
Thursday,
2010-11-18,
3:23 AM

Message # 4
CSS of the page with forum threads



FAV:

LATEST:

Your worst nightmare is just to unfold. As your despair awakens your heart becomes more bear less.

People love there lives, If they don't then why are they living it?

Rules Forum Here:
Rules Thread READ EM OR ELSE

Aloyasha
Messages: 274
Group: Head Admin
Title: Boo! Boo!
Reputation: 2
Status: Offline

Awards: 4Loading awards ...
:Date:
Thursday,
2010-11-18,
3:26 AM

Message # 5

  • How to find and edit CSS class

1) In you browser click View -> Source (How do I view the source code of a web page (in different browsers))?.
2) Find the element you want to change and see what class it has.
3) Copy the name of the class.
4) Open Style Sheets (CSS) in Control Panel -> Customize Design
5) Find this class in CSS.
4) Modify the parameters as you need.

If there is no separate class for the element then add it to the template (via Control Panel) and to the CSS with the necessary parameters.

Example:
Users often want to change font size in forum posts. Open any forum thread and copy a part of the text. Open View -> Source and find this part. See what class it has – post text has the class="posttdmessage".

Open CSS of the forum and find "posttdmessage" in the section /* Posts View */.

Code
.posttdmessage {padding:5px;font-size:8pt;}

We can see that only padding and font size are specified. We can change the size and add color, and the class will look as follows:

Code

.posttdmessage {padding:5px;font-size:10pt;color:#CCCCCC;}


FAV:

LATEST:

Your worst nightmare is just to unfold. As your despair awakens your heart becomes more bear less.

People love there lives, If they don't then why are they living it?

Rules Forum Here:
Rules Thread READ EM OR ELSE

Gfx Syndicate » General uCoz » Coding Archive » Change Of Forum Appearance (Forum design, CSS, Change forum color, section color...)
  • Page 1 of 1
  • 1
Search: