• 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!

Erik

Well-known member
#1
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:

Code:
.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?


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


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
 

Cezz

Well-known member
#2
Agreed, I think the whole colorsheme could probably be changed in a few lines of CSS and that is exciting...
 

Ryan

Well-known member
#3
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:
 

Erik

Well-known member
#4
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. :)

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

Peggy

Well-known member
#5
Just wait til you see it inside. Everything - the templates, css, etc, is laid out so neatly and clearly. Even I can understand it!
 

Ryan

Well-known member
#6
Just wait til you see it inside. Everything - the templates, css, etc, is laid out so neatly and clearly. Even I can understand it!
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.
 
F

Floris

Guest
#9
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:
I don't think his point was to be appear groundbreaking, but functional and adaptable.