Adding custom content on your DecoNetwork website with CSS

CSS allows some pretty amazing things when it come to customizing your web site. Just check out CSS Zen Garden to see how the exact same HTML content can look amazingly different through the power of pure CSS.

Amazing examples of CSS from CSS Zen Garden
Amazing examples of CSS from CSS Zen Garden

In this short tip I show you how you can add some custom content to sections of your website using pure CSS.

content_css

The video

 

The CSS

In this video I use the CSS “content” property to insert some text after the size fields on the product information page. i.e.

#item {
   content: "Add your text content here";
}

The CSS I used in this video:

#tab_product_details ul.add > li:first-of-type::after {
   background: yellow none repeat scroll 0 0;
   border: 1px solid orange;
   border-radius: 6px;
   box-sizing: border-box;
   content: "Please refer to the sizing chart when selecting your sizes.";
   display: inline-block;
   margin: 10px 0;
   padding: 10px;
   width: 100%;
}

Happy Deco’ing!

Leave a Reply

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