template team web
  CSS overview
  bucket types
  setting channel colors
  view the CSS
  conversion tips
  samples
  Webreference CSS tutorial
  Index DOT Css QuickRef
  CSS spec @ W3C
 

webeng: template team: syndication buckets and CSS: bucket types

 This is an entire page. See how pretty it is?
    global page styles
  • BODY --sets background color and global (default) font attributes
  • A:link -- global link color
  • A:active -- global active link color
  • A:visited -- global visited link color
  • A:hover -- IE link hover color
  • .contentarea -- background color for main chunk of page
  • .line -- thin title header line color
  • .icon -- sets header icon bgcolor globally
  • A.previewlink, A.previewlink:link, A.previewlink:visited -- preview links throughout the site -- have to use all 3 classes for NS and IE compatibility -- need to go at bottom of stylesheet
  • A.headlinerlink:link, A.headlinerlink:visited -- CUSTOM LINKS FOR BAND NAMES ON TOUR EVENT LISTINGS -- need to go at bottom of stylesheet
  • A.supportlink:link, A.supportlink:visited -- CUSTOM LINKS FOR BAND NAMES ON TOUR EVENT LISTINGS -- need to go at bottom of stylesheet


This is the page's top navigation with integral searchbox. Dig?

    subnav
  • .subnav -- sets background color for inactive nav-tabs
  • .subnav A, .subnav A:visited - sets font attribs for inactive nav-tabs
  • .subnav A:hover -- sets font attribs for IE navtab hover
  • .subnavOn -- sets background color for active nav-tab
  • .subnavOn A, .subnavOn A:visited -- sets font attribs for inactive nav-tabs
  • .subnavOn A:hover -- sets font attribs for IE navtab hover
  • .searchbox -- sets background color and font attribs for subnav search box


This is the crumbtrail
    crumbtrail
  • .crumbtrail -- sets background color and font attribs for crumbtrail
  • .crumbtrail A, .crumbtrail A:visited -- sets font attribs for inactive crumbtrail links


This is the adbar, containing OUR ads.
    adbar
  • .adbar -- sets background color and font attributes for our side-adbar
  • .adbarHilite -- sets bgcolor for thin "highlight" trim line atop the adbar


This is the welcome box
    welcome
  • .welcomeHeader -- sets bgcolor and font attribs for welcome box header/title
  • .welcomeHeaderSm -- smaller font for welcome header
  • .welcomeBorder -- bordercolor and font attribs for welcome box border-area
  • .welcome -- sets font attribs for welcome box content --bgcolor gets inherited from .contentarea
  • .welcome A -- sets welcome link font attribs


This is the primary content box.
    primary
  • .primaryHeader -- sets bgcolor and font attribs for primary content box header/title
  • .primaryHeader A -- sets header link color
  • .primaryHeaderSm -- smaller font for welcome header
  • .primaryBorder -- bordercolor and font attribs for primary content box border-area
  • .primaryBorderLrg -- large font attribs for primary content box border-area
  • .primary -- sets font attribs for primary content box -- bgcolor gets inherited from .contentarea
  • .primary A:link, .primary A:visited -- sets primary content link font attribs
  • .primaryEmph -- used for special emphasis text, such as 'step 1, step 2,' etc. in moodlogic_entry
  • .primaryEmphSm -- used for moderate emphasis text, such as on tour dates front door
  • .primaryLrg -- sets large font attribs for primary content box -- bgcolor gets inherited from .contentarea
  • .primaryLrg A -- sets welcome link large font attribs
  • .primarySm -- sets small font attribs for primary content box -- bgcolor gets inherited from .contentarea
  • .primarySm A -- sets welcome link small font attribs
  • .primaryRadiobutton -- sets background color and button interior color to spoof netscape


This is the feature content box.
    feature
  • .featureHeader -- sets bgcolor and font attribs for feature box header/title
  • .featureHeaderSm -- sets bgcolor and font attribs for feature box small font in header/title
  • .featureBorder -- sets bgcolor for feature box border
  • .feature -- sets font attribs for feature content box
  • .feature A -- sets feature content link font attribs
  • .featureLrg -- sets large font attribs for feature content box
  • .featureLrg A -- sets welcome link large font attribs
  • .featureSm -- sets small font attribs for feature content box
  • .featureSm A -- sets welcome link small font attribs


This is the ecommerce box.

    ecommerce
  • .ecommerce -- ecommerce boxes througout the website
  • .ecommerce A:link, .ecommerce A:visited -- ecommerce links in ecommerce boxes
  • .ecommercelink2


This is the attribution footer box.

    attribution
  • .attribution -- sets font for attribution footer


This is the syndication footer .

    synfooter
  • .syndfooter -- sets bgcolor and font attribs for synfooter 1st color variation
  • .syndfooter A, .syndfooter A:visited -- sets syn_footer 1st color link font attribs
  • .syndfooter2 -- sets bgcolor and font attribs for synfooter color variation
  • .syndfooter2 A, .syndfooter2 A:visited -- sets synfooter 1st color link font attribs


