Beta 2 Style Properties Feedback

[Crazyfruitbat]

I think there are two types of people on these boards. The ones that can already code in CSS and say 'we don't need the options' and there are the guys that don't know how to deal with code asking for 'as many as possible'.

I made my site (one in my sig) using stylesvars and I have no coding knowledge at all - and neither do I want to learn to be a coder too - I don't want to sit there and learn css. Yes, the stylevars wern't the best at in some ways BUT they did give people the options if they needed and could work it out providing they have the time to go through it.

So why not have a small dropdown menu with 'Simple, medium & advanced styling' - those who hate having the choice of everything can just not enter advanced mode and not see all the options - ignorance is bless. But those who want the control of tiny elements it's there for them in advanced.

I think my main bugbear with the xenforo system is the way it's describing its properties. I feel that it's coders terminology instead of something that could be described more simply. HTML should just be background etc. I found it but its misleading.

There is a main property for Headers & Navigation. Though the only part of the navigation is the font on the nav bar - why isn't the background to the navbar not grouped together in there? Instead it is in another section altogether.

 

[JVCode]

Crazyfruitbat - I love how you've created the background on your gaming forum, very nicely done indeed.

 

[Carlos]

Crazyfruitbat - I love how you've created the background on your gaming forum, very nicely done indeed.

Now you've gotten me interested. Let me see here.....

EDIT: Oh, its the same vb4 instance, I thought you were talking about his xenforo instance. But yes, the background art is gorgeous.

Its as if, your message board is right on the desk of a gamer. Clever.

 

[JVCode]

Now you've gotten me interested. Let me see here.....

EDIT: Oh, its the same vb4 instance, I thought you were talking about his xenforo instance. But yes, the background art is gorgeous.

Its as if, your message board is right on the desk of a gamer. Clever.

Yeah, can I have the link for his xenForo instance?

 

[Carlos]

Yeah, can I have the link for his xenForo instance?

I don't think its up yet. Nor do I know where it is.

 

[Andrew]

Ashley, Kier, and Mike,

My name is Andrew Brown and I have been doing webdesign on and off for the past 5 years. I've skinned vbulletin, phpbb, wp, ipb, and many other online software titles. Please forgive me, I am in no way bragging, I just want my experience level to be understood.

STYLE PROPERTIES by Andrew Brown

Index:
1. Figure out the users experience level
2. Spread the love
3. Easy as an Avatar
4. Conclustion

---------------------------

1. Figure out the Users Experience level

Once upon a time, we all read a guide, somewhere on the internet, on how to upload your files to your website. And also how to install XenForo and other software to make our websites. Sure figuring out all of it the first time was a pain. But it was not too bad after a few attempts right?

Well, this is a metric you may want to save on the admin account! When an administrator clicks on "Template's" or "Style Properties" on the Style's page for the first time, have a pop up window open and ask the users experience level. From here give the user the ability to select from a group of options like in the list below.

1. Beginner​

A. Only show the "Color Palette" and the "Options" page in the drop down list.​

B. Include logo chaining options.​

2. Comfortable​

A. This administrator can see all options but no "custom" css boxes open.​

3. Experienced​

A. Give's the user more controll over all style options.​

4. Web Master​

A. Shows all "Style Properties."​

​

Now of coarse you give the administrator the ability to change his "Experience Level" as she chooses. This idea might also be very handy in other areas of the Administrator panel and possibly even registerd user options.

The admin panel could keep track of how much and how often you customer edits options in his or her forum. After "so much editing" ask the user if they feel they would like to upgrade to the next admin experience level, providing more options to the customer. This might make your customer feel as if the software is learning more about its admin. And in a way, it would be.

Doing this will give your software the ability to find out the Administrators experience level, give him the options he "Needs the Most" and serve him those options faster. WHILE, improving your overall usability, a 'relationship' with the customer, and ease of access and editing. Perfect for the noob in us

Would you prefer to see a much broader set controlling a more macro level of detail? YES
Give the web masters and web designers the ability for complete control and customization. I have already made a style for XF and I felt as the "Color Palette" was lined to "to much" stuff. I felt as if I was controlling Way to many style elements with just a few clicks. However I know that the increased number of styling options will only confuse people who aren't as experienced. Showing the user targeted content based on their experience level is the best way to truly get your customers what they want based on their skill set.

​

2. Share The Love
Style Properties is GREAT!! It is a great idea and it will provide your customers with the ability to customize their forums as they please. However I feel that I may have a small improvement that might make a Big impact on the styling process.

Lets say your customer is editing the colors and fonts on the "Section" page of the Style Properties. Now that this customer has made his changes he wants to go straight to editing his template and css files. Well wouldn't it be easy breezy if he could just click on a link that will take him right to the syntax of the stuff he was editing?

For example, on the "Header and Navigation" property group, you could link to the Navigation template and css files. A perfect spot to do this would be at the bottom in the "help/info" block.

