A couple of New Looks

Archive of notes and cross input on Dev versions of Coranto (1.25.1 and Older)

Moderators: Dale Ray, SrNupsen, Bluetooth, Jackanape

A couple of New Looks

Postby Jackanape » Fri Jan 12, 2007 7:49 pm

The first is transferred from another topic:

As an aside, here's the CSS I use currently with all my Coranto installs, for myself or Clients...I'm not sure where I got it, as I can't find it anywhere. After a search I begin to suspect it's sdkaneda's Fruit Salad Theme. This is terrific start for looking for a "new look out of the box".

What do you think? Here's the code, and a screenshot:

Code: Select all
a:hover {
text-decoration: underline;
}

body a {
color: #5A73F2;
text-decoration: none;
}

body,div,td {
font-family: "trebuchet ms",arial,helvetica,sans-serif;
font-size: 9pt;
}

input, .footnote {
color: #636363;
}

.bodybg, .description {
background-color: #FFFFFF;
border: none;
color: #636363; }

.confirm {
background-color: #FFFFFF;
}

.darkgbg {
background-color: #C3EE91;
width: 100%;
}

.descriptiondarker {
background-color: #D4D8DF;
width: 100%;
}

.fieldtitle {
background-color: #E6EAFD;
border: 0px dotted #666666;
color: #5A73F2;
font-weight: bold;
}

.largeheader {
color: #5D8A29;
font-weight: bold;
}

.lightgbg {
background-color: #F1F1F1;
color: #636363;
}

.menuheader {
background-color: #FFAA00;
color: #FFFFFF;
font-weight: bold;
text-align: right;
}

.menuheader2 {
background-color: #FFAA00;
color: #FFFFFF;
font-weight: bold;
text-align: left;
}

.menulinks {
background-color: #F1F1F1;
border-bottom: 1px solid #646464;
text-align: left;
}

.midheader {
background-color: #D0C1F0;
color: #6333CC;
font-weight: bold;
}

.midheader {
font-weight: bold;
}

.miniheader {
font-style: italic;
font-weight: bold;
}

.navlink {
background-color: #FFFFFF;
color: #636363;
font-style: normal;
font-weight: normal; 
margin-left: 16px; 
}

.topinfo {
background-color: #FFFFFF;
}

.whitebg {
border: 1px dashed #DFDFDF; 
margin-right: 13px; 
margin-left: 0px;
}

.yellow {
color: #c3ee91;
}

.yellowbg {
background-color: #FFFFFF;
border-bottom: #FFFFFF 0px solid;
border-left: #FFFFFF 0px solid;
border-right: #FFFFFF 0px solid;
border-top: #FFFFFF 0px solid; 
font-weight: normal;
}


Image



Then, I tooled around with the color scheme a bit, to come up with this one:

Image

Code: Select all
a:hover {
text-decoration: underline;
}

body a {
color: #806040;
text-decoration: none;
}

body,div,td {
font-family: "trebuchet ms",arial,helvetica,sans-serif;
font-size: .85em;
}

input, .footnote {
color: #663300;
}

.bodybg {
background-color: #FFEFD1;
border: none;
color: #633B23; }

.description {
border: none;
color: #633B23; }

.confirm {
background-color: #FFF5E2;
}

.darkgbg {
background-color: #f2d6bb;
width: 100%;
}

.descriptiondarker {
background-color: #D4D8DF;
width: 100%;
}

.fieldtitle {
background-color: #e0c0a0;
border: 0px;
color: #806040;
font-weight: bold;
}

.largeheader {
color: #c8020c;
font-weight: bold;
}

.lightgbg {
background-color: #FFF5E2;
color: #636363;
}

.menuheader {
background-color: #FFF5E2;
color: #800000;
font-weight: bold;
text-align: right;
}

.menuheader2 {
background-color: #FFF5E2;
color: #800000;
font-weight: bold;
text-align: left;
}

.menulinks {
background-color: #FFF5E2;
border-bottom: 1px solid #800000;
text-align: left;
}

.midheader {
background-color: #FFEFD1;
color: #636363;
font-weight: bold;
}

.midheader {
font-weight: bold;
}

.miniheader {
font-style: italic;
font-weight: bold;
}

.navlink {
background-color: #FFF5E2;
color: #800000;
font-style: normal;
font-weight: normal; 
}

.topinfo {
background-color: #FFF5E2;
}

.redbg {    
background-color: #c0a080;
}

.whitebg {    
background-color: #f0e0c0;
border: 1px solid #c0a080;
}

.yellow {
color: #c3ee91;
}

.yellowbg {
background-color: #c0a080;
border-bottom: #FFF5E2 1px solid;
border-left: #FFF5E2 1px solid;
border-right: #FFF5E2 1px solid;
border-top: #FFF5E2 1px solid; 
font-weight: normal;
}


I'm not sure either of these are the answer, but maybe they are, for now...there's my contribution...
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Lumberjack » Fri Jan 12, 2007 8:42 pm

I prefer something like the second one, but less brown and more autumn-leaf colours like pastel reds and oranges. Something like this forum, I see you've gone for that, but the screenshot looks just a bit too brown and beige. Good effort though. I think the key here is to tone down the brightness of the original newspro/coranto colour scheme.
Lumberjack
 
Posts: 555
Joined: Wed Jan 10, 2007 7:22 pm
Location: Oxford, UK

Postby Jackanape » Fri Jan 12, 2007 10:32 pm

Like this?

Image

Code: Select all
a:hover {
text-decoration: underline;
}

body a {
color: #c06000;
text-decoration: none;
}

body,div,td {
font-family: "trebuchet ms",arial,helvetica,sans-serif;
font-size: .85em;
}

input, .footnote {
color: #636363;
}

.bodybg, .description {
background-color: #f6eee0;
color: #636363; }

.confirm {
background-color: #f6eee0;
}

.darkgbg {
background-color: #602000;
width: 100%;
}

.descriptiondarker {
background-color: #D4D8DF;
width: 100%;
}

.fieldtitle {
background-color: #e0c040;
color: #c06000;
font-weight: bold;
}

.largeheader {
color: #e0c0a0;
font-weight: bold;
}

.lightgbg {
background-color: #F1F1F1;
color: #636363;
}

.menuheader {
background-color: #FFAA00;
color: #f6eee0;
font-weight: bold;
text-align: right;
}

.menuheader2 {
background-color: #FFAA00;
color: #f6eee0;
font-weight: bold;
text-align: left;
}

.menulinks {
background-color: #F1F1F1;
border-bottom: 1px solid #646464;
text-align: left;
}

.midheader {
background-color: #D0C1F0;
color: #6333CC;
font-weight: bold;
}

.midheader {
font-weight: bold;
}

.miniheader {
font-style: italic;
font-weight: bold;
}

.navlink {
background-color: #f6eee0;
color: #636363;
}

.topinfo {
background-color: #f6eee0;
}

.whitebg {
border: 5px solid #a04000;
}

.yellow {
color: #602000;
}

.yellowbg {
background-color: #f6eee0;
}
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Lumberjack » Fri Jan 12, 2007 10:52 pm

Better, but I think a deeper orange than that for the titles, it looks yellow. Nice though, it will suit coranto.
Lumberjack
 
Posts: 555
Joined: Wed Jan 10, 2007 7:22 pm
Location: Oxford, UK

Postby Jackanape » Fri Jan 12, 2007 10:58 pm

I tried orange, it just looked, well, bad...

The Goldenrod, with the orange letters, and the orange highlights throughout seemed to work best. Try it on a full install and you'll see what i mean...
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Lumberjack » Fri Jan 12, 2007 11:33 pm

Hmm yes.. I prefer the beigey one now, but it would be good I think to invert those two.. a bit more like this:

Code: Select all
a:hover {
text-decoration: underline;
}

body a {
color: #806040;
text-decoration: none;
}

body,div,td {
font-family: "trebuchet ms",arial,helvetica,sans-serif;
font-size: 12px;
}

input, .footnote {
color: #663300;
}

.bodybg {
background-color: #FFEFD1;
border: none;
color: #633B23; }

.description {
border: none;
color: #633B23; }

.confirm {
background-color: #FFF5E2;
}

.darkgbg {
background-color: #f2d6bb;
width: 100%;
}

.descriptiondarker {
background-color: #D4D8DF;
width: 100%;
}

.fieldtitle {
background-color: #f0e0c0;
border: 0px;
color: #806040;
font-weight: bold;
}

.largeheader {
color: #c8020c;
font-weight: bold;
}

.lightgbg {
background-color: #FFF5E2;
color: #636363;
}

.menuheader {
background-color: #FFF5E2;
color: #800000;
font-weight: bold;
text-align: right;
}

.menuheader2 {
background-color: #FFF5E2;
color: #800000;
font-weight: bold;
text-align: left;
}

.menulinks {
background-color: #FFF5E2;
border-bottom: 1px solid #800000;
text-align: left;
}

.midheader {
background-color: #FFEFD1;
color: #636363;
font-weight: bold;
}

.midheader {
font-weight: bold;
}

.miniheader {
font-style: italic;
font-weight: bold;
}

.navlink {
background-color: #FFF5E2;
color: #800000;
font-style: normal;
font-weight: normal;
}

.topinfo {
background-color: #FFF5E2;
}

.redbg {   
background-color: #c0a080;
}

.whitebg {   
background-color: #ddc0aa;
border: 1px solid #c0a080;
}

.yellow {
color: #c3ee91;
}

.yellowbg {
background-color: #c0a080;
border-bottom: #FFF5E2 1px solid;
border-left: #FFF5E2 1px solid;
border-right: #FFF5E2 1px solid;
border-top: #FFF5E2 1px solid;
font-weight: normal;
}
Lumberjack
 
Posts: 555
Joined: Wed Jan 10, 2007 7:22 pm
Location: Oxford, UK

Postby Broomsy » Sat Jan 13, 2007 12:09 am

Ok lets decide on a new look before I add it to 1.25. The only trouble I see with your twos versions are that you are adding some styles that Coranto does not recognise.

Here are the styles to use (as far as I can see):

body
A:hover
.navlink
.yellow
.miniheader
.largeheader
.fieldtitle
.description
.redbg
.darkgbg
.confirm
.yellowbg
.midheader
.footnote
.whitebg
.lightgbg
.bodybg
Broomsy
 
Posts: 244
Joined: Wed Jan 10, 2007 10:25 am
Location: UK

Postby Lumberjack » Sat Jan 13, 2007 12:13 am

I just copied what Jackanape had posted.. here is what CSS Editor has by default:

Code: Select all
body {  font-family: Arial, Helvetica, sans-serif; font-size: 15px}
A:hover { text-decoration: none}
.navlink {  font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-weight: normal; background-color: #FFF8CA}
.yellow {  color: #ffcc33}
.miniheader {  font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: italic; font-weight: bold}
.largeheader {  font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; color: #FFCC33}
.fieldtitle {  font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; background-color: #DADADA}
.description {  font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; background-color: #FFF8CA}
.redbg {  background-color: #E10000}
.darkgbg {  background-color: #666666}
.confirm {  font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: normal; background-color: #FFFFFF}
.yellowbg {  background-color: #FFF8CA}
.midheader {  font-family: Arial, Helvetica, sans-serif; font-size: 19px; font-weight: normal; color: #FFFFFF; background-color: #666666}
.footnote { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal}
.whitebg {  background-color: #FFFFFF}
.lightgbg {  background-color: #CCCCCC}
.bodybg { background-color: #FED385; color: #000000 }
Lumberjack
 
Posts: 555
Joined: Wed Jan 10, 2007 7:22 pm
Location: Oxford, UK

Postby Jackanape » Sat Jan 13, 2007 2:48 am

Interesting...and what I posted was from a Coranto theme I had on hand, but can no longer find...then I just did some modifications in the color, and there you go.

I'll have to take another look.
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Jackanape » Sat Jan 13, 2007 2:50 am

Lumberjack wrote:Hmm yes.. I prefer the beigey one now, but it would be good I think to invert those two.. a bit more like this:


That beige just seemed a little bit dark to me, for putting words on. It could make it difficult for people with vision problems to see...bet let's keep the ideas rolling...especially if this is pretty much all we're waiting on.
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Alexv » Sat Jan 13, 2007 8:21 am

I usually use this style, which looks like this.
aka on ctus: alexv, aerosoul, billgates
Alexv
 
Posts: 33
Joined: Wed Jan 10, 2007 4:47 pm

Postby Lumberjack » Sat Jan 13, 2007 12:24 pm

That's quite a nice one, Alex. I quite like the colour scheme of this board, must try to get that one running..
Lumberjack
 
Posts: 555
Joined: Wed Jan 10, 2007 7:22 pm
Location: Oxford, UK

Postby Swordfish » Sat Jan 13, 2007 12:41 pm

Love the last one. It works great! Just installed it. Maybe you could put out a .zip with the graphic so that it can be installed localy?
Hmmm.....I'd like a cup of coffe! Thanks!
User avatar
Swordfish
 
Posts: 69
Joined: Wed Jan 10, 2007 2:58 pm
Location: Tromsø, Norway

Postby Lumberjack » Sat Jan 13, 2007 12:57 pm

This is kind of close to how the board here is.. I think whitebg colour is not quite right though.

Code: Select all
body {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px}
a { color: #900000; text-decoration: none }
A:hover { text-decoration: underline}
.navlink {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; background-color: #F2D6BB}
.yellow {  color: #00ff00}
.miniheader {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic; font-weight: bold}
.largeheader {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; color: #800000}
.fieldtitle {  font-family: Verdana, Helvetica, sans-serif; font-size: 15px; font-weight: bold; background-color: #F2D6BB}
.description {  font-family: Verdana, Helvetica, sans-serif; font-size: 12px; font-weight: normal; background-color: #FFEFD1}
.redbg {  background-color: #D7AA8F}
.darkgbg {  background-color: #B78A6F}
.confirm {  font-family: Verdana, Helvetica, sans-serif; font-size: 13px; font-weight: normal; background-color: #FFF7EF}
.yellowbg {  background-color: #FFEFD1}
.midheader {  font-family: Verdana, Helvetica, sans-serif; font-size: 16px; font-weight: normal; color: #800000; background-color: #D7AA8F}
.footnote { font-family: Verdana, Helvetica, sans-serif; font-size: 11px; font-weight: normal}
.whitebg {  background-color: #FFF7EF}
.lightgbg {  background-color: #F2D6BB}
.bodybg { background-color: #FFEFD1; color: #500000 }
Lumberjack
 
Posts: 555
Joined: Wed Jan 10, 2007 7:22 pm
Location: Oxford, UK

Postby Alexv » Sat Jan 13, 2007 2:36 pm

Swordfish wrote:Maybe you could put out a .zip with the graphic so that it can be installed localy?
You mean the gradients? Yeah maybe, when I get a few minutes, though I'd have to explain that people would have to place those images in the httpdocs folder and then set the appropriate URLs in the CSS.
aka on ctus: alexv, aerosoul, billgates
Alexv
 
Posts: 33
Joined: Wed Jan 10, 2007 4:47 pm

Next

Return to Coranto Development Archives -- 1.25.1 and Older

Who is online

Users browsing this forum: No registered users and 1 guest

cron