Module Discussions

Module Discussions

Styling your Articles Module with CSS
Last Post 9/30/2010 03:51 PM by David O'Leary. 2 Replies.
Printer Friendly
  •  
  •  
  •  
  •  
  •  
Sort:
PrevPrev NextNext
Please login to post a reply.
Author Messages Informative
David O'Leary
Efficion Consulting Staff
Basic Member
Basic Member
Posts:151
Avatar

--
1/08/2009 10:26 AM

    Wherever posible, we try to utilize standard DotNetNuke classes in building out our templates so that the styling of your articles will fit in with the design of your skin without requiring customization. But we also wrap the standard classes with Article specific classes to ensure you can customize the styling of the various pieces of an article solely through CSS. This article will provide examples of custom styling the articles module through CSS.

    Styling the Article Title

    For the title, the templates we create use the Head class so that it will use the style of whatever is defined by the Skin for Head. If you want to use a different style, you can use:

    .Article .Head { ...}

    As for color, it will default to whatever is specified in the other .css files (skin.css, portal.css, default.css) for A tags and the related pseudo-classes (:link, :visited, :hover). If you want to override this, you can use something along the lines of:

    .Article .Head A {color: green;} /* for articles with no details */
    .Article .Head A:link, .Article .Head A:visited, .Article .Head A:active { color: pink;}
    .Article .Head A:hover { color:purple;} 

    More Details Coming Soon...

    Chazter
    New Member
    New Member
    Posts:6
    Avatar

    --
    7/07/2010 03:01 PM
    Where do I style the font size and color of the Title of the Article?
    David O'Leary
    Efficion Consulting Staff
    Basic Member
    Basic Member
    Posts:151
    Avatar

    --
    9/30/2010 03:51 PM
    For the title, the templates we create use the Head class so that it will use the style of whatever is defined by the Skin for Head. If you want to use a different style, you can use:

    .Article .Head { ...}

    As for color, it will default to whatever is specified in the other .css files (skin.css, portal.css, default.css) for A tags and the related pseudo-classes (:link, :visited, :hover). If you want to override this, you can use something along the lines of:

    .Article .Head A {color: green;} /* for articles with no details */
    .Article .Head A:link, .Article .Head A:visited, .Article .Head A:active { color: pink;}
    .Article .Head A:hover { color:purple;}
    Please login to post a reply.