Website Aesthetics

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)
  

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.

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.

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

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]

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...

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

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.

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

Code:

dl:hover, dd:hover, dt:hover { color: #cccccc !important }

Implimented.

Hmmm... that didn't work either.

Back to the drawing board...

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?

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>

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");

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 }