Title: EXAMPLE: CSS and Template (for beginners)
Last modified: August 22, 2016

---

# EXAMPLE: CSS and Template (for beginners)

 *  Resolved [Robswaimea](https://wordpress.org/support/users/robswaimea/)
 * (@robswaimea)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/example-css-and-template-for-beginners/)
 * EXAMPLE: CSS and Template (for beginners)….
    This will put a Thumbnail to the
   left of a box. With a Title.. An Excerpt.. etc. This wraps your posts in a Purple
   Box with a White inner box. It also makes your “boxes” with rounded corners and
   a nice “shadow” effect with the boxes.
 * OK… thought I’d share… as I am a beginner… and maybe will this will help some
   of you. And please… as I am a beginner with a lot of this stuff I can’t answer
   many of your questions but this might help
    For POSTS… (obviously you already
   have the plugin producing your posts) In your “Template”
 *     ```
       <ul id="purple">[posts]
       <li id="whitepurple" class="withborder">
       <div style="float:left;">[post_thumbnail width="125" height="75"]</div>
       <span style="font-size: 12pt;background-color: #ffff00;"><strong>[title]</strong></span>
       <br />
       <span style="font-size: 10pt;">[excerpt wordlimit=20]</span>[more]
       [/posts]</ul>
       ```
   
 * And then in your “STYLE” the CSS input area put this…
 *     ```
       .ul, #purple {
       border-radius: 10px/10px;
       -webkit-border-radius: 10px/10px;
       -moz-border-radius: 10px/10px;
       -ms-border-radius: 10px/10px;
       -o-border-radius: 10px/10px;
           background: #7220c9;
           margin: 5px 5px 5px 5px;
           padding: 5px 5px 5px 5px;
           box-shadow: 0 0 10px rgba(0,0,0,0.9);
           -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.9);
           -moz-box-shadow: 0 0 10px rgba(0,0,0,0.9);
           -ms-box-shadow: 0 0 10px rgba(0,0,0,0.9);
           -o-box-shadow: 0 0 10px rgba(0,0,0,0.9);
                                                 /* No borders set */
         }
       .li, #whitepurple {
           color: black;                /* text color is black */
           font-family: Arial;
           font-size: 14px;
           background: white;           /* Content, padding will be white */
           border-radius: 10px/10px;
           -webkit-border-radius: 10px/10px;
           -moz-border-radius: 10px/10px;
           -ms-border-radius: 10px/10px;
           -o-border-radius: 10px/10px;
           margin: 5px 5px 5px 5px;
           padding: 5px 5px 5px 5px;
           list-style: none             /* no glyphs before a list item */
                                                 /* No borders set */
         }
         LI.withborder {
           border-radius: 10px/10px;
           -webkit-border-radius: 10px/10px;
           -moz-border-radius: 10px/10px;
           -ms-border-radius: 10px/10px;
           -o-border-radius: 10px/10px;
           border-style: none;
           border-width: medium;        /* sets border width on all sides */
           border-color: #27d130;
         }
       ```
   
 * I probably have something wrong… but it works for me…
    This is from here but 
   has been explained other places too for CSS boxes.. etc [http://stackoverflow.com/questions/17757633/how-can-i-get-this-code-to-apply-the-styling-only-where-i-want-it](http://stackoverflow.com/questions/17757633/how-can-i-get-this-code-to-apply-the-styling-only-where-i-want-it)
 * [https://wordpress.org/plugins/w4-post-list/](https://wordpress.org/plugins/w4-post-list/)

Viewing 1 replies (of 1 total)

 *  Thread Starter [Robswaimea](https://wordpress.org/support/users/robswaimea/)
 * (@robswaimea)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/example-css-and-template-for-beginners/#post-5511291)
 * Just wanted to mark this as “resolved” .

Viewing 1 replies (of 1 total)

The topic ‘EXAMPLE: CSS and Template (for beginners)’ is closed to new replies.

 * ![](https://ps.w.org/w4-post-list/assets/icon-128x128.png?rev=3034626)
 * [W4 Post List](https://wordpress.org/plugins/w4-post-list/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/w4-post-list/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/w4-post-list/)
 * [Active Topics](https://wordpress.org/support/plugin/w4-post-list/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/w4-post-list/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/w4-post-list/reviews/)

 * 1 reply
 * 1 participant
 * Last reply from: [Robswaimea](https://wordpress.org/support/users/robswaimea/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/example-css-and-template-for-beginners/#post-5511291)
 * Status: resolved