This would also be useful if this same concept was don in the "Template" section of the style pages just vise versa.

3. Easy as an Avatar
Most everyone has uploaded an avatar at their favorite forum or uploaded a picture to a social network site like Facebook. Right?

Well wouldn't be Way easier if we applied the same technology to uploading our avatars and applying it to uploading our logos! No more whipping out your FTP logging in, uploading a new file, checking to see if it worked, oops no it didn't for got to rename the file, etc etc. If you can let the customer "upload" their logo, just like an avatar, wouldn't that make it easier on all of us on chaining our logo. Maybe, possibly, even save past logos in a folder just encase the customer was to revert back to an old one. This would especially be useful for website owners that change their logo's with the seasons (i.e. Christmas, Halloween, New Years...).

Yes this would also mean that the uploader would have to keep the size dimensons of the new logo and if a logo "seems" to big to prompt the user that it "might" not be a good idea to upload said logo.

This idea could also be applied to "Beginners" (see 1. Figure out the users experience level) for uploading images for the forum background, forum status icons, or other areas where images may be changed often.

4. Conclusion

While XenForo is a young product with a lot of real talent behind it, don't make a "one size fits all" solution because like a pair of jeans, one size does not fit all. Give your customers what they need based on their expertise. If they are beginners then give them the easy tools to get the basic stuff customized. However if your customer is a professional web master, don't stop them from having full control of the entire layout and options on the site.

1. Rate the customers expertise​

2. Present them what they need the Most based on their expertise​

3. Give complete flexability to professionals​

4. Succeed as a company as word gets around how easy and flexible your product is.​

 

[yoghurtfarmer]

Could somebody confirm this for me? I've done some testing but would like to be sure.

Say I have the following Style Property:

@property "subHeading";
font-size: 11px;
color: @textCtrlBackground;
background-color: rgb(79, 79, 79);
padding: 5px 10px;
margin: 3px auto 0;
@property "/subHeading";

If I change "color" to #000000 through AdminCP, when I look at the template would it say color: #000000;?

Conversely, if I changed color directly in the CSS template, and then viewed the Style Property through AdminCP, would it say #000000 under the color field?

Basically my question is, are changes made directly in the template and changes made through AdminCP equivalent?

 

[Kier]

Could somebody confirm this for me? I've done some testing but would like to be sure.

Say I have the following Style Property:

@property "subHeading";
font-size: 11px;
color: @textCtrlBackground;
background-color: rgb(79, 79, 79);
padding: 5px 10px;
margin: 3px auto 0;
@property "/subHeading";

If I change "color" to #000000 through AdminCP, when I look at the template would it say color: #000000;?

Conversely, if I changed color directly in the CSS template, and then viewed the Style Property through AdminCP, would it say #000000 under the color field?

Basically my question is, are changes made directly in the template and changes made through AdminCP equivalent?

YES. Welcome to magic land

 

[Rene]

For me there is still one essential CSS feature missing: opacity. Most browsers support this feature already.

Maybe a splitted system would do the job: a basic style sheet system for the not so experienced designers and an expert modus for the hardcore CSS d00dz, so that they can take advantage of the possibilities XF has to offer.

Besides this: One huge disadvantage of XF is its html structure with its div-proxy. This way it makes it tough to design background images that go with the flow. If I had one wish I would take it for a more static oriented approach towards the html structure instead of proxy tricks.

 

[Rene]

When I look at this image:

The picture itself reminds me of Dreamweaver's style property menu.

 

[Jeremy P]

I like the Style Properties, but sometimes I need to edit values beyond what is allowed, or I want to change the color of one element without 10 more inheriting those changes, so I like the idea of more of them. At the same time, I don't want to be drowning in style properties when I want to make a few simple changes. It will be difficult to balance but I'm sure you guys will manage.

YES. Welcome to magic land

I really hadn't noticed that. Neat.
One complaint I had about the styling system is jumping through hoops to change colors. It might be nice for those who need to make simple changes, or use a generated color scheme, or aren't comfortable with CSS.. but I prefer to edit it directly.

I realized I could edit the CSS templates but didn't want to bother (especially when dealing with the first public betas) in case changes were made that required me to rework changes each upgrade. It sounds like this "magic" will facilitate that.

 

[Booth]

From a relative layman's perpective, I don't appear to have lost any of my edits so I'm pleased with the smooth update

 

[Peggy]

Not a bad idea Khurt though I'm not sure how that could be implemented. I'd settle for a nice map of each of the different pages of the site that shows me what properties/css files control those elements.

... I just wish it was a bit easier to find what bits go with what sometimes.

I so agree with this.

 

[anotheralias]

I'm going to think this over for a while, while playing with it this week...

For now, generally speaking, my opinion is to keep a balance and try to aim for something that offers enough functionality, but does not look too overwhelming and complex to new admins.

Small details should probably be left out where possible...

