Website Aesthetics

View previous topic View next topic Go down

Website Aesthetics

Post by Sirius_Alpha on 31st May 2008, 4:05 pm

As a tribute to John Whatmough, and in accordance to what I believe to be the opinion of the majority of the members of the original Extrasolar Visions forum, I've modified this forum to represent the original forum some. There are a few alterations, such as a search bar, and some other things like that. This forum uses phpb3, whereas the original uses phpb1. I've tried to approximate the original's appearance as much as possible.

If any of you have any ideas or suggestions, here's the place to discuss it.

A list of issues that have come up (red means it's been fixed).


  • The lines between the subforums. I havenít figured out how to get those.
  • The font size in the posts. In my opinion, itís too large. I havenít figured out how to change that either. (Fixed)
  • Grey text in the form fields for posting.
  • Option blackout when cursor is over it. (Code modification, thanks to Lazarus)
  • Quotes within quotes are difficult to read.
  • Drop-down menus have text that is too dark to read, compared to background colour. (Fixed)


Last edited by SiteAdmin on 1st August 2008, 11:38 pm; edited 10 times in total (Reason for editing : Update.)
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 12th June 2008, 8:15 pm

The way that all the preference names vanish when you move the mouse over them (e.g. when changing the option) is very annoying IMHO.
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 12th June 2008, 11:10 pm

Lazarus wrote:The way that all the preference names vanish when you move the mouse over them (e.g. when changing the option) is very annoying IMHO.

Yes, indeed. This is something I will fix.

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 17th June 2008, 12:28 pm

The input box is pretty bad: light grey on white is verging on unreadable.
Similar issue for quotes of quotes: white on light grey has the same problem, e.g.
Outer
Inner
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 21st June 2008, 9:03 pm

Yes, Lazarus, I see what you mean.

I've been extraordinary busy for the past two weeks at a summer mathematics/science camp at a neaby college. I will be similarly busy for the next two weeks, but I do promise I will address it when I figure out how.

If you want to have a crack at it, I'll post the relevant CSS coding and you can try re-posting it with modifications, I'll back up the original CSS and load in yours.

Code:
body {
    background-color: #000000;
    background-image: url(http://www.extrasolar.net/spaceback.gif);
    color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }

p, td { font-size: 11px; }

a:link,a:active,a:visited { color : #0099ff; }
a:hover        { text-decoration: underline; color : #EEEEEE; }

hr    { height: 0px; border: solid #000000 0px; border-top-width: 1px;}

.bodyline {
    background-color: #000000;
    background-image: url(http://www.extrasolar.net/spaceback.gif);
}

.forumline {
    background-color: #000000;
    background-image: url(http://www.extrasolar.net/spaceback.gif);
}

td.row1    { background-color: #000000; }
td.row2    { background-color: #000000; }
td.row3    { background-color: #000000; }

th {
    color: #CCCCCC; font-size: 11px; font-weight : bold;
    background-color: #001155; height: 25px;
    bacekground-image: url(images/cellpic3.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
    background-color:#001133; border: #000000; border-style: solid; height: 28px;
}

td.cat,td.catHead,td.catBottom {
    height: 29px;
    border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
    font-weight: bold; border: #000000; border-style: solid; height: 28px; }
td.row3Right,td.spaceRow {
    background-color: #001155; border: #000000; border-style: solid; }

th.thHead,td.catHead { font-size: 12px; border-width: 0px 0px 0px 0px; }
th.thSides,td.catSides,td.spaceRow    { border-width: 0px 0px 0px 0px; }
th.thRight,td.catRight,td.row3Right    { border-width: 0px 0px 0px 0px; }
th.thLeft,td.catLeft      { border-width: 0px 0px 0px 0px; }
th.thBottom,td.catBottom  { border-width: 0px 0px 0px 0px; }
th.thTop    { border-width: 0px 0px 0px 0px; }
th.thCornerL { border-width: 0px 0px 0px 0px; }
th.thCornerR { border-width: 0px 0px 0px 0px; }

.maintitle,h1,h2    {
    font-weight: bold; font-size: 22px; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none; line-height : 120%; color : #EEEEEE;
}


.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #CCCCCC; }
a.gen,a.genmed,a.gensmall { color: #0099ff; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover    { color: #EEEEEE; text-decoration: underline; }

.mainmenu    { font-size : 11px; color : #DCDCDC }
a.mainmenu    { text-decoration: none; color : #0099ff; }
a.mainmenu:hover{ text-decoration: underline; color : #EEEEEE; }

.cattitle        { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #BCBCBC}
a.cattitle        { text-decoration: none; color : #0099ff; }
a.cattitle:hover{ text-decoration: underline; }

.forumlink        { font-weight: bold; font-size: 12px; color : #0099ff; }
a.forumlink    { text-decoration: none; color : #0099ff; }
a.forumlink:hover{ text-decoration: underline; color : #EEEEEE; }

.nav        { font-weight: bold; font-size: 11px; color : #CCCCCC;}
a.nav        { text-decoration: none; color : #0099ff; }
a.nav:hover    { text-decoration: underline; }

.topictitle    { font-weight: bold; font-size: 11px; color : #CCCCCC; }
a.topictitle:link  { text-decoration: none; color : #0099ff; }
a.topictitle:visited { text-decoration: none; color : #0099ff; }
a.topictitle:hover    { text-decoration: underline; color : #EEEEEE; }

.name    { font-size : 11px; color : #DEDEDE;}

.postdetails    { font-size : 10px; color : #FFFFFF; }

.postbody { font-size : 10px; line-height: 150%; }
a.postlink:link    { text-decoration: none; color : #0099ff; }
a.postlink:visited { text-decoration: none; color : #0099ff; }
a.postlink:hover { text-decoration: underline; color : #EEEEEE; }

.signature { font-size : 10px; color : #BCBCBC; }

.code {
    font-family: 'OCR A Extended', Lucida Console, sans-serif; font-size: 10px; color: #FFFFFF;
    background-color: #0C0064; border: #BCBCBC; border-style: solid; border-width: 1px;
}

.quote {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #BCBCBC; line-height: 125%;
    background-color: #161616; border: #BCBCBC; border-style: solid; border-width: 1px;
}

.copyright    { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #999999; letter-spacing: -1px;}

a.copyright,a.copyright:visited,a.copyright:active    { color: #999999; text-decoration: none;}
a.copyright:hover { color: #BCBCBC; text-decoration: underline;}

input,textarea,select {
    c3olor : #000000;
    font: normal 12px Verdana, Arial, Helvetica, sans-serif; color: #000000;
    bor3der-color : #FFFFFF;
}

input.post, textarea.post {
    background-color : #000000;
        font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-color: #000000;
}

select {
    background-color : #222222;
}

input {
        text-indent : 2px;
        font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-color: #000000;
}

input.button {
    background-color : #2A2A2A;
    color : #000000;
    font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

inpudt.mainodption {
    backgreound-color : #2A2A2A;
    font-weight : bold;
}

inpdut.liteopdtion {
    backeground-color : #2A2A2A;
    font-weight : normal;
}

.heldpline { background-color: #363636; border-style: none; }

@import url("formIE.css");
[/code]

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 10th July 2008, 6:19 pm

Try adding the following... hopefully this will fix the invisible poll titles and the disappearing preference names...

Code:
.left-box { color: #cccccc !important }
label:hover { color: #cccccc !important }

Of course, it might break other stuff...
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 10th July 2008, 6:38 pm

It certainly has some effect, but isn't completely fixing the issue.

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 10th July 2008, 6:39 pm

Ok judging by the changes, the .left-box line worked, the label:hover one didn't (so might as well remove it)... evidently the hover property is defined on some element further up the DOM tree.
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 10th July 2008, 6:46 pm

Ok, so keep the .left-box line, and add

Code:
dl:hover, dd:hover, dt:hover { color: #cccccc !important }
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 10th July 2008, 6:49 pm

Implimented.

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 10th July 2008, 6:52 pm

Hmmm... that didn't work either.

Back to the drawing board...
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 10th July 2008, 7:01 pm

I'm not very good at CSS coding, so this may be a pointless guess, but would something to do with some sort of "mouseover" command help?

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 10th July 2008, 7:02 pm

You don't really want to be messing too much with JavaScript

Hmmm... ok take 3.

I seem to have found where the rule to turn the stuff black is, it's not in the bit of code you posted there.

Remove the lines
Code:
label:hover { color: #cccccc !important }
    dl:hover, dd:hover, dt:hover { color: #cccccc !important }
which I suggested before as these do not work.

Try instead
Code:
fieldset dl:hover dt label {color: #cccccc !important }
If that doesn't work add the following as well (but it shouldn't be necessary, I hope)
Code:
fieldset.fields2 dl:hover dt label {color: #cccccc !important;}

p.s. also do you know why the following gets put in the stylesheet? It definitely doesn't belong there...
Code:
<script type="text/javascript"
 src="http://tex.yourequations.com/"></script>
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 10th July 2008, 7:08 pm

I implimented the first fieldset command you gave, and it works! =D
Thank-you so much!

Would you also know how to modify the colour of the quote within the quote? And the text colour in the post input fields? o_O I apologize if this is asking a lot.

And yeah, I had tried getting LaTeX to work before, but was unsuccessful. =S.

New CSS is
Code:
body {
    background-color: #000000;
    background-image: url(http://www.extrasolar.net/spaceback.gif);
    color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}



fieldset dl:hover dt label {color: #cccccc !important }



font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }

p, td { font-size: 11px; }

a:link,a:active,a:visited { color : #0099ff; }
a:hover        { text-decoration: underline; color : #EEEEEE; }

hr    { height: 0px; border: solid #000000 0px; border-top-width: 1px;}

.bodyline {
    background-color: #000000;
    background-image: url(http://www.extrasolar.net/spaceback.gif);
}

.forumline {
    background-color: #000000;
    background-image: url(http://www.extrasolar.net/spaceback.gif);
}

td.row1    { background-color: #000000; }
td.row2    { background-color: #000000; }
td.row3    { background-color: #000000; }

th {
    color: #CCCCCC; font-size: 11px; font-weight : bold;
    background-color: #001155; height: 25px;
    bacekground-image: url(images/cellpic3.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
    background-color:#001133; border: #000000; border-style: solid; height: 28px;
}

td.cat,td.catHead,td.catBottom {
    height: 29px;
    border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
    font-weight: bold; border: #000000; border-style: solid; height: 28px; }
td.row3Right,td.spaceRow {
    background-color: #001155; border: #000000; border-style: solid; }

th.thHead,td.catHead { font-size: 12px; border-width: 0px 0px 0px 0px; }
th.thSides,td.catSides,td.spaceRow    { border-width: 0px 0px 0px 0px; }
th.thRight,td.catRight,td.row3Right    { border-width: 0px 0px 0px 0px; }
th.thLeft,td.catLeft      { border-width: 0px 0px 0px 0px; }
th.thBottom,td.catBottom  { border-width: 0px 0px 0px 0px; }
th.thTop    { border-width: 0px 0px 0px 0px; }
th.thCornerL { border-width: 0px 0px 0px 0px; }
th.thCornerR { border-width: 0px 0px 0px 0px; }

.maintitle,h1,h2    {
    font-weight: bold; font-size: 22px; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none; line-height : 120%; color : #EEEEEE;
}


.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #CCCCCC; }
a.gen,a.genmed,a.gensmall { color: #0099ff; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover    { color: #EEEEEE; text-decoration: underline; }

.mainmenu    { font-size : 11px; color : #DCDCDC }
a.mainmenu    { text-decoration: none; color : #0099ff; }
a.mainmenu:hover{ text-decoration: underline; color : #EEEEEE; }

.cattitle        { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #BCBCBC}
a.cattitle        { text-decoration: none; color : #0099ff; }
a.cattitle:hover{ text-decoration: underline; }

.forumlink        { font-weight: bold; font-size: 12px; color : #0099ff; }
a.forumlink    { text-decoration: none; color : #0099ff; }
a.forumlink:hover{ text-decoration: underline; color : #EEEEEE; }

.nav        { font-weight: bold; font-size: 11px; color : #CCCCCC;}
a.nav        { text-decoration: none; color : #0099ff; }
a.nav:hover    { text-decoration: underline; }

.topictitle    { font-weight: bold; font-size: 11px; color : #CCCCCC; }
a.topictitle:link  { text-decoration: none; color : #0099ff; }
a.topictitle:visited { text-decoration: none; color : #0099ff; }
a.topictitle:hover    { text-decoration: underline; color : #EEEEEE; }

.name    { font-size : 11px; color : #DEDEDE;}

.postdetails    { font-size : 10px; color : #FFFFFF; }

.postbody { font-size : 10px; line-height: 150%; }
a.postlink:link    { text-decoration: none; color : #0099ff; }
a.postlink:visited { text-decoration: none; color : #0099ff; }
a.postlink:hover { text-decoration: underline; color : #EEEEEE; }

.signature { font-size : 10px; color : #BCBCBC; }

.code {
    font-family: 'OCR A Extended', Lucida Console, sans-serif; font-size: 10px; color: #FFFFFF;
    background-color: #0C0064; border: #BCBCBC; border-style: solid; border-width: 1px;
}

.quote {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #BCBCBC; line-height: 125%;
    background-color: #161616; border: #BCBCBC; border-style: solid; border-width: 1px;
}

.copyright    { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #999999; letter-spacing: -1px;}

a.copyright,a.copyright:visited,a.copyright:active    { color: #999999; text-decoration: none;}
a.copyright:hover { color: #BCBCBC; text-decoration: underline;}

input,textarea,select {
    c3olor : #000000;
    font: normal 12px Verdana, Arial, Helvetica, sans-serif; color: #000000;
    bor3der-color : #FFFFFF;
}

input.post, textarea.post {
    background-color : #000000;
        font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000;
}

select {
    background-color : #222222;
}

input {
        text-indent : 2px;
        font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-color: #000000;
}

input.button {
    background-color : #2A2A2A;
    color : #000000;
    font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

inpudt.mainodption {
    backgreound-color : #2A2A2A;
    font-weight : bold;
}

inpdut.liteopdtion {
    backeground-color : #2A2A2A;
    font-weight : normal;
}




.heldpline { background-color: #363636; border-style: none; }

@import url("formIE.css");

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 11th July 2008, 11:45 am

Ah you removed the .left-box rule, that one should stay in because it makes the poll questions visible.

Try without the !important directives, it should (hopefully) still work. Below I've put what you should have, plus an extra rule which should sort out quotes of quotes...

Code:
.left-box { color: #cccccc }
fieldset dl:hover dt label { color: #cccccc }
blockquote blockquote { color: #001155 }
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 11th July 2008, 1:21 pm

Okay, I have done that, it doesn't seem to have modified the quotes of quotes, and the poll question is still not visible. Sad

Updated CSS
Code:
body {
    background-color: #000000;
    background-image: url(http://www.extrasolar.net/spaceback.gif);
    color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}


.left-box { color: #cccccc }
fieldset dl:hover dt label { color: #cccccc }
blockquote blockquote { color: #001155 }



font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }

p, td { font-size: 11px; }

a:link,a:active,a:visited { color : #0099ff; }
a:hover        { text-decoration: underline; color : #EEEEEE; }

hr    { height: 0px; border: solid #000000 0px; border-top-width: 1px;}

.bodyline {
    background-color: #000000;
    background-image: url(http://www.extrasolar.net/spaceback.gif);
}

.forumline {
    background-color: #000000;
    background-image: url(http://www.extrasolar.net/spaceback.gif);
}

td.row1    { background-color: #000000; }
td.row2    { background-color: #000000; }
td.row3    { background-color: #000000; }

th {
    color: #CCCCCC; font-size: 11px; font-weight : bold;
    background-color: #001155; height: 25px;
    bacekground-image: url(images/cellpic3.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
    background-color:#001133; border: #000000; border-style: solid; height: 28px;
}

td.cat,td.catHead,td.catBottom {
    height: 29px;
    border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
    font-weight: bold; border: #000000; border-style: solid; height: 28px; }
td.row3Right,td.spaceRow {
    background-color: #001155; border: #000000; border-style: solid; }

th.thHead,td.catHead { font-size: 12px; border-width: 0px 0px 0px 0px; }
th.thSides,td.catSides,td.spaceRow    { border-width: 0px 0px 0px 0px; }
th.thRight,td.catRight,td.row3Right    { border-width: 0px 0px 0px 0px; }
th.thLeft,td.catLeft      { border-width: 0px 0px 0px 0px; }
th.thBottom,td.catBottom  { border-width: 0px 0px 0px 0px; }
th.thTop    { border-width: 0px 0px 0px 0px; }
th.thCornerL { border-width: 0px 0px 0px 0px; }
th.thCornerR { border-width: 0px 0px 0px 0px; }

.maintitle,h1,h2    {
    font-weight: bold; font-size: 22px; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none; line-height : 120%; color : #EEEEEE;
}


.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #cccccc; }
a.gen,a.genmed,a.gensmall { color: #0099ff; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover    { color: #EEEEEE; text-decoration: underline; }

.mainmenu    { font-size : 11px; color : #DCDCDC }
a.mainmenu    { text-decoration: none; color : #0099ff; }
a.mainmenu:hover{ text-decoration: underline; color : #EEEEEE; }

.cattitle        { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #BCBCBC}
a.cattitle        { text-decoration: none; color : #0099ff; }
a.cattitle:hover{ text-decoration: underline; }

.forumlink        { font-weight: bold; font-size: 12px; color : #0099ff; }
a.forumlink    { text-decoration: none; color : #0099ff; }
a.forumlink:hover{ text-decoration: underline; color : #EEEEEE; }

.nav        { font-weight: bold; font-size: 11px; color : #CCCCCC;}
a.nav        { text-decoration: none; color : #0099ff; }
a.nav:hover    { text-decoration: underline; }

.topictitle    { font-weight: bold; font-size: 11px; color : #CCCCCC; }
a.topictitle:link  { text-decoration: none; color : #0099ff; }
a.topictitle:visited { text-decoration: none; color : #0099ff; }
a.topictitle:hover    { text-decoration: underline; color : #EEEEEE; }

.name    { font-size : 11px; color : #DEDEDE;}

.postdetails    { font-size : 10px; color : #FFFFFF; }

.postbody { font-size : 10px; line-height: 150%; }
a.postlink:link    { text-decoration: none; color : #0099ff; }
a.postlink:visited { text-decoration: none; color : #0099ff; }
a.postlink:hover { text-decoration: underline; color : #EEEEEE; }

.signature { font-size : 10px; color : #BCBCBC; }

.code {
    font-family: 'OCR A Extended', Lucida Console, sans-serif; font-size: 10px; color: #FFFFFF;
    background-color: #0C0064; border: #BCBCBC; border-style: solid; border-width: 1px;
}






.quote {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #BCBCBC; line-height: 125%;
    background-color: #161616; border: #BCBCBC; border-style: solid; border-width: 1px;
}







.copyright    { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #999999; letter-spacing: -1px;}

a.copyright,a.copyright:visited,a.copyright:active    { color: #999999; text-decoration: none;}
a.copyright:hover { color: #BCBCBC; text-decoration: underline;}

input,textarea,select {
    color : #000000;
    font: normal 12px Verdana, Arial, Helvetica, sans-serif; color: #000000;
    bor3der-color : #FFFFFF;
}

input.post, textarea.post {
    background-color : #000000;
        font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000;
}

select {
    background-color : #222222;
}

input {
        text-indent : 2px;
        font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-color: #000000;
}

input.button {
    background-color : #2A2A2A;
    color : #000000;
    font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

inpudt.mainodption {
    backgreound-color : #2A2A2A;
    font-weight : bold;
}

inpdut.liteopdtion {
    backeground-color : #2A2A2A;
    font-weight : normal;
}

form {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

textarea, select {
    font-weight: normal;
    font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    color: #444;
    border: 1px solid #888;
    background-color: #FFF;
}







.heldpline { background-color: #363636; border-style: none; }

@import url("formIE.css");

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 11th July 2008, 2:34 pm

Ah yes, sorry, what I meant was
Code:
blockquote blockquote { background-color: #001155 }
instead of
Code:
blockquote blockquote { color: #001155 }

As for the poll questions, try
Code:
.content h2 { color: #cccccc }
instead of
Code:
.left-box { color: #cccccc }
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 11th July 2008, 2:41 pm

Alright, I implimented the code. It seems to work pretty well! =D
In my own attempts to get it to work, I realised that it was in an h2 by looking at the source code, and tried this block of code

Code:
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.5em;
    text-decoration: none;
    line-height: 120%;
}

It didn't do the fix that your code does, but it did create a nice background effect. Do you think I should remove this? Or just let it exist?

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 11th July 2008, 2:48 pm

I'm not too keen on the background myself... also I'm not sure why that block of code would trigger it either.

If you're using Firefox, you can use the DOM Inspector add-on to find out just what CSS style rules are setting what parameters (including the selectors being used).

Also try
Code:
.inputbox { color: #444444 }
which should (hopefully) fix the text area input color...
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 11th July 2008, 3:49 pm

Lazarus wrote:If you're using Firefox, you can use the DOM Inspector add-on to find
out just what CSS style rules are setting what parameters (including
the selectors being used).
Indeed, I use Firefox. I don't have the DOM Inspector add-on. I'll download it if that's possible.
Well, the code fixed it as far as the search input goes, but not the text input for the posting area. =(

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 11th July 2008, 5:16 pm

Hmm still looks too light for my taste.

How about
Code:
.inputbox, input.inputbox, textarea.inputbox, .inputbox:hover, .inputbox:focus { color: #222222 !important }
instead of
Code:
.inputbox { color: #444444 }
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 11th July 2008, 6:05 pm

Alright, I've put it in. It doesn't seem to have worked =(.
I was unable to get the DOM Inspector to work, it has an error message saying it's incompatable with Firefox.

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Lazarus on 11th July 2008, 6:38 pm

It worked for me, perhaps you need to clear the cache in your browser...

What version of Firefox are you using? The current version of the DOM inspector works fine on Firefox 3 for me...
avatar
Lazarus
dG star
dG star

Number of posts : 2771
Registration date : 2008-06-12

View user profile

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 12th July 2008, 1:28 am

I'm honestly not sure what version of Firefox I'm using. I'm on a different computer at the moment. This computer runs IE, and it doesn't seem to work on IE either. Tomorrow morning, I'll check my Firefox version, clear the cache and all that good stuff.

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Sirius_Alpha on 12th July 2008, 4:59 pm

I was running 2.0.0.15.
I downloaded Firefox 3. It turns out that the DOM Inspector I tried downloading was designed for "Thunderbird", so my installation of Firefox 3 may have been unnecessary. Oh well, at least I'm more up-to-date. It seems DOM Inspector 2.0 isn't compatible with Firefox 3.0.

_________________
Caps Lock: Cruise control for 'Cool'!
avatar
Sirius_Alpha
Admin
Admin

Number of posts : 3402
Location : Earth
Registration date : 2008-04-06

View user profile http://solar-flux.forumandco.com/

Back to top Go down

Re: Website Aesthetics

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum