Results 1 to 5 of 5
  1. #1


    Member Since
    Dec 03, 2008
    Posts
    5
    CSS in Dashcode Widget
    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;
    }

  2. #2


    Member Since
    Mar 15, 2007
    Posts
    161
    Specs:
    17" MacBook Pro, 2.33GHz C2D, 2GB RAM
    ".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.

  3. #3


    Member Since
    Dec 03, 2008
    Posts
    5
    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;
    }

  4. #4


    Member Since
    Mar 15, 2007
    Posts
    161
    Specs:
    17" MacBook Pro, 2.33GHz C2D, 2GB RAM
    ".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.

  5. #5


    Member Since
    Dec 03, 2008
    Posts
    5
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Widget to make dashboar/widget start faster. Whats the name?
    By LeandrodaFL in forum OS X - Operating System
    Replies: 2
    Last Post: 02-16-2011, 05:27 PM
  2. Convert a web clip widget into an actual dashboard widget with Dashcode?
    By Turk182 in forum OS X - Development and Darwin
    Replies: 6
    Last Post: 03-12-2010, 03:54 AM
  3. programmatically adding elements to widget in dashcode
    By abhimanyulad in forum OS X - Development and Darwin
    Replies: 0
    Last Post: 07-16-2009, 02:02 PM
  4. help please, Programming a widget in dashcode
    By x5452 in forum OS X - Development and Darwin
    Replies: 0
    Last Post: 01-05-2008, 07:04 PM
  5. Dashcode: 1.0 (41)
    By willfors in forum OS X - Development and Darwin
    Replies: 2
    Last Post: 08-16-2006, 12:39 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •