Back

Stylized HomeFeeds

Here's an example using the Home Feeds & applying some style.


List Item HTML

The Non-EDIT html, for the ListItem control used above, looks like this:

<div class="homefeed-ex-styled-item <%=oFeedOptions.cItemCSSClass%>">
  <a href="<%=oFeed.cURL%>"
     >
    <h4>
      <%=oFeed.cMainTitle%>
    </h4>
    <p>
      <%=oFeed.cSubTitle%>
    </p>
    <img src="<%=ImgSrc%>"
         alt="<%=oImg.cDescription%>"/>    
  </a>


</div>

Styled Feeds

Rendered with the following CSS :

.homefeed-ex-styled-item {
  position:relative;

  a {
    position:relative;
    display:block;
    border:solid 1px @brand-primary;

    // Add an overlay
    &:after {
      display:block;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;

      // Use a vertical graident to ensure there's sufficient 
      // contrast between text & background so it is legible
      #gradient.vertical(  
        fadeout( darken( @brand-primary, 25% ), 75%); 
        fadeout( darken( @brand-primary, 25% ), 35%); 
        0%; 
        100%
      );

      z-index:800;
      content:" ";
    }

    &:hover {
      &:after {

        #gradient.vertical(  
          fadeout( darken( @brand-primary, 25% ), 75%); 
          fadeout( darken( @brand-primary, 25% ), 10%); 
          0%; 
          100%
        );   

      }
    }

    h4, p {
      position:absolute;
      left:0;
      width:100%;
      text-align:center;
      z-index:900;
      color:@body-bg;

      // Extra shadow to enhance the contrast
      text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);
    }

    h4 {
      bottom:@line-height-computed;
    }
    p {
      bottom:0;
      margin-bottom:@line-height-computed/3;
    }

    img {
      position:relative;
      width:100%;
    }

  }
}

The CSS Gradient used by the feeds, where to upper portion of the gradient is lighter than the lower, help ensure that the text is legible.

Aswell as conforming to one of the Standard Design Principles:

Light comes from above

Check out the CSS CheetSheet for a Quick ref on Gradients