1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Style Classic vBulletin 3 skin --- development log

Discussion in 'Resource and Add-on Discussions' started by Adam Howard, Nov 10, 2012.

  1. Adam Howard

    Adam Howard Well-Known Member

    I figure it would be worth logging my development step by step as I generate a skin.

    The skin will be based inspired by my skin on vBulletin.org ( http://www.vbulletin.org/forum/showthread.php?t=275621 ) which was released on December 18, 2011. But may take on a different direction in the end.

    As a starter base, I'll be starting out with Naked XenForo ( http://xenforo.com/community/resources/naked-xenforo.1216/ ) which is a stripped down version of XenForo's Default skin.

    Every tweak and edit will be done here for everyone to see and the code will be non-exclusive open source so anyone (and everyone) is free to take snips of code for them self as I progress the development. (y)

    Advise: You may not want to subscribe to this thread as things will update fairly quickly and close together.

    I'm also still being moderated and so don't be all to surprised if suddenly a dozen or more replies sudden come out of thin air.
     
    Jarod likes this.
  2. Adam Howard

    Adam Howard Well-Known Member

    Coloring for node titles and category titles

    PHP:
    .nodeList .categoryStrip {
    colorwhite !important;
    background-color#757E9D !important;
    border-top1px solid rgb(000) !important;
    border-bottom1px solid rgb(000) !important;
    border-bottom-colorrgb(000) !important;
    }

    .
    nodeList .categoryStrip .nodeTitle a {
    colorwhite !important;
    }
     
  3. Adam Howard

    Adam Howard Well-Known Member

    Coloring for node list

    PHP:
    .node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
    background#D9DAE6 !important;
    }
     
  4. Adam Howard

    Adam Howard Well-Known Member

    Last post box on node (forum) list color

    PHP:
    .node .nodeLastPost {
    background#D9DAE6 !important;
    }
     
  5. Adam Howard

    Adam Howard Well-Known Member

    Link node (forum) colors

    PHP:
    .nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
    background-color#D9DAE6 !important;
    border-bottom1px solid black !important;
    }
     
  6. Adam Howard

    Adam Howard Well-Known Member

    While this is technically called "section main" .... I've always called this the "inside body" (There is another simply non-tech English term for it, but it escaped me at the moment)

    This is the coloring for it

    PHP:
    .sectionMain {
    background-color#757E9D !important;
    }
    ^ I hate this "global". And I call it a global setting because this also changes the help page. :mad:
     
  7. Adam Howard

    Adam Howard Well-Known Member

    This is basically just (only) the discussion list colors (think thread list colors)

    PHP:
    .discussionListItem {
    background#D9DAE6 !important;
    }
    I'm breaking it down a little for those who may want to change things and get creative.
     
  8. Adam Howard

    Adam Howard Well-Known Member

    For a nice clean divided look we're adding this

    PHP:
    border-bottom1px solid black !important;
    So the end results is thus :)


    PHP:
    .discussionListItem {
    background#D9DAE6 !important;
    border-bottom1px solid black !important;
    }
     
  9. Adam Howard

    Adam Howard Well-Known Member

    This changes the body color or as I call it the outside body when you have dividing "frames" that give you inside bodies.

    PHP:
    body {
    background-color#576288 !important;
    }

    This is where XenForo and I like to kick and scream at one another. It really should not be so global as it is, but I've come to find (from my past experience) that this changes a few small details here and there in the past (I often forget where).

    But if memory services me correct, this is also the only way to get the desired result. So in the end I may have to track down 1 or 2 small items to correct later.

    It's good it you use this to put this on top (I like to find it quickly).
     
  10. Adam Howard

    Adam Howard Well-Known Member

    Officially the page content, but I like to think of it as mid-way.

    PHP:
    #content .pageContent {
    background-color#576288; !important
    }
    You can get creative and change this to something else, but for simplicity and to keep with the vBulletin inspired look; for now I'll keep it "as is". vBulletin didn't have so many page bodies (I know there is another tech term, but I forget it all the time. I make for a poor teacher in the I know how to do and can show, but don't ask what you call it. LoL)
     
  11. Adam Howard

    Adam Howard Well-Known Member

    As explained earlier; I'm breaking this up a little so other can learn some. Although I admit I jump around sometimes.

    This takes care of the background color for the avatar on your discussion (thread) list. It also takes care of that little box that shows how many replies and such.
    PHP:
    .discussionListItem .posterAvatar, .discussionListItem .stats {
    background-color#D9DAE6 !important;
    }
     
  12. Adam Howard

    Adam Howard Well-Known Member

    Message content color

    Basically this will be the background color for the very text your are reading now (this very moment).

    PHP:
    .message .messageContent {
    background-color#D9DAE6;
    }
     
  13. Adam Howard

    Adam Howard Well-Known Member

    Title bar color

    Basically those larger than life titles you see above every thread or on your home page, the title of your site.

    PHP:
    .titleBar h1 {
    colorwhite !important;
    }
     
  14. Adam Howard

    Adam Howard Well-Known Member

    Notice back ground color
    PHP:
    .PanelScroller .panel .noticeContent, .PanelScrollerOff .panel .noticeContent {
    background-color#FFEB90 !important;
    }
    The border around it
    PHP:
    .PanelScroller .scrollContainer, .PanelScrollerOff .panel {
    background-colorrgb(000) !important;
    }
     
  15. Adam Howard

    Adam Howard Well-Known Member

    Again, I do jump around. LoL :p

    This is the color for the signature background

    PHP:
    .message .signature {
    background-color#C0C5D6 !important;
    }
    The message info is where all those little tools such as reply, quote, edit, ip, ect....ect...

    PHP:
    .message .messageInfo {
    background-color#C0C5D6 !important;
    }
     
  16. James

    James Well-Known Member

    Did you consider the style properties system, or was it easier to just create the CSS manually?
     
    Adam Howard likes this.
  17. Adam Howard

    Adam Howard Well-Known Member

    section header for thread list headers or discussion list header, whichever you prefer to call them (I simply say threads)

    PHP:
    .discussionList .sectionHeaders {
    colorwhite !important;
    background-color#767f9e !important;
    border-top0px !important;
    border-bottom0px !important;
    }

    .
    discussionList .sectionHeaders a {
    colorwhite !important;
    background-color#767f9e !important;
    }
     
  18. Adam Howard

    Adam Howard Well-Known Member

    In the past, yes. But not everything is covered in the style properties. There are just somethings that XenForo does not have properties for.

    Style properties for XenForo is much like vBulletin in that X says 1 thing, but often does another or does 5 other things; when you just wanted that 1 thing.

    I wish the style properties were more clear on what they did, there was more of them, and less global properties (x should not do 5 or more thing).

    All these edits are only in extra.css though. So technically no actual template edit as really been made.

    Although I do find that the properties are good to cleaning up all the small borders.... Which I'll most likely do at the end and will note here which ones.
     
    James likes this.
  19. Adam Howard

    Adam Howard Well-Known Member

    All the user details below the avatar (back ground colors) on the thread display

    PHP:
    .messageUserBlock h3.userText {
    background-color#BCC1D3 !important;
    }
     
  20. Adam Howard

    Adam Howard Well-Known Member

    The background color for the avatar on the thread display

    PHP:
    .messageUserBlock div.avatarHolder {
    background-color#D9DAE6 !important
    }
     

Share This Page