Step 6: CHANGE EVERYTHING. -- Create your own Voy Forum

[ Show ]

Support VoyForums

[ Shrink ]

VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

[ Login ] [ Contact Forum Admin ] [ Main index ] [ Post a new message ] [ Search | Check update time | Archives: 1, 2, 3, 4, 5, 6, 7, [8] ]

Subject: Step 6: CHANGE EVERYTHING.

Author:
moderator

[ Next Thread | Previous Thread | Next Message | Previous Message ]

Date Posted: 10:23:28 01/30/13 Wed
In reply to: Moderator 's message, "How to create your own Forum" on 19:08:17 01/29/13 Tue

Let's TRY to make sense of this.....
-------------------------------
.cb{background-color:#9d9d9d}
-------------------------------
this appears to put a "Halo" around your
entire box of comments.
So, if the number is light green (FFCC99),
it will appear like a pleasant halo.
Or, if you choose dark blue (CCFF99),
it will seem stronger and more pronounced.

--------------------------------------
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
--------------------------------------

the number being used is a dull dark gray (7a7789).
This line alters the SUBJECT LINE.
Yes, this too can become a different color.
Although, this is not the most important feature.
Still though, let's try FF9999.
and the subject becomes orange.
It might be better off Dull Gray (lol).
The FFFFFF should probably be left alone.
This changes the color of the text. NOT a good idea.

------------------------------------
.c1{background-color:#aed1e8}
------------------------------------
THIS LINE IS IMPORTANT.
It changes the color of all your TOPICS.

-----------------------------------
.c2{background-color:#ddE4FF}
-----------------------------------
IMPORTANT IMPORTANT
This line alters the entire color of
your messages AND Body.
This will also effect after you've clicked inside.
So, the entire thread will bear this color.

------------------------------------
.cp{background-color:#99ccff}
------------------------------------
This line controls that huge box which says
"post a New Public Comment".
Sometimes, you may choose the same color as
the subject. That works nice.
Or, you can try a slightly different shade.
Of course, it's a good idea to keep a theme.
So, it's nice to use varying shads of blue, for instance.

----------------------------------------------
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}
----------------------------------------------
The final 3 lines should be fine, in their current state.

[ Next Thread | Previous Thread | Next Message | Previous Message ]

Replies:

[> Subject: Many examples of CSS

Author:
Teacher
[ Edit | View ]

Date Posted: 08:06:53 01/31/13 Thu

Assuming you are now in the
Advanced Forum CSS & Table-style Settings

and you're scrolled down to
CSS code (this is the actual code)

If you want to create your own unique forum,
Just remember that lines .c1, .c2, and .cp are most important.
So, if you only toggle those 3 lines,
this can change the entire "look" of your forum.
(So, replace XXXXXX with a 6-digit number.
(and, of course,
remove the words "Topics", "Messages And Body" "The Comment Box"

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#xxxxxx} Topics
.c2{background-color:#xxxxxx} Messages AND Body
.cp{background-color:#xxxxxx} The Comment Box
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

For your convenience, I've given a few examples.
These are not the only options available.
and, each color coordination can produce hundreds of possibilities.
-------------------------------
So, here are a few basic types:

YELLOW

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#FFFF99}
.c2{background-color:#FFFFCC}
.cp{background-color:#FFFF33}
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

Orange

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#FFCC66}
.c2{background-color:#FFE5B1}
.cp{background-color:#FFA500}
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

Red

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#FF3333}
.c2{background-color:#FF9999}
.cp{background-color:#CC0000}
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

Green

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#99FF66}
.c2{background-color:#CCFF99}
.cp{background-color:#66CC33}
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

Blue (mild)

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#99FFFF}
.c2{background-color:#CCFFFF}
.cp{background-color:#33CCCC}
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

Blue (stronger)

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#0099CC}
.c2{background-color:#00CCFF}
.cp{background-color:#006699}
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

Blue (alternative)

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#6699FF}
.c2{background-color:#99CCFF}
.cp{background-color:#3366CC}
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

PINK

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#FF99FF}
.c2{background-color:#FFCCFF}
.cp{background-color:#FF33FF}
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

Off White

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#CCCCCC} Topics
.c2{background-color:#EFEFEF} Messages AND Body
.cp{background-color:#AAAAAA} The Comment Box
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

Grayish Gray

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#AAAAAA}
.c2{background-color:#CCCCCC}
.cp{background-color:#9D9D9D}
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

SOOO.
In short, you simply alter those 3 important lines.
And, replace it with a 6-digit number of your choice.

.cb{background-color:#9d9d9d}
.chd{background-color:#7a7789;font-family:arial;font-weight:bold;color:#ffffff}
.c1{background-color:#xxxxxx} Topics
.c2{background-color:#xxxxxx} Messages AND Body
(choose a lighter color)
.cp{background-color:#xxxxxx} The Comment Box
.va{color:#000099;font-style:italic;font-weight:bolder}
.vu{font-style:italic;font-weight:bold}
.ttm{font-size:9pt}

You may change all the colors, if desired.
But, these 3 lines are the bulk of physical changes.

Of course, if you want to choose a dark color,
such as Dark blue, or black;
you will probably need to completely change the Word schemes.