Announcement

Collapse
No announcement yet.

Feedback needed on a style i've got.

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

  • Feedback needed on a style i've got.

    Hi all,

    I wanted some feedback on my site and how the default style looks at first glance?

    http://www.uoforums.com/forums/

    Also, does anyone know where I can get a set of dark buttons?

  • #2
    To show you are licensed, please register for Priority Forum Support. To do this, please go here:

    http://www.vbulletin.com/members/mem...t_priority.php

    ...and enter your email address in one of the boxes. You'll need to have your customer number and password to access the page.

    If you still have problems after doing this, send an email to [email protected]. Please include your user name, the email address you registered with and your customer number so we can fix the problem.

    Once you've done this, please post in the appropriate support forum for your version.
    Steve Machol, former vBulletin Customer Support Manager (and NOT retired!)
    Change CKEditor Colors to Match Style (for 4.1.4 and above)

    Steve Machol Photography


    Mankind is the only creature smart enough to know its own history, and dumb enough to ignore it.


    Comment


    • #3
      Yep, done
      The email registered on the forum had since been removed due to changing ISP.
      I've got an Owner's licence of VB

      Comment


      • #4
        Thanks.
        Steve Machol, former vBulletin Customer Support Manager (and NOT retired!)
        Change CKEditor Colors to Match Style (for 4.1.4 and above)

        Steve Machol Photography


        Mankind is the only creature smart enough to know its own history, and dumb enough to ignore it.


        Comment


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

          Comment


          • #6
            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.
            Chamber of Secrets - The Ultimate Harry Potter Community!

            Comment


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

              Comment


              • #8
                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;
                Australia's Design Community

                Comment


                • #9
                  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;
                  }

                  Comment


                  • #10
                    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.
                    Australia's Design Community

                    Comment


                    • #11
                      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.

                      Comment


                      • #12
                        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.
                        Australia's Design Community

                        Comment


                        • #13
                          Ok, done, I think.
                          hehe

                          Comment


                          • #14
                            Nono!

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

                            .tborder {
                            border: 1px solid #121316;
                            }
                            Australia's Design Community

                            Comment


                            • #15
                              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; ?

                              Comment

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