I don't believe I'm actually disagreeing with you for once, but... I disagree. New admins don't have to bother with Style Properties - they can just use the color palette tool. Just make that clear to them - that's all that's needed there, let them know they can ignore Properties if they want to. And anyway, it can't possibly be all that complicated if I get it. I probably have the most feeble grasp of CSS of anyone in this entire forum. (Or any forum - just pick one at random!)

I absolutely love the fine-tuning I can do with Style Properties. It is FANTASTIC. Please don't take them away!
----
Adding -- for those who can't figure out what bits go with what bits, just put #ff0000 on the mystery bit, and see where it shows up. You can't miss bright red on something.

 

[dutchbb]

I don't believe I'm actually disagreeing with you for once, but... I disagree. New admins don't have to bother with Style Properties - they can just use the color palette tool. Just make that clear to them - that's all that's needed there, let them know they can ignore Properties if they want to. And anyway, it can't possibly be all that complicated if I get it. I probably have the most feeble grasp of CSS of anyone in this entire forum. (Or any forum - just pick one at random!)

I absolutely love the fine-tuning I can do with Style Properties. It is FANTASTIC. Please don't take them away!
----
Adding -- for those who can't figure out what bits go with what bits, just put #ff0000 on the mystery bit, and see where it shows up. You can't miss bright red on something.

There's a first time for everything

First off, you are right: the color palette tool is great for basic/general color changes. But it has its obvious limitations. Novice admins (with low budgets to spend on design) can have desires in terms of styling which the color palette can not always fullfil. So all I was saying was: let's try to keep the properties on a level that is useful and clear for the majority of XF customers. And I'm not saying that it isn't ATM, but if you're going to add a property for every little thing, it's going to start looking very overwhelming to novice admins. That's why it's not a bad idea to focus on the properties that are most likely to be changed, and maybe leave out the ones that are not. I'm sure K&M are aware of this, otherwise they wouldn't have posted this feedback thread.

Please understand that I'm not bringing this up in my own interest, because I know CSS. And I prefer to use .css files/templates anyway. But if the plan is to sell software to a certain (I assume preferably a large) group, you need to consider who you are selling to and what they expect/want.

To continue on my initial post: I've been playing a bit with the style properties, and my opinion is that they are done quite nicely and shouldn't be too difficult to learn and work with. But on the other hand, I can also see problems arise, because the terminology that describes the property isn't always very self-explanatory. Descriptions sometimes are not helping enough either. This is important: because style properties are made for easy editing by everyone, so it makes absolute sense to make them as clear and useful as possible. I indicated in my first reply that the number of properties probably shouldn't be too high, but this isn't necessarily the most important aspect. Making them as usable as possible to work with is.

So for me it particularly comes down to usability, and although your tip (one that I use myself sometimes btw) about adding the #f00 is actually a good one, it's not exactly making the properties as useful as they could be, is it? For me one of the key goals of style properties should be to very clearly and quickly explain themselves. And I'll come to my conclusion and suggestion here: don't try to explain with words, visualize it. Include images for quick reference and you'll save yourself and your customers a lot of time and headache

 

[anotheralias]

So for me it particularly comes down to usability, and although your tip (one that I use myself sometimes btw) about adding the #f00 is actually a good one, it's not exactly making the properties as useful as they could be, is it? For me one of the key goals of style properties should be to very clearly and quickly explain themselves. And I'll come to my conclusion and suggestion here: don't try to explain with words, visualize it. Include images for quick reference and you'll save yourself and your customers a lot of time and headache

I'm fine with changing the terminology, just don't take away the Style Properties and make me have to hunt through the CSS templates to change the color of something. I'd much rather slap a bright red into the mystery element box and see where it shows up, than have to scour a dozen CSS templates for a certain color and change it there. It's the difference between "fairly easy" and "where's the aspirin."

 

[lightbox]

I'm fine with fine grain control.
What bugs me most is that text (and text link) colors utilize "primaryFOO" and "secondaryFOO" colors in some cases like the forum and node links. There are quite a few text color definitions available in the "Color Palette" style properties. Please don't mix background color and text color usage of these properties.

Cheers,
Martin

 

[anotheralias]

I totally agree there - that made no sense at all. I'd think something like that would drive a new admin crazy a lot faster than the style property controls.

 

[lightbox]

Also I noticed, that form buttons seem to still have hard-coded colors and don't make use of the Style Properties system.
Would be nice to see this implemented either in the Property Group "Forms" or even better as a new set of button types in the Property Group "Buttons".

Cheers,
Martin

 

[CyberAP]

Also I noticed, that form buttons seem to still have hard-coded colors and don't make use of the Style Properties system.
Would be nice to see this implemented either in the Property Group "Forms" or even better as a new set of button types in the Property Group "Buttons".

Cheers,
Martin

There are lots of things that are hardcoded. Maybe next release will be more flexible.