Silverstripe 3.1 Gridfield page-type design using tabs on front-end. Part 3

Welcome to part 3 of this series. I recommend you check out part 1 and part 2 before reading this article. In this part we will add the CSS for the design and also add products comments and comment form to the third tab.

1. Open layout.css (though if you use a different CSS file, use that) and add the lines:

.tabs > DIV {
    background: none;
    margin-top: 10px;
.tabs > DIV H3 {
    border-bottom: 4px solid #e5e5e5 !important;
    color: #ccc !important;
    font-weight: 300;
    line-height: 186px !important;
UL.horizontal {
    display: inline;
    margin: 0;
UL.horizontal > LI {
    display: inline-block;
.tabs  LI {
    margin-right: 10px;
.tabs A {
    color: #FFF;
    display: block;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 20px;
    text-decoration: none;
.tabs LI:hover {
.tabs LI:hover A {
    color: white;
.tabs div a {
    color: #000;
.active {
    background:#FF0000 !important;
.active A {
    color: white !important;

2. After adding the CSS above and the code in pagetype layout’s  (from another part in this series) the page should look like:Description-tab
or in video tab
3. For the comments we need to download some more modules  gridfield-bulk-editing-tools and silverstripe-comments. Download both of them.

4. Upload the GridField Bulk Editing Tools to folder named “GridFieldBulkEditingTools” and Silverstripe-comments to folder named “comments”

5. In mysite/_config.php add the line:


6. Dev/build site by opening this URL in your preferred browser:

7. Open the themes/simple/templates/Layout/ file and add the following lines to it:

Find line with content:
<li><a href=".Video">Video</a></li>
and add after it line for Comments link:
<li><a href=".Comments">Comments</a></li>

No go down and find div named Video and add the following code after it:

<div class='Comments'>

8. Dev/build site by opening: in your preferred browser

And now if you go to the product page you have one more tab named Comments and under it you have the commenting form. If you want to limit commenting to only logged in users,  add this line to mysite/_config.php and dev/build the site as you did previously:

// mysite/_config.php - Sets require_login to true for Product Dataobject
Commenting::set_config_value('Product', 'require_login', true);

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

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