This is THEIR sidebar, containing either navigation or other partner-specific content.
    sidebar (probably won't use this as partners will have their own stylesheet or hardcoded values!)
  • .sidebar -- sets background color and font attributes for partner-provided navbar/sidebar


This is the results content box.
    results
  • .resultsHeader -- sets bgcolor and font attribs for results content box header/title
  • .resultsHeader A -- sets results header link font attribs
  • .resultsSubheader -- sets bgcolor and font attribs for results box 1st subheader
  • .resultsSubheader A, .resultsSubheader A:link, .resultsSubheader A:visited -- sets results 1st subheader link font attribs
  • .resultsSubheader2 -- sets bgcolor and font attribs for results box 2nd subheader
  • .resultsSubheader2 A, .resultsSubheader2 A:visited -- sets results subheader2 link font attribs
  • .resultsSubheader2Sm -- sets small font attribs for results box 2nd subheader
  • .resultsSubheader3 -- sets font attribs for subhead on track_detail page
  • .results -- sets font attribs for results content box -- bgcolor gets inherited from .contentarea
  • .results A:link, .results A:visited -- sets results content link font attribs
  • .resultsLrg -- sets large font attribs for results content box -- bgcolor gets inherited from .contentarea
  • .resultsLrg A:link, .resultsLrg A:visited -- sets results content link large font attribs
  • .resultsAlt -- additional alternate text class
  • .resultsAlt A, .resultsAlt A:link, .resultsAlt A:visited
  • .resultsAltLrg -- additional alternate large text class
  • .resultsAltLrg A -- sets results large content link large font attribs
  • .resultsSm -- sets small font attribs for results content box -- bgcolor gets inherited from .contentarea
  • .resultsSm A -- sets results link small font attribs
  • .resultsDelim -- bgcolor for results delimiter
  • .resultsOffset -- sets font attribs for striping results content box
  • .resultsInterviewBlurb -- sets font attribs for interview block on guest editor home


This is the artist-card content box, horizontal and vertical types use same CSS classes.

    artist_card
  • .artistCardHeader -- sets bgcolor and font attribs for.artistCard header-title bar
  • .artistCardHeaderSm -- sets bgcolor and font attribs for.artistCard small font in header-subheader bar
  • .artistCardHeader A:link, .artistCardHeader A:visited -- link color for.artistCard header bar font
  • .artistCardHeaderSm A:link, .artistCardHeaderSm A:visited -- link color for.artistCard header bar small font
  • .artistCardBorder -- sets bgcolor and font attribs for.artistCard border
  • .artistCard -- sets font attribs for plain portion of.artistCard content box
  • .artistCard A -- sets link font attribs for.artistCard box 1st offset color
  • .artistCardLrg -- sets large font-attribs for plain portion of.artistCard content box
  • .artistCardOffset -- sets bgcolor and font attribs for.artistCard box 1st offset color
  • .artistCardOffset A, .artistCardOffset A:visited -- sets link font attribs for.artistCard box 1st offset color
  • .artistCardOffset2 -- sets bgcolor and font attribs for.artistCard box 2nd offset color
  • .artistCardOffset2 A, .artistCardOffset2 A:visited -- sets link font attribs for.artistCard box 2nd offset color


This is the.artistMain content box.
    artist_main
  • .artistMainHeader -- sets bgcolor and font attribs for.artistMain box 1st offset color
  • .artistMainHeader A:link, .artistMainHeader A:visited -- sets link font attribs for.artistMain box 1st offset color
  • .artistMainSubheader -- sets bgcolor and font attribs for.artistMain box 2nd offset color
  • .artistMainSubheader A, .artistMainSubheader A:visited -- sets link font attribs for.artistMain box 2nd offset color
  • .artistMainBorder -- sets border color for "file under" table at bottom of component
  • .artistMain -- sets font attribs for plain portion of.artistMain content box -- inherits bgcolor from .contentarea
  • .artistMain A:link, .artistMain A:visited -- sets link font attribs for.artistMain box 1st offset color


Guest Editor Content (no image yet)
    guest
  • .guestSubheader -- sets bgcolor and font attribs for guest subheader
  • .guestSubheader A, .guestSubheader A:visited -- sets results guest subheader link font attribs
  • .guestSubheaderLrg -- sets large font attribs for guest editor subheader
  • .guestBorder -- sets border for guest editor
  • .guest -- sets font attribs for guest editor pages
  • .guest A, .guest A:visited -- sets guest editor content link font attribs
  • .guestLrg -- sets large font attribs for guest editor
  • .guestSm -- sets small font attribs for guest editor
  • .guestSm A, .guestSm A:visited -- sets small link font attribs for guest editor



For listen.com internal use only.
Last Updated: