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...
ChrisR said:
What if someone makes a holke layout from ground up and uses different css style names?
Click to expand...
I think the whole point of the thought that has gone into creating the current style is so you can create a *completely* different style by changing the CSS only and not changing any of the markup, a la CSS Zen Garden.
 
Mhhh, i like the style system of XF. Is nice to see, what we all can change in the style. Other softwares only give "global" options for this.
 
dutchbb thank you for pulling me back to this thread.

Someone ... I don't know some of the terms used:

What is "markup"?

What are dt and dd - as in

<dt>Member Since:</dt>
<dd>Jul 28, 2010</dd>

I mean both those are just putting stuff between these brackets.
Is it taking the content between the brackets from a language file as in "Member Since" - but then the birthdate is individual data from the profile. I don't get it.
 
Shanj said:
dutchbb thank you for pulling me back to this thread.

Someone ... I don't know some of the terms used:

What is "markup"?

What are dt and dd - as in

<dt>Member Since:</dt>
<dd>Jul 28, 2010</dd>

I mean both those are just putting stuff between these brackets.
Is it taking the content between the brackets from a language file as in "Member Since" - but then the birthdate is individual data from the profile. I don't get it.
Click to expand...

Mark-up is a term used to describe how the code is written, <dd> and <dt> are definition lists, so each item has a tag and a data value, this is much better for search engines to understand that each value and its tag, so that user is a Member Since: July 28, 2010.
 
Ceri May said:
Mark-up is a term used to describe how the code is written, <dd> and <dt> are delimited lists, so each item has a tag and a data value, this is much better for search engines to understand that each value and its tag, so that user is a Member Since: July 28, 2010.
Click to expand...

Um sorry "how the code is written" doesn't get my brain anywhere comfy - wildly thinking markup = Kier barefoot + cat, or maybe markup is a section of the admincp, or perhaps a certain code language?

<dd> and <dt> are delimited lists - now I don't know what delimited lists are sorry.
I understand that they are bracketing data and dd gets it from a lang file and dt gets it from a specific line of the profile.
Is dd the name of that item in the lang file? Is dt the name for the DOB info in the profile?
 
<dl> is an HTML tag used to create a definition list. It's a list of name/value pairs in which a term is denoted with a <dt> (definition term) and then described with a <dd> (definition description).

Originally, it was intended to be used in this sort of fashion:
HTML: 
<dl>
	<dt>Cat</dt>
		<dd>Four-legged carnivorous mammal</dd>
	<dt>Cow</dt>
		<dd>Four legged rumimant mammal</dd>
</dl>
But these days it's used for any occasion where names and values are listed.
HTML: 
<dl>
	<dt>Post count</dt>
		<dd>1,024</dd>
	<dt>Birthday</dt>
		<dd>November 6th 1991</dd>
	<dt>Favourite Colour</dt>
		<dd>Sky blue pink with yellow spots</dd>
</dl>
 
Shanj said:
Um sorry "how the code is written" doesn't get my brain anywhere comfy - wildly thinking markup = Kier barefoot + cat, or maybe markup is a section of the admincp, or perhaps a certain code language?

<dd> and <dt> are delimited lists - now I don't know what delimited lists are sorry.
I understand that they are bracketing data and dd gets it from a lang file and dt gets it from a specific line of the profile.
Is dd the name of that item in the lang file? Is dt the name for the DOB info in the profile?
Click to expand...

No Markup is just a general term for the way that code is writen, any programing code be it php markup or HTML Markup... though it is more commonly used for HTML and XML as they are Markup Languages.

HTML = Hyper Text Markup Language

<dd> is just part of the HTML markup, it tells the browser that the data inside that tag is the label for the data inside the <dt> tags... The actual phrase that is used EG "Member Since" will be pulled from phrases DB for that language.
 
Thank you Kier and Ceri.

This is a great strength of this community. Here and there are a few sneers and snob comments trying to make out that if you're not an up to date coder or programmer you shouldn't be an admin. But there is mainly a great breadth and variation oif skill.

I'm only a very basic coder (medium html, only a tweaker under instruction otherwise) but I'm expert on communities. Having an ethos (set of attitudes) that includes respect and care for great variation of skills is a mighty strength.

The care is important. Respect can mean just not being rude to someone with naive or basic questions. Taking the trouble to answer clearly, simply and informatively is the care part which takes real effort. IN time it builds loyal supporters as well as users with better skills.

That is dragon.
 
Mike said:
For that style property, yes. (ie, these will be additional CSS rules that will go into the CSS selector that uses the property)
Click to expand...
Thanks for this.

It seems that we can't see the selector (i.e. ".extrauserinfo") name  that we are editing?
 
Kier said:
<dl> is an HTML tag used to create a definition list. It's a list of name/value pairs in which a term is denoted with a <dt> (definition term) and then described with a <dd> (definition description).

Originally, it was intended to be used in this sort of fashion:
HTML: 
<dl>
	<dt>Cat</dt>
		<dd>Four-legged carnivorous mammal</dd>
	<dt>Cow</dt>
		<dd>Four legged rumimant mammal</dd>
</dl>
But these days it's used for any occasion where names and values are listed.
HTML: 
<dl>
	<dt>Post count</dt>
		<dd>1,024</dd>
	<dt>Birthday</dt>
		<dd>November 6th 1991</dd>
	<dt>Favourite Colour</dt>
		<dd>Sky blue pink with yellow spots</dd>
</dl>
Click to expand...
Damnit Kier... get back to your basement!
We dont need you explaining basic HTML to people, we need you down there banging out code for XF!
 
I can't wait to see this admincp. I tried to make styles for my users with the old forum stuff but it was so headbanging and it kept throwing up all kinds of problems. All I wanted was different colourways so this kit looks great for that.
I had to lock eveyone into default theme in the end.

Oh also I had to make so many template edits and it was awfully tedious to keep doing them everwywhere. I hope I can make template edits universal here and just create different colour designs.
 
Ruven said:
Damnit Kier... get back to your basement!
We dont need you explaining basic HTML to people, we need you down there banging out code for XF!
Click to expand...
I'm sure if Kier decides to browse around in this thread, that means he is taking a break from coding intentionally. I also think it's not up to members to tell him what to do. These guys do not need the stress of others telling them how and when to work, that was exactly what went wrong in the IB team.
 
Top Bottom