NEW! We are dogfooding the newly updated Ashford Pro v2.4 and premium theme called Actuate

How to add style to your FAQ page

by on July 7, 2011 » Add the first comment.

One of the most under appreciated page templates is our Ashford FAQ. If you follow a h2 > p pattern in your content then Ashford will automatically add collapsing titles. So if you click on a question title, the answer appears below.

See a FAQ Demo

This FAQ page markup is simple with added CSS to make it more interesting. The coolest part is that the A: and the Q: is added via CSS pseudo classes. If you want to try it out, add this CSS code to the Custom CSS field on the Pro Settings Panel. Or you can add it to your style.css.

body.page-template-page_faq-php .post_content h2 {
    border-bottom: 1px solid #DDDDDD;
    cursor: pointer;
    margin-top: 20px;
    padding-bottom: 8px;
    padding-top: 8px;
    text-decoration: none;
}
body.page-template-page_faq-php .post_content h2:before {
    content: 'Q: ';
    font-weight: bold;
 
}
body.page-template-page_faq-php .post_content p {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color #DDDDDD #DDDDDD;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    margin: 0;
    padding: 10px;
}
body.page-template-page_faq-php .post_content p:before{
    content: 'A: ';
    font-weight: bold;
}
 

Liked this? Share it with your friends!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">