vB 3.x - Fluid & Fixed 1.4.4

[Booth]

Nice. Would be great if it worked as a responsive skin too.

Would love it if the reply and like buttons could be replicated, and we had a fixed option too

 

[Slavik]

Impressive

 

[dutchbb]

There is a problem in the Skin when using text from right to left
http://www6.0zz0.com/2013/08/02/14/844052937.jpg
Note that there is a vacuum between the section title and Avatar

Sorry, I did not test this, I would have to look into it to support it. Currently no support though. Anyone is free to post the necessary changes in this thread.

This is great, thank you so much!
It's not, that I would like to copy my vB 1:1 to XenForo. But the basic style of XenForo is somehow too soft and tiny and my users are used to vB since 13 years. Additionally vB3 is almost modern again with its somehow flat design , so I intended to try soon by myself, what you did already: start a flat design, with less round corners and somehow similar to vB3 as a basis, and that only in EXTRA.css to avoid conflicts. I did not install yet, just saw the screenshots: Will your CSS somehow effect the responsive design or other XenForo functionallity, related to CSS?

What I would try is to modify the postbit legacy template to fit the online status add-on, accept the user group ribbons and add some info, as number of messages, received likes, location and maybe few custom fields.

You made my day, thank you a lot!

I did not test support for responsive design, will have to see how that works.

I'm impressed you did this through CSS alone.

Thanks. It wasn't always easy, but XF allows for much flexibility.

Rumor has it that it breaks the responsive design (I haven't checked).

The real problem I have with it is that this is a "SS file", not a CSS. The concept of the 'cascade' is completely lost in this. The over-use of !important is ridiculous. The attempt to keep it in 1 file is both the goal and it's hindrance.

I think the concept is neat, and as a proof of concept, it's successful. But I would caution anyone from actually using this on a production site.

Well as you know you need to use !important in extra.css to make it work there. It has advantages and disadvantages. It's easy to maintain after upgrades, since there are no template changes. It's somewhat slower but not really noticeable.

There is actually a lot of cascading happening, as it only uses the styling that is absolutely necessary for this style, most of the CSS still comes from the default style. Probably 80 or 90%. All of that CSS is of course just the same as having the default style running.

I see no big reason why it can't be used on a production site. Many live XF sites have most of their CSS in extra.css because it makes it easier for admins. I agree that it can feel like 'hacking' to use that much of !important, but other than that, there isn't much to worry about AFAICS.

I'll see what the problem is with the responsive design, this feature was actually created after I finished the style.

Did you do this through xenforo.com/community in inspect element for the screenshots?

I simply used the Safari User CSS add-on to view the style on XF community. Copy / paste extra.css, anyone can do it in seconds.

Thanks for the comments so far.

PS: I added beta to the version string since responsive design is indeed not working properly. I will try to find a solution for that.

 

[TeflonDon]

Very nice, looking forward to a responsive version.

Also when you're not using pop-ups for subforums it looks a little off. That's also a 1.2 feature so it probably wasn't addressed in this version.

 

[dutchbb]

dutchbb updated vB 3.x - Fluid with a new update entry:

1.0 beta 2 - Responsive Design working & bugs fixed

* Added support for Responsive Design.
* Fixed some bugs.

Read the rest of this update entry...

 

[Qaseem]

dutchbb updated vB 3.x - Fluid with a new update entry:

1.0 beta 2 - Responsive Design working & bugs fixed



Read the rest of this update entry...

Thank you very much
Previous problem has been solved

I have a small question
How do I change the font size of posts in the threads?
Because the font size shows a very, very small

 

[dutchbb]

Thank you very much
Previous problem has been solved

I have a small question
How do I change the font size of posts in the threads?
Because the font size shows a very, very small

Open template EXTRA.css

Ctrl/cmd + f

.messageText {font-family:verdana, sans-serif !important; font-size:10pt !important}

and change to 11 or 12pt

It should already show the normal vb font size though.

 

[Alpha1]

This could make the transition to XF much easier.
Are there any big boards already using this style?

What I am missing is forum status images.

 

[Deepmartini]

Does this look the same and work across all browsers?

 

[dutchbb]

dutchbb updated vB 3.x - Fluid with a new update entry:

Bugs fixed

Bug related to sub-forums layout fixed.

Added some styling including for warning notices.

Read the rest of this update entry...

 

[dutchbb]

dutchbb updated vB 3.x - Fluid with a new update entry:

Message / postbit buttons added

Message / postbit buttons now added.

To keep the hyperlinks (remove the message / postbit buttons) you can remove the following part from EXTRA.css:

/* -------------------------- */
/* vB 3.x thread buttons */

.messageMeta a.report, .messageMeta a.like, .messageMeta a.unlike, .messageMeta a.reply, .messageMeta a.edit, .messageMeta a.history, .messageMeta a.delete, .messageMeta a.ip, .messageMeta a.viewWarning, .messageMeta a.warn {background:#4b6ca6...

Read the rest of this update entry...

 

[Deepmartini]

Anyone running this on their site? Would be interesting to see a live demo.

 

[Gene Steinberg]

Neat. Running into a problem. When I try to style the Header with the same background as the rest of the forum (also entered under General/HTML), RGB 168, 213, 255, it shows OK until you login, and then the header displays the default background. What property did I miss?

 

[n0mDePlume]

I love the idea. However, when I select a post for moderator actions it doesn't turn yellow.

 

[dutchbb]

Anyone running this on their site? Would be interesting to see a live demo.

http://forum.offtopic.nl you can't register as the site is not open yet. This means you won't see the message buttons etc.

Neat. Running into a problem. When I try to style the Header with the same background as the rest of the forum (also entered under General/HTML), RGB 168, 213, 255, it shows OK until you login, and then the header displays the default background. What property did I miss?

Not sure what you're trying to do as the header is under Style Properties: Header and Navigation/Header however this also needs to be set in EXTRA.css , search for #header

I love the idea. However, when I select a post for moderator actions it doesn't turn yellow.

Thanks, this bug will be fixed in the next version.

 

[Gene Steinberg]

OK, I see where the header background is defined in EXTRA.css. That was the magic bullet.

Here's a problem I've raised with the XF people, and it applies to your style and the others I'm using on my forums. We have a fixed header size defined to accommodate the logo and a 468x60 banner ad. Using Responsive Design, when viewed on a mobile browser, the header overlaps the Notice text. I presume this needs to be done as a percentage, so if someone can help me revise the headers accordingly, please let me know.

 

[Gene Steinberg]

One more thing. Although the Style and .css properties show a size of 11-point in the Notices at www.technightowl.com/forum, when I use a variation of your theme (with minor mods for background color and such), it doesn't seem to "take." Is there some other place that this is being set in your style?

 

[dutchbb]

dutchbb updated vB 3.x - Fluid with a new update entry:

Message & discussion selection bug fixed & more styling added

This update includes a bug fix for message & discussion inline moderation selection (messages and discussions now turn yellow when selected). Also added more styling including for the preview tooltip.

Next release will probably be stable unless some major bug is found.

Read the rest of this update entry...

 

[dutchbb]

One more thing. Although the Style and .css properties show a size of 11-point in the Notices at www.technightowl.com/forum, when I use a variation of your theme (with minor mods for background color and such), it doesn't seem to "take." Is there some other place that this is being set in your style?

If you look for /* Notices */ in EXTRA.css you should be able to change it from 12pt to 11pt. Almost everything is set in that one template, and categorized.

 

[Gene Steinberg]

Now in an update — which I haven't done. Do you just reimport and replace? What about the changes already made to the existing version?