Jump to:

1385 Posts in 493 Topics by 522 members

Themes

SilverStripe Forums » Themes » Double-column css theme design

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2
Go to End
Author Topic: 4606 Views
  • Happysadhu
    Avatar
    Community Member
    33 Posts

    Double-column css theme design Link to this post

    Hi,
    How would one go about creating a theme that has two columns of content that can be easily edited from the CMS interface? The Silverstripe.org website displays some of its pages with a main column and a side column of text unique to that page. Presuming that the web developers are using SilverStripe, I wondering how they did it?

    THanks,
    Sam

  • Hamish
    Avatar
    Community Member
    712 Posts

    Re: Double-column css theme design Link to this post

    You'd just add another html content field to the page type. In the template, reference the field just like any other.

    Relevant documentation:

    http://doc.silverstripe.com/doku.php?id=htmleditorfield

    So, you might have a new page type:

    // two column page
    static $db = array(
    'columnContent' => 'HTMLText'
    );

    function getCMSFields() {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab('Root.Main.Column',
    new HtmlEditorField(
    $name = "columnContent",
    $title = "HTML Editor"
    )
    );
    return $fields;
    }

    And in the template, just put $columnContent where you want to display the text.

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: Double-column css theme design Link to this post

    in the SilverStripe themes you are free to use any html tag, so you can use an iFrame too (which I dont encourage you to do as it is not good for SEO).

    Otherwise if the content have to be common to all the pages use a DataObject, and make relationships with a new page type, and this will solve you the problem.

    If you find those two are hard, then you can just hard code your content to the theme too, but this will be somewhat difficult to update, after deploying the site.

  • jkd77
    Avatar
    Community Member
    12 Posts

    Re: Double-column css theme design Link to this post

    After having followed the online tutorial I have been attempting to implement what is described above. I'm using Silverstripe version 2.2.3.

    Whenever I add this code ('mySubContent' => 'HTMLText' ) I cannot successfully get the DB to rebuild without an error.

    I have put this code in tutorial/code/Page.php like such:

    <?php

    class Page extends SiteTree
    {
       static $db = array(
          'mySubContent' => 'HTMLText'
       );
       
       static $defaults = array(
       );
       
       function getCMSFields()
       {
          $fields = parent::getCMSFields();
          $fields->addFieldToTab('Root.Content.Sub', new HtmlEditorField
             (
                $name = "mySubContent",
                $title = "Sub Content"
             )
          );
          return $fields;
       }
       
    }

    The error simply states 'Error. The website server has not been able to respond to your request.'

    Thoughts?

    Any help would be greatly appreciated...

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: Double-column css theme design Link to this post

    Seems like you have used the addFieldToTab incorrectly

    try with the following code

    <?php

    class Page extends SiteTree
    {
    static $db = array(
    'mySubContent' => 'HTMLText'
    );

    static $defaults = array(
    );

    function getCMSFields()
    {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab('Root.Content.Sub', new HtmlEditorField ( $name = "mySubContent", $title = "Sub Content" ), 'Content' );
    return $fields;
    }

    }

  • jkd77
    Avatar
    Community Member
    12 Posts

    Re: Double-column css theme design Link to this post

    Thanks for the response!

    I have changed the code and the Error persists. Only by commenting out the following line does the DB rebuild error-free:

    static $db = array(
          //'mySubContent' => 'HTMLText'
    );

    The actual DB rebuild response is pasted below:

    Building Database

    Creating database tables
    # Newsletter
    # Newsletter_SentRecipient
    # Newsletter_Recipient
    # NewsletterType
    # PageComment
    # Email_BounceRecord
    # Email_BlackList
    # PageView
    # SiteTree
    # QueuedEmail
    # File
    # EditableCheckboxOption
    # EditableDropdownOption
    # EditableFormField
    # EditableRadioOption
    # SubmittedForm
    # SubmittedFormField
    # Group
    # Member
    # Member_UnsubscribeRecord
    # Permission
    # Widget
    # WidgetArea
    # BrowserPollSubmission
    # GhostPage
    # Page
    # Table Page: created
    # Field Page.mySubContent: created as mediumtext character set utf8 collate utf8_general_ci
    # Table Page_Live: created
    # Field Page_Live.mySubContent: created as mediumtext character set utf8 collate utf8_general_ci
    # Table Page_versions: created
    # Field Page_versions.RecordID: created as int(11) not null default '0'
    # Field Page_versions.Version: created as int(11) not null default '0'
    # Field Page_versions.WasPublished: created as tinyint(1) unsigned not null default '0'
    # Field Page_versions.AuthorID: created as int(11) not null default '0'
    # Field Page_versions.PublisherID: created as int(11) not null default '0'
    # Field Page_versions.mySubContent: created as mediumtext character set utf8 collate utf8_general_ci
    # Index Page_versions.RecordID_Version: created as (RecordID,Version)
    # Index Page_versions.RecordID: created as (RecordID)
    # Index Page_versions.Version: created as (Version)
    # Index Page_versions.AuthorID: created as (AuthorID)
    # Index Page_versions.PublisherID: created as (PublisherID)
    # UserDefinedForm
    # ErrorPage
    # RedirectorPage
    # VirtualPage
    # ArticleHolder
    # ArticlePage
    # HomePage
    # SiteMap
    # StaffHolder
    # StaffPage
    # SubscribeForm
    # Image
    # Folder
    # Image_Cached
    # EditableCheckbox
    # EditableCheckboxGroupField
    # EditableDateField
    # EditableDropdown
    # EditableEmailField
    # EditableFileField
    # EditableFormHeading
    # EditableMemberListField
    # EditableRadioField
    # EditableTextField
    # SubmittedFileField
    # Group_Unsecure
    Error

    The website server has not been able to respond to your request.
    -------------

    When I go into admin at this point the Sub tab with the html area exists, but the data does not get saved...

    Thoughts?

  • Happysadhu
    Avatar
    Community Member
    33 Posts

    Re: Double-column css theme design Link to this post

    Thanks for the previous replies!

    It would be really helpful if someone could share with me an example of a working, double-column theme which demonstrates the suggested coding above that I could use as a starting point.

    Or give more specific suggestions on how to modify Blackcandy, so that I can add additional text to the sidebar unique to each page and editable through the CMS interface.

    I've tried using the html-content widget. I've gotten other widgets to work on every page. But this one has an issue of remaining in the "to add..." right-side column in the CMS when I refresh the page. Someone else has posted a similar issue. I'm using wampserver, so maybe there is an issue there.

    The other issue I came across is that by default, the left sidebar in blackcandy appears only if there are sublinks from that page. I've removed the if statement in /templates/Layout/page.ss so that the sidebar always appears, as in the following:

    <div class="typography">
       <% if Menu(2) %>
          <% include SideBar %>
          <div id="Content">
       <% end_if %>
             
       <% if Level(2) %>
           <% include BreadCrumbs %>
       <% end_if %>
       
          <h2>$Title</h2>
       
          $Content
          $Form
          $PageComments
       
       <% if Menu(2) %>
          </div>
       <% end_if %>
    </div>

    However, now the sublinks box with the main page title (.e.g., "home") always appears even if there are no links to display. It would great if there were double-column-content themes available at Silverstripe.org.

    Thanks again,
    Sam

    PS: Hey JKD77, if you get it work (figure out the error), please let me know how you did it.

  • jkd77
    Avatar
    Community Member
    12 Posts

    Re: Double-column css theme design Link to this post

    An update:

    I have not gotten any closer to a solution to this problem. In fact the database now refuses to re-build even WITH the offending code commented out. ('SubContent' => 'HTMLText')

    In an attempt to make further progress on other areas of the site I re-named the main folder that houses the site from tutorial to something more inline with the purpose of the site. I've managed to get this site viewable as intended with my earlier custom theme. Now however as mentioned the DB will not rebuild period.

    I'm hoping this additional info will help illuminate what is the source of the issue. Help is greatly appreciated.

    The DB response is below:

    Building Database

    Creating database tables
    # Newsletter
    # Newsletter_SentRecipient
    # Newsletter_Recipient
    # NewsletterType
    # PageComment
    # BrowserPollSubmission
    # Email_BounceRecord
    # Email_BlackList
    # PageView
    # SiteTree
    # Field SiteTree.ClassName: changed to enum('SiteTree','Page','GhostPage','UserDefinedForm','ArticleHolder','ArticlePage','HomePage','SiteMap','StaffHolder','StaffPage','ErrorPage','RedirectorPage','VirtualPage','SubscribeForm') character set utf8 collate utf8_general_ci default 'SiteTree' (from enum('SiteTree','GhostPage','Page','UserDefinedForm','ErrorPage','RedirectorPage','VirtualPage','ArticleHolder','ArticlePage','HomePage','SiteMap','StaffHolder','StaffPage','SubscribeForm') character set utf8 collate utf8_general_ci default 'SiteTree')
    # Field SiteTree_Live.ClassName: changed to enum('SiteTree','Page','GhostPage','UserDefinedForm','ArticleHolder','ArticlePage','HomePage','SiteMap','StaffHolder','StaffPage','ErrorPage','RedirectorPage','VirtualPage','SubscribeForm') character set utf8 collate utf8_general_ci default 'SiteTree' (from enum('SiteTree','GhostPage','Page','UserDefinedForm','ErrorPage','RedirectorPage','VirtualPage','ArticleHolder','ArticlePage','HomePage','SiteMap','StaffHolder','StaffPage','SubscribeForm') character set utf8 collate utf8_general_ci default 'SiteTree')
    # Field SiteTree_versions.ClassName: changed to enum('SiteTree','Page','GhostPage','UserDefinedForm','ArticleHolder','ArticlePage','HomePage','SiteMap','StaffHolder','StaffPage','ErrorPage','RedirectorPage','VirtualPage','SubscribeForm') character set utf8 collate utf8_general_ci default 'SiteTree' (from enum('SiteTree','GhostPage','Page','UserDefinedForm','ErrorPage','RedirectorPage','VirtualPage','ArticleHolder','ArticlePage','HomePage','SiteMap','StaffHolder','StaffPage','SubscribeForm') character set utf8 collate utf8_general_ci default 'SiteTree')
    # QueuedEmail
    # File
    # EditableCheckboxOption
    # EditableDropdownOption
    # EditableFormField
    # EditableRadioOption
    # SubmittedForm
    # SubmittedFormField
    # Group
    # Member
    # Member_UnsubscribeRecord
    # Permission
    # Widget
    # WidgetArea
    # Page
    # GhostPage
    # UserDefinedForm
    # ArticleHolder
    # ArticlePage
    # HomePage
    # SiteMap
    # StaffHolder
    # StaffPage
    # ErrorPage
    # RedirectorPage
    # VirtualPage
    # SubscribeForm
    # Image
    # Folder
    # Image_Cached
    # EditableCheckbox
    # EditableCheckboxGroupField
    # EditableDateField
    # EditableDropdown
    # EditableEmailField
    # EditableFileField
    # EditableFormHeading
    # EditableMemberListField
    # EditableRadioField
    # EditableTextField
    # SubmittedFileField
    # Group_Unsecure
    Error

    The website server has not been able to respond to your request.

    4606 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.