Announcement

Collapse
No announcement yet.

Feedback needed on a style i've got.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Deimos
    replied
    Hmm, I didn't notice any difference after doing that, hehe

    Leave a comment:


  • Deimos
    replied
    Done

    Leave a comment:


  • Deimos
    replied
    ok ok! sorry

    Leave a comment:


  • kyk0
    replied
    Yes!

    Leave a comment:


  • Deimos
    replied
    Heh, think I messed it up.
    I've gone through what you said again but i'm not sure what to do on the last bit (the tborder bit)
    I don't have that part you quoted in the css...?
    The only entry in the Tborder box is ..

    BORDER-LEFT: #121316 2px solid;

    Should I change that to..

    border: 1px solid #121316; ?

    Leave a comment:


  • kyk0
    replied
    Nono!

    Change:
    .tborder
    {
    .tborder {
    border: 1px solid #121316;
    }
    }
    To

    .tborder {
    border: 1px solid #121316;
    }

    Leave a comment:


  • Deimos
    replied
    Ok, done, I think.
    hehe

    Leave a comment:


  • kyk0
    replied
    Originally posted by Deimos
    Ok, so all I have to do is delete the entry in the tborder box and add that bit in the Additional CSS definitions at the bottom of the page, right?
    Close, remove tborder entry by replacing it with the one I stated above. It will make everything more definable.

    Leave a comment:


  • Deimos
    replied
    Ok, so all I have to do is delete the entry in the tborder box and add that bit in the Additional CSS definitions at the bottom of the page, right?
    (Thanks for helping out though, I was never happy with the finished design myself)

    -----

    Edit: I'd also change the cellpadding stylevar from 3 to 5 or something. Everything looks a little squashed
    Aye done that
    It's amazing what a few tweaks can do to a style.

    Leave a comment:


  • kyk0
    replied
    Nah, to fix the main borders, need to fix up .tborder. Remove tborder and replace it with:

    .tborder {
    border: 1px solid #121316;
    }
    Then the bevels aren't as extreme affecting almost every single object.

    Edit: I'd also change the cellpadding stylevar from 3 to 5 or something. Everything looks a little squashed.

    Leave a comment:


  • Deimos
    replied
    I took out what you recommended, this is the result

    http://www.uoforums.com/forums/index.php?styleid=37

    Should I also remove it from the "Additional CSS definitions"?
    This is what's in there at the moment..(Excuse the size of the quote, it's a tad big)

    /* ***** styling for 'big' usernames on postbit etc. ***** */
    .bigusername { font-size: 14pt; }

    /* ***** small padding on 'thead' elements ***** */
    td.thead, div.thead { padding: 4px; }

    /* ***** basic styles for multi-page nav elements */
    .pagenav a { text-decoration: none; }
    .pagenav td { padding: 2px 4px 2px 4px; }

    /* ***** define margin and font-size for elements inside panels ***** */
    .fieldset { margin-bottom: 6px; }
    .fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

    /* ***** don't change the following ***** */
    form { display: inline; }
    label { cursor: default; }
    .normal { font-weight: normal; }
    .inlineimg { vertical-align: middle; }



    /* General page style. The scroll bar colours only visible in IE5.5+ */
    body {
    color : #E4E4E4;
    background-color: #1E1E2A;
    SCROLLBAR-base-COLOR: #2A2A34;
    SCROLLBAR-ARROW-COLOR: #9F9FA8;
    }

    /* General font families for common tags */
    font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
    a:link,a:active,a:visited { color : #E4E4E4; text-decoration: none; }
    a:hover { text-decoration: none; color : #EFC70A; }
    hr {
    border-top: 1px solid #121316;
    border-bottom: 1px solid #47475D;
    height: 2px;
    width: 100%;
    }


    /* This is the border line & background colour round the entire page */
    .bodyline { background-color: #1E1E2A; border: 0px #98AAB1 solid; }

    /* This is the outline round the main forum tables */
    .forumline { background-color: #1E1E2A; border: 0px #E4E4E4 solid; }


    /* Main table cell colours and backgrounds */
    td.row1 {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#1E1E2A;
    }
    td.row2 {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#2C2C3C;
    }
    td.row3 {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#1E1E2A;
    }



    td.rowpic {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#2A2B3A;
    }


    th {
    color: #B7BAC5;
    font-size: 11px;
    font-weight : bold;
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#2C2C3C;
    height: 25px;
    background-image: url(images/cellpic3.gif);
    }
    th.1 {
    color: #B7BAC5;
    font-size: 11px;
    font-weight : bold;
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#2C2C3C;
    height: 25px;
    background-image: url(images/cellpic3.gif);
    }
    td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#2A2B3A;
    height: 28px;
    }


    /*
    Setting additional nice inner borders for the main table cells.
    The names indicate which sides the border will be on.
    Don't worry if you don't understand this, just ignore it :-)
    */

    th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
    font-weight: bold;
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#1E1E2A; height: 28px;
    }
    td.row3Right,td.spaceRow {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#1E1E2A;
    }

    td.catHead {
    font-size: 12px;
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#1E1E2A;
    }
    td.catSides {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#1E1E2A;
    }
    td.catRight {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#1E1E2A;
    }
    td.catLeft {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#1E1E2A;
    }
    td.catBottom {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#1E1E2A;
    }



    /* The largest text used in the index page title and toptic title etc. */
    .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 : #ffffff;
    }


    /* General text */
    .gen { font-size : 12px; }
    .genmed { font-size : 11px; }
    .gensmall { font-size : 10px; }
    .gen,.genmed,.gensmall { color : #E4E4E4; }
    a.gen,a.genmed,a.gensmall { color: #E4E4E4; text-decoration: none; }
    a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #F3D823; text-decoration: none; }


    /* The register, login, search etc links at the top of the page */
    .mainmenu { font-size : 11px; color : #E4E4E4; }
    a.mainmenu { text-decoration: none; color : #E4E4E4; }
    a.mainmenu:hover{ text-decoration: none; color : #F3D823; }


    /* Forum category titles */
    .cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 0px; color : #E4E4E4}
    a.cattitle { text-decoration: none; color : #E4E4E4; }
    a.cattitle:hover{ text-decoration: none; }


    /* Forum title: Text and link to the forums used in: index.php */
    .forumlink { font-weight: bold; font-size: 12px; color : #E4E4E4; }
    a.forumlink { text-decoration: none; color : #E4E4E4; }
    a.forumlink:hover{ text-decoration: none; color : #F3D823; }


    /* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
    .nav { font-weight: bold; font-size: 11px; color : #E4E4E4;}
    a.nav { text-decoration: none; color : #E4E4E4; }
    a.nav:hover { text-decoration: none; }


    /* titles for the topics: could specify viewed link colour too */
    .topictitle { font-weight: bold; font-size: 11px; color : #E4E4E4; }
    a.topictitle:link { text-decoration: none; color : #E4E4E4; }
    a.topictitle:visited { text-decoration: none; color : #E4E4E4; }
    a.topictitle:hover { text-decoration: none; color : #F3D823; }


    /* Name of poster in viewmsg.php and viewtopic.php and other places */
    .name { font-size : 11px; color : #E4E4E4;}

    /* Location, number of posts, post date etc */
    .postdetails { font-size : 10px; color : #E4E4E4; }


    /* The content of the posts (body of text) */
    .postbody { font-size : 12px;}
    a.postlink:link { text-decoration: none; color : #E4E4E4; }
    a.postlink:visited { text-decoration: none; color : #E4E4E4; }
    a.postlink:hover { text-decoration: none; color : #F3D823;}


    /* Quote & Code blocks */
    .code {
    font-family: Arial, 'Courier New', sans-serif;
    font-size: 11px; color: #F3D823;
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#0D0E13;
    }

    .quote {
    font-family: Arial, 'Courier New', sans-serif;
    font-size: 11px; color: #F3D823;
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#0D0E13;
    }


    /* Copyright and bottom info */
    .copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; text-decoration: none;}
    a.copyright { color: #444444; text-decoration: none;}
    a.copyright:link { text-decoration: none; color : #444444; }
    a.copyright:visited { text-decoration: none; color : #444444; }
    a.copyright:hover { color: #F3D823; text-decoration: none;}

    /* Form elements */
    input,textarea, select {
    color : #e4e4e4;
    font: normal 11px Verdana, Arial, Helvetica, sans-serif;
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#0D0E13;
    }

    /* The text input fields background colour */
    input.post, textarea.post, select {
    background-color : #0d0e13;
    }

    input { text-indent : 2px; }

    /* The buttons used for bbCode styling in message post */
    input.button {
    BORDER-RIGHT: #121316 2px solid;
    BORDER-TOP: #47475D 2px solid;
    BORDER-BOTTOM: #121316 1px solid;
    BORDER-LEFT: #47475D 2px solid;
    background:#2C2C3C;
    color : #e4e4e4;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    /* The main submit button option */
    input.mainoption {
    BORDER-RIGHT: #121316 2px solid;
    BORDER-TOP: #47475D 2px solid;
    BORDER-BOTTOM: #121316 1px solid;
    BORDER-LEFT: #47475D 2px solid;
    background:#2C2C3C;
    font-weight : bold;
    }

    /* None-bold submit button */
    input.liteoption {
    BORDER-RIGHT: #121316 2px solid;
    BORDER-TOP: #47475D 2px solid;
    BORDER-BOTTOM: #121316 1px solid;
    BORDER-LEFT: #47475D 2px solid;
    background:#2C2C3C;
    font-weight : normal;
    }

    /* This is the line in the posting page which shows the rollover
    help line. This is actually a text box, but if set to be the same
    colour as the background no one will know
    */
    .helpline {
    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;
    background:#0D0E13;
    }

    Leave a comment:


  • kyk0
    replied
    Love the legend icons. Don't like the CSS on the borders and the whole colour. It mimics an amateur bevel in photoshop. Split the header in half with a dynamic table, will give the forum some more structure. Personally, I hate arcades, making it larger looks out of place.

    From a quick glance, to make the tables have a standard padded line, remove from td, th, li, p:

    BORDER-RIGHT: #47475D 1px solid;
    BORDER-TOP: #121316 2px solid;
    BORDER-BOTTOM: #47475D 1px solid;
    BORDER-LEFT: #121316 2px solid;

    Leave a comment:


  • Deimos
    replied
    *whistles*
    Uh, how would I go about doing that? hehe
    I didn't do the style myself :P

    Leave a comment:


  • M1th
    replied
    Looks nice. I like the colour theme, but the use of inset/outset border styles don't sit quite well with me. Have you tried using a 'solid border' instead? Might look neater.

    Leave a comment:


  • Deimos
    replied
    Np, I panicked there for a second, I thought my licence had expired or something hehe

    Leave a comment:

widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...
X