New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
OS X - Development and Darwin Discussion and questions about development for Mac OS X.

CSS in Dashcode Widget


Post Reply New Thread Subscribe

 
Thread Tools
shusseina

 
Member Since: Dec 03, 2008
Posts: 5
shusseina is on a distinguished road

shusseina is offline
Hi there

I have been looking at the CSS code (SafariStyle.css) behind Apple's RSS Template widget in Dashcode (1.0).

Was hoping someone could explain what '.content' and '.content > div' refer to below:

.content {
font: normal 11px Helvetica, sans-serif;
color: #333333;
line-height: 130%;
overflow: hidden;
display: -khtml-box;
-khtml-box-orient: vertical;
-apple-line-clamp: 100%;
}

.content > div {
overflow: hidden;
position: relative;
}
QUOTE Thanks
mystic_fm

 
Member Since: Mar 15, 2007
Posts: 161
mystic_fm will become famous soon enough
Mac Specs: 17" MacBook Pro, 2.33GHz C2D, 2GB RAM

mystic_fm is offline
".content" is a general CSS style class than can be applied to any type of element.

".content > div" is a selector that indicates the style is only applied to a "div" element that is a child of an element that has had the ".content" style class applied to it.
QUOTE Thanks
shusseina

 
Member Since: Dec 03, 2008
Posts: 5
shusseina is on a distinguished road

shusseina is offline
Excellent, thanks!

Below are some more variations I was hoping you could also explain.

.content .subject {
border-bottom: 2px solid transparent;
-khtml-box-flex: 60;
}

.content a.articlehead[href] > .subject:hover {
/* a.articlehead has no href if there's no permalink */
border-bottom: 2px solid #888;
}

.author, .date {
color: rgb(177,177,177);
font-size: 85%;
letter-spacing: 0.07em;
}
QUOTE Thanks
mystic_fm

 
Member Since: Mar 15, 2007
Posts: 161
mystic_fm will become famous soon enough
Mac Specs: 17" MacBook Pro, 2.33GHz C2D, 2GB RAM

mystic_fm is offline
".content .subject" - a descendant selector. It specifies that the style is applied to any element of class "subject" that is a descendant (child, grandchild, etc.) of any element of class "content".

".content a.articlehead[href] > .subject:hover" - wow, this is a fun one! The border-bottom style defined here is to be applied only when the cursor is hovering over any element of class "subject" that is a child directly underneath an "a" element of class "articlehead" that also must include an "href" attribute, and which itself is a descendant of an element of class "content". Whew! I don't know who wrote that, but they have a mean streak. At least they included a potentially helpful comment.

".author, .date" - the comma indicates there are two entirely distinct selectors being defined here, so any element with a class of either "author" or "date" would use the specified style info.

If you're going to be dealing with a lot of this stuff, you probably should get a book on CSS - the O'Reilly book "CSS: The Definitive Guide" is quite good I suspect, as I have its predecessor by the same author. Or at least you may want to check out some of the CSS resources listed at Learning CSS.
QUOTE Thanks
shusseina

 
Member Since: Dec 03, 2008
Posts: 5
shusseina is on a distinguished road

shusseina is offline
Thanks, that's great! Clearly you know your stuff.

I probably don't need such 'sophisticated' CSS code in my widget, but understanding how the templates, supplied with Apple's Dashcode, work helps.

I did check out the W3 Schools website, to quickly get up to speed with JavaScript and CSS, but it didn't help with most of the examples in this thread.

Thanks again.
QUOTE Thanks

Post Reply New Thread Subscribe


« GCC_Select: command not found? | C Language Tutorial/ Book? »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
help please, Programming a widget in dashcode x5452 OS X - Development and Darwin 0 01-05-2008 07:04 PM
Maintidget - a maintenance widget MacHeadCase OS X - Apps and Games 0 01-28-2007 08:49 AM
Widget Review: Ta-Da List Widget xtophercaa OS X - Apps and Games 0 11-15-2006 11:57 PM
I made a Widget! rs2sensen Schweb's Lounge 3 07-03-2005 05:51 PM
I want a Fantasy Baseball Widget!!! prostuff1 OS X - Apps and Games 4 06-16-2005 03:52 PM

All times are GMT -4. The time now is 04:20 AM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?