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

Look how easy this is to style!

Discussion in 'XenForo Pre-Sales Questions' started by Erik, Jul 29, 2010.

  1. Erik

    Erik Well-Known Member

    Alright, so I don't have access to the AdminCP, but just digging through the source and using Firebug I can already tell this is going to be extremely easy to style, at least on a basic level.

    Hopefully I'm not killing your guys' big reveal on the styling features, but I found this and I just couldn't resist posting.

    All the colors are customizable with CSS!

    This is something I've been dreaming of for a while now and with modern CSS and the death of IE 6, it is finally possible. Yes, gradients, borders, the Home > Forum > General Discussions navbar, everything! You can change the entire look of the forum without changing a single image.

    For example, let's take a look at the code for the secondary navbar (the one that says 'Mark all forums read,' 'What's new?' etc with the gradient.

    Firebug shows:

    .navigationTabs .selected ul {
    background:url("styles/default/foro/gradients/tab-unselected-25px-light.png") repeat-x center top #65A5D1;
    See that? It's a transparent PNG that's colored by the hex value! :D So, if we want the navbar to be red?

    .navigationTabs .selected ul {
    background:url("...tab-unselected-25px-light.png") repeat-x center top #CC0000;

    Expand to everything else on the forum, and you get the idea.


    Again, I didn't manipulate these in Photoshop. All I did was change some CSS using Firebug.

    This also means that if you wanted to tweak the gradient style (say, if you wanted the secondary navbar gradient to be more gradual) all you would have to do is upload a new transparent gradient!

    Very, very nice guys. Really top notch! :D
    Jerry, Peggy and Hemanth like this.
  2. Cezz

    Cezz Well-Known Member

    Agreed, I think the whole colorsheme could probably be changed in a few lines of CSS and that is exciting...
  3. Ryan

    Ryan Well-Known Member

    Not too groundbreaking...vB4 and IPB 3.1 do very similar stuff

    Don't get me started on how poorly vB4's engine is architected though :confused:
  4. Erik

    Erik Well-Known Member

    Just realized that vB4 has this to some extent, but it's not implemented nearly as well as this is. Editing the style in the AdminCP will be extremely easy with this system. It would be trivial to use JavaScript to update the page live as changes are made, a la Firebug. :)

    Yeah, I just realized that. So not really as huge as I thought it was, but the fact that the whole navbar is styled with one CSS rule will make things extremely easy to edit. As you mentioned, the architecture is much better.
  5. Peggy

    Peggy Well-Known Member

    Just wait til you see it inside. Everything - the templates, css, etc, is laid out so neatly and clearly. Even I can understand it!
  6. Ryan

    Ryan Well-Known Member

    This is the important thing, and it's what I'm most interested in seeing regarding XF styling. It's what makes IPB's styling engine and what breaks vB4's styling engine.
  7. Lisa

    Lisa Well-Known Member

    Can't wait to have a go at styling, I gave up on vB's quite a while ago.
  8. Walter

    Walter Well-Known Member

    My designer will like to hear this after she nearly killed me when seeing the vb4 mess... :D
  9. Floris

    Floris Guest

    I don't think his point was to be appear groundbreaking, but functional and adaptable.

Share This Page