Jump to:

1347 Posts in 439 Topics by 514 members

Themes

SilverStripe Forums » Themes » Adding CMS Editable Areas

Discuss SilverStripe Themes.

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

Page: 1 2
Go to End
Author Topic: 1612 Views
  • Optic Blaze
    Avatar
    Community Member
    150 Posts

    Re: Adding CMS Editable Areas Link to this post

    I did it as a example of how you can change the field types in the CMS to suit your needs. The HTMLEditorField allows full WYSIWYG editing whereas the TextareaField just allows you to type in text. You can change them to whatever suits your needs.

  • Optic Blaze
    Avatar
    Community Member
    150 Posts

    Re: Adding CMS Editable Areas Link to this post

    You should be able to do it with the HTML editor in SS3's CMS.

    See this video that explains how it works:
    http://vimeo.com/59444001

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: Adding CMS Editable Areas Link to this post

    Optic Blaze,

    Thanks to you I've got it all working. You have been great and I'm learning a lot!

    I have two more things I'm trying to figure out - but (based on all the searching I've done) I think #2 may not be possible.

    1) I have 2 side-by-side divs that have some margin/padding and a background color. Even if there's no content put into them in the CMS editor, they still appear on the page in the browser.

    Is there a simple way (possibly in the page-specific .ss file that's in the templates/Layout folder) to hide the divs if they are empty?

    2) Unlike table cells, my side-by-side divs stretch in height independently. So if the left div has more content than the right div it looks out of balance. This is because they share the same background color. I end up with one longer than the other. I've been trying to get them to mirror the height of whichever one has the most content so that they appear uniform on the page.

    Thanks again!

  • Optic Blaze
    Avatar
    Community Member
    150 Posts

    Re: Adding CMS Editable Areas Link to this post

    1) Yes there is. Silverstripe allows for some logical controllers. All you do in your .ss file is add the following conditionals:

    <% if ProdDesc %> <div id="ProdDesc">$ProdDesc</div> <% end_if %>
    <% if MediaBox%> <div id="MediaBox" class="fRight">$MediaBox</div> <% end_if %>

    Silverstripe uses the if value to check if the field is empty...it will then only display content if there is content to display

    2)
    a) You could pre-determine the max height for the divs if you have an aprox idea of how much space to allocate. So for example you could set the css property to a fix height of 200px for example

    b) You could try setting a parent div with a min-height of say 200px and then set the child divs with heights of both 100%. The idea then (and i have not tested this) would be that if both child divs are less than 200px the will stretch to 200px...if child a is 210px then child b should theoretically also stretch to 210px.... just some ideas...you would have to test it to see if it works. So it would look something like this:

    <div id="parent">
    <div id="child1"> </div>
    <div id="child2"> </div>
    </div>

    The .css file would look like this:

    #parent {display:block; min-height:20px;}
    #child1 {display:block; height:100%;}
    #child2 {display:block; height:100%;}

    like i said...you would have to test this.... by the way....this wont work in ie6-7 (min-height does not work in ie6-7)

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: Adding CMS Editable Areas Link to this post

    The solution to question 1 works flawlessly! #2 is turning out to be a bit more of a challenge.

    I've seen people online refer to finding a solution to this as the "Holy Grail of CSS".

    While the 2a solution would work, I'd have to anticipate how much content a contributor may or may not add to the divs and permanently set their heights.

    2b - didn't work at all. I'm using Safari 6.0.3 as my browser.

    I've also tried the Faux Columns approach that I've found while searching online to no avail.

    Someone has suggested the following at stackoverflow.com but I'm not sure how (where) to try implementing it:

    *********************************************************************************************

    If it was me. I would solve this problem via javascript. Using jquery you could do...

    $(document).ready(function()
    {
    if($('#leftColumn').height() > $('#rightColumn').height())
    {
    $('#rightColumn').height($('#leftColumn').height());
    }
    else
    {
    $('#leftColumn').height($('#rightColumn').height());
    }
    });

    *************************************************************************************************

    Thanks again!

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: Adding CMS Editable Areas Link to this post

    I FOUND A WORKING SOLUTION TO THE ELUSIVE EQUAL HIGHT FOR SIDE-BY-SIDE DIVS ISSUE

    Here's how it works:

    Place the two side by-side divs inside another (Wrapper) div.

    Here's the CSS I used:

    #Wrapper {
       
       text-align:left;
    margin: 0 auto;
       width: 655px;
       display: block;
       overflow: hidden;
    }

    #Left {
       display: block;
       width: 300px;
       height: 100%;
       margin-right: 5px;
       padding: 10px;
       background-color: #ededed;
       float: left;
       margin-bottom: -1000px;
       padding-bottom: 1000px;
    }

    #Right {
       display: block;
       width: 300px;
       height: 100%;
       margin-left: 5px;
       padding: 10px;
       background-color: #ededed;
       float: left;
       margin-bottom: -1000px;
       padding-bottom: 1000px;
    }

    And here's the code in the .ss page:

    <div id="Wrapper">
          <div id="Left">$Left</div>
          <div id="Right">$Right</div>
    </div>

    The following link is the source of this solution:

    http://www.alphapapahotel.com/equal-height-div-columns-100-percent/css/

    Yeah!   

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: Adding CMS Editable Areas Link to this post

    OpticBlaze (or anyone willing to help),

    I'm hoping you can help me once again. I'm looking to add tabs to a page that are user editable within the CMS. I found a thread on this subject over in General but for some reason no one has been willing to respond. Here's the original thread:

    http://www.silverstripe.org/general-questions/show/18638

    I'm looking for a way to implement this where the tabs are auto-generated based on child pages.

    If there's any way you can help me it will be greatly appreciated.

    Thanks!

    1612 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.