Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Themes

Discuss SilverStripe Themes.

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

Adding CMS Editable Areas


Reply

15 Posts   2027 Views

Avatar
Optic Blaze

16 April 2013 at 8:55am Community Member, 162 Posts

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.

Avatar
Optic Blaze

16 April 2013 at 7:47pm Community Member, 162 Posts

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

Avatar
goodness

17 April 2013 at 8:34am (Last edited: 17 April 2013 8:36am), Community Member, 38 Posts

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!

Avatar
Optic Blaze

17 April 2013 at 9:30am Community Member, 162 Posts

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)

Avatar
goodness

18 April 2013 at 2:50am Community Member, 38 Posts

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!

Avatar
goodness

18 April 2013 at 6:48am Community Member, 38 Posts

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!   

Avatar
goodness

16 May 2013 at 1:36am (Last edited: 16 May 2013 1:36am), Community Member, 38 Posts

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!