• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC

Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: A bit more styling for the sortable list of CGContentUtils
PostPosted: Thu Feb 11, 2016 6:43 pm 
Forum Members
Forum Members

Joined: Sat Aug 29, 2009 3:00 pm
Posts: 221
I made a replacement template for the sortable list in CGContentUtils. To use it, create a folder (in your CMSMS root) called:

So actually three folders/levels.

Create a file there called sortable_list.tpl and open it. Paste the following:
{* sortable list template *}
<style type="text/css">
#{$selectarea_prefix}_select {
#{$selectarea_prefix}_master {
table.select_list {
  width: 60%;
  margin: 0 auto;
  padding: 7px;
.sortlist {
  margin: 0 !important;
  height: auto;
  overflow-y: scroll;
.sortlist_cell {
  width: 45%;
#selected_cell ul li {
  background: rgb(200,200,200);
  font-weight: bold;
#source_cell ul li {
  background: rgb(230,230,230);
#separator_cell {
  text-align: center;
  width: 10%;
  font-weight: bold;
.select_item {
  cursor: move;
  box-sizing: border-box;
  padding: 0.7em;
  border-radius: 5px;
  margin: 0 0 5px 0;
  list-style-type: none;
  text-align: center;
  transition: background 300ms ease;
.column_title {
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 7px 7px 0 0;
  padding: 5px;
  margin: 3px;
  width: 45%;
.column_title:first-child {
  background: #9bffb5;
.column_title:nth-child(3n) {
  background: #ffa79b;
<__script__ type='text/javascript'>
  var sortable_1 = $('#{$selectarea_prefix}_select');
  var sortable_2 = $('#{$selectarea_prefix}_master');
  var h = Math.max(sortable_1.height(),sortable_2.height());
  sortable_1.height(h); sortable_2.height(h);
    connectWith: sortable_2,
    update: function(ev,ui) {
      if( {$max_selected} > 0 && $('li',this).length > {$max_selected} ) {
      else {
        var str = $(this).sortable('toArray').join();
    connectWith: sortable_1
var allowduplicates = {$allowduplicates};
var valuefld = "{$selectarea_prefix}";
var max_selected = {$max_selected};

<table class="select_list">
    <td class="column_title" style="text-align: center;">{$label_left}</td>
    <td class="column_title" style="text-align: center;">{$label_right}</td>
  <tr class="select_list">
    <td valign="top" class="sortlist_cell" id="selected_cell">
      {* left column - for the selected items *}
      <ul id="{$selectarea_prefix}_select" class="sortlist" title="{$cge->Lang('sortablelist_selectlist')}">
      {if isset($selectarea_selected)}
      {foreach $selectarea_selected as $key => $val}
        <li id="{$key}" class="select_item">{$val}</li>
    <td id="separator_cell">&lt;&dash;&gt;</td>
    <td class="sortlist_cell" id="source_cell">
      {* right column - for the master list *}
      <ul id="{$selectarea_prefix}_master" class="sortlist" title="{$cge->Lang('sortablelist_masterlist')}">
      {foreach $selectarea_masterlist as $key => $val}
         {if !isset($selectarea_selected) || !isset($selectarea_selected[$key])}
         <li id="{$key}" class="select_item">{$val}</li>
<input type="hidden" id="{$selectarea_prefix}" name="{$selectarea_prefix}" value=""/>

Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC

Who is online

Users browsing this forum: No registered users

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting