XF 1.0 Style Properties II - A Closer Look

You've already seen how style properties provide a quick, easy, flexible and extensible way to control the appearance and behaviour of your styles.

In this video, you'll see them at work again, this time working directly on element appearance and styling. The demo touches on our use of the color palette (which is of course extensible in its own right) and shows some basic use of our CSS editor.

Enjoy!

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

As usual, this is a large, HD video. View it at full size using the expand gadget in the bottom right of the movie frame.
 
Click to expand...
EQnoble said:
I dunno I like it - reference-able information just to the side of each post. Why is it awful? Maybe I'm ignorant but it looks great to me and it's also a way to see member info without even scrolling or clicking away.
Click to expand...
The color doesn't help in the kitchen sink style, but the length of it, the clutter... well let's just say I would never ever use it like that. Besides most of the information showed doesn't have to be in the message, that's totally unnecessary. It's only a click away if needed.

dutchbb what is <dd> ( yes I'm being a noob right now )
Click to expand...
It's in the source code:

Code: 
		<div class="extraUserInfo">
					<dl class="pairsInline">
						<dt>Member Since:</dt>
						<dd>Jul 28, 2010</dd>
					</dl>
I'm not a fan of the line breaks so I would just let the text wrap naturally instead of breaking it with the <dd>.
 
first thanks ... :-)
This 'extrauserinfo' could be helpful if one had like the enhancement disabled style on though right? Like as in not having to navigate to another page entirely to get some quick info on a poster.
 
Currently you click on a persons names or avatar will give a popup info card then you can close it or just click on the page, card goes away and you never leave the page. That what your talking about EQnoble?
 
Steve M said:
Currently you click on a persons names or avatar will give a popup info card then you can close it or just click on the page, card goes away and you never leave the page. That what your talking about EQnoble?
Click to expand...
Yes but if a user has enhancement disabled style (one of this boards styles) animations including the overlay that displays the member card wont show, it will direct you to the profile page instead which would make the extrauserinfo underneath the avatar very useful.

Switch to the enhancement disabled at the bottom left of the page and then click on a avatar to see what I'm saying.
 
Then in that case I would use an if condition that would tell the page if they are using enhancement style to use member card otherwise use extra postbit info.
 
Well remember that is only a style here , there is no guarantee that style will be in the release (as far as I know). I agree with the conditional but only display if the member-card cannot be displayed and not tied to a specific style necessarily.
 
Yeah when I mention conditionals it would mean hard coded into the php files so it would use what is necessary for the member viewing the page.
 
dutchbb said:
I'm not a fan of the line breaks so I would just let the text wrap naturally instead of breaking it with the <dd>.
Click to expand...
You don't have to change the markup to have the each item (name + value) on one line. Just set the <dt> and <dd> elements to display inline.
 
Enigma said:
You don't have to change the markup to have the each item (name + value) on one line. Just set the <dt> and <dd> elements to display inline.
Click to expand...
True, but there's no need for markup that is not going to be used (not by me anyway). I understand why Kier did it though; some might like to apply a different styling to these two items.

BTW to show the difference of block vs inline:

user_info_block.webp
user_info_inline.webp

I have to admit though that allowing to change this through CSS is more flexible, so yes it's better to keep the <dd> tags there by default.
 
dutchbb said:
True, but there's no need for markup that is not going to be used (not by me anyway).
Click to expand...
The idea is that the elements you use—in this case a definition list—carry semantic value and imply certain meaning—a list of items and their values/defintions—to users, screen readers, and search engine spiders, and in the case of a missing stylesheet, render in a manner compatible with the content.
 
Enigma said:
The idea is that the elements you use—in this case a definition list—carry semantic value and imply certain meaning—a list of items and their values/defintions—to users, screen readers, and search engine spiders, and in the case of a missing stylesheet, render in a manner compatible with the content.
Click to expand...
You're absolutely right, I forgot about that one :oops:
 
I am not going to read this hole thread ;) but i have to ask

What if someone makes a holke layout from ground up and uses different css style names?
 
Top Bottom