EDICIONES USTA - Misión y Visión Ediciones USTA es el sello editorial de la Universidad Santo Tomás, primer claustro universitario de Colombia. Con más de 40 años de experiencia, su producción alcanza los 100 ejemplares al año, convirtiéndola en una de las editoriales universitarias con mayor trayectoria del país https://ediciones.usta.edu.co/index.php/features/20-features/zentools-module 2025-05-13T08:33:33+00:00 EDICIONES USTA [email protected] Joomla! - Open Source Content Management Zentools Filter 2013-07-03T21:27:51+00:00 2013-07-03T21:27:51+00:00 https://ediciones.usta.edu.co/index.php/features/20-features/zentools-module/76-zentools-tabs <h3>Overview</h3> <p>The filter layout is a grid based layout that allows the user to filter the items that are shown in the module according to their respective categories. <span style="line-height: 1.3em;">The triggers are automatically populated based on the category of your item.</span></p> <div class="divider"> </div> <h3>Features</h3> <ul> <li>Filter items shown in the module based on the item categories.</li> <li>Display unlimited number of items from Joomla, k2 content or images from a folder.</li> <li>Full control over the grid with multiple grid based layouts available.</li> </ul> <div class="divider"> </div> <h2 class="headline">Filter Demonstration</h2> <p class="subheading">The tags are populated based on the the categories that the items in the module are assigned to using standard Joomla or K2 categories.</p> <p>{loadposition filter}</p> <h3>Overview</h3> <p>The filter layout is a grid based layout that allows the user to filter the items that are shown in the module according to their respective categories. <span style="line-height: 1.3em;">The triggers are automatically populated based on the category of your item.</span></p> <div class="divider"> </div> <h3>Features</h3> <ul> <li>Filter items shown in the module based on the item categories.</li> <li>Display unlimited number of items from Joomla, k2 content or images from a folder.</li> <li>Full control over the grid with multiple grid based layouts available.</li> </ul> <div class="divider"> </div> <h2 class="headline">Filter Demonstration</h2> <p class="subheading">The tags are populated based on the the categories that the items in the module are assigned to using standard Joomla or K2 categories.</p> <p>{loadposition filter}</p> Zentools Grid 2013-07-03T21:27:27+00:00 2013-07-03T21:27:27+00:00 https://ediciones.usta.edu.co/index.php/features/20-features/zentools-module/75-zentools-grid <h3>Overview</h3> <p>The Zentools grid layout is a classic multi-column responsive grid that can be used to generate a wide range of layouts.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li>A flexible grid based on 1 to 12 columns.</li> <li>Create columns within columns</li> </ul> <div class="divider"> </div> <h3>Grid Demonstration</h3> <h2 class="heading">ZenTools Grid Lots of Columns</h2> <p class="subheading">The grid below is set to display 6 images in 6 columns. The images are referenced directly from a folder in your Joomla site.</p> <p>{loadposition zengrid2}</p> <div class="divider"> </div> <p> </p> <h2 class="heading">Columns within columns</h2> <p class="subheading">The grid below is set to display 2 columns however each item is also set to display it's content in two columns.</p> <p>{loadposition zengrid3}</p> <h3>Overview</h3> <p>The Zentools grid layout is a classic multi-column responsive grid that can be used to generate a wide range of layouts.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li>A flexible grid based on 1 to 12 columns.</li> <li>Create columns within columns</li> </ul> <div class="divider"> </div> <h3>Grid Demonstration</h3> <h2 class="heading">ZenTools Grid Lots of Columns</h2> <p class="subheading">The grid below is set to display 6 images in 6 columns. The images are referenced directly from a folder in your Joomla site.</p> <p>{loadposition zengrid2}</p> <div class="divider"> </div> <p> </p> <h2 class="heading">Columns within columns</h2> <p class="subheading">The grid below is set to display 2 columns however each item is also set to display it's content in two columns.</p> <p>{loadposition zengrid3}</p> Zentools Masonry 2013-07-03T21:24:31+00:00 2013-07-03T21:24:31+00:00 https://ediciones.usta.edu.co/index.php/features/20-features/zentools-module/73-zentools-masonry <h3>Overview</h3> <p>The best way to think of the jQuery Masonry effect is that it's the opposite of css floats. Whereas floating elements with css will organise each block horizontally (see the grid layout), masonry organises each block vertically. The blocks on the page consequently organise themselves based on the next available space below the preceding block, like a jigsaw puzzle or as the name suggests a piece of masonry.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li><span style="line-height: 1.3em;">Create dynamic and flexible layouts using multiple width items as well as equal width items.</span></li> <li><span style="line-height: 1.3em;">Display any number of core elements from your Joomla or K2 content or images retrieved from a folder.</span></li> <li><span style="line-height: 1.3em;">Media queries revert all items to a 100% width for smaller screens.</span></li> </ul> <div class="divider"> </div> <h3>Demonstration</h3> <p>{loadposition masonry}</p> <h3>Overview</h3> <p>The best way to think of the jQuery Masonry effect is that it's the opposite of css floats. Whereas floating elements with css will organise each block horizontally (see the grid layout), masonry organises each block vertically. The blocks on the page consequently organise themselves based on the next available space below the preceding block, like a jigsaw puzzle or as the name suggests a piece of masonry.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li><span style="line-height: 1.3em;">Create dynamic and flexible layouts using multiple width items as well as equal width items.</span></li> <li><span style="line-height: 1.3em;">Display any number of core elements from your Joomla or K2 content or images retrieved from a folder.</span></li> <li><span style="line-height: 1.3em;">Media queries revert all items to a 100% width for smaller screens.</span></li> </ul> <div class="divider"> </div> <h3>Demonstration</h3> <p>{loadposition masonry}</p> ZenTools List 2013-07-03T21:23:15+00:00 2013-07-03T21:23:15+00:00 https://ediciones.usta.edu.co/index.php/features/20-features/zentools-module/72-zentools-list <h3>Overview</h3> <p>The Zentools list layout is the perfect layout for when you need to display your content in a simple unordered list.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li><span style="line-height: 1.3em;">Each item is rendered underneath the next one in a vertical list.</span></li> <li><span style="line-height: 1.3em;">Create layouts that include up to four columns.</span></li> </ul> <div class="divider"> </div> <h3>Demonstration</h3> <h2 class="heading">ZenTools Two Columns</h2> <p class="subheading">The layout below uses the list layout with each individual item set to display it's contents in two columns.</p> <p>{loadposition list}</p> <div class="divider"> </div> <p> </p> <h2 class="heading">ZenTools Three Columns</h2> <p class="subheading">The layout below uses the list layout with each individual item set to display it's contents in three columns.</p> <p>{loadposition list2} <br /><br /></p> <h3>Overview</h3> <p>The Zentools list layout is the perfect layout for when you need to display your content in a simple unordered list.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li><span style="line-height: 1.3em;">Each item is rendered underneath the next one in a vertical list.</span></li> <li><span style="line-height: 1.3em;">Create layouts that include up to four columns.</span></li> </ul> <div class="divider"> </div> <h3>Demonstration</h3> <h2 class="heading">ZenTools Two Columns</h2> <p class="subheading">The layout below uses the list layout with each individual item set to display it's contents in two columns.</p> <p>{loadposition list}</p> <div class="divider"> </div> <p> </p> <h2 class="heading">ZenTools Three Columns</h2> <p class="subheading">The layout below uses the list layout with each individual item set to display it's contents in three columns.</p> <p>{loadposition list2} <br /><br /></p> Zentools Carousel 2013-07-03T21:21:56+00:00 2013-07-03T21:21:56+00:00 https://ediciones.usta.edu.co/index.php/features/20-features/zentools-module/71-zentools-carousel <h3>Overview</h3> <p>The Zentools carousel layout places the content of your module in a horizontal carousel. Based loosely on the core grid layout you can determine the minimum number of items to be shown in the carousel at any one time.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li>Responsive: responds to the width of your page (resize your browser to see)</li> <li>Display unlimited images from a folder, Joomla or K2 content.</li> <li>Determine the base width of the carousel item&lt;</li> <li>Determine the minimum number of items to display in a carousel at one time.</li> <li>When the page is resized the current item is returned to the visible part of the carousel.</li> <li>Based on the elastislide carousel script.</li> </ul> <div class="divider"> </div> <h2 class="headline">Carousel Demonstration</h2> <p class="subheading">The carousel below uses the zen-boxed theme and is set to display a minimum of 2 items regardless of the screensize.</p> <p>{loadposition carousel}</p> <h3>Overview</h3> <p>The Zentools carousel layout places the content of your module in a horizontal carousel. Based loosely on the core grid layout you can determine the minimum number of items to be shown in the carousel at any one time.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li>Responsive: responds to the width of your page (resize your browser to see)</li> <li>Display unlimited images from a folder, Joomla or K2 content.</li> <li>Determine the base width of the carousel item&lt;</li> <li>Determine the minimum number of items to display in a carousel at one time.</li> <li>When the page is resized the current item is returned to the visible part of the carousel.</li> <li>Based on the elastislide carousel script.</li> </ul> <div class="divider"> </div> <h2 class="headline">Carousel Demonstration</h2> <p class="subheading">The carousel below uses the zen-boxed theme and is set to display a minimum of 2 items regardless of the screensize.</p> <p>{loadposition carousel}</p> Zentools Accordion 2013-07-03T21:21:20+00:00 2013-07-03T21:21:20+00:00 https://ediciones.usta.edu.co/index.php/features/20-features/zentools-module/70-zentools-accordion <h3>Overview</h3> <p>The accordion layout is a simple collapsible accordion that uses the title of your item as the trigger to open or close the accordion. The accordion can use content from K2, Joomla or images populated from a directory.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li><span style="line-height: 1.3em;">Each item is rendered underneath the next one in a vertical list.</span></li> <li><span style="line-height: 1.3em;">Create layouts that include up to four columns.</span></li> <li><span style="line-height: 1.3em;">Use the title or category as the first item to trigger the accordion.</span></li> <li><span style="line-height: 1.3em;">Select whether to load the accordion with the first item open.</span><span style="line-height: 1.3em;"> </span></li> <li><span style="line-height: 1.3em;">Determine whether to position the icon to the left or the right of the title</span></li> <li><span style="line-height: 1.3em;">Select from a number of different icon types to set next to the title.</span></li> </ul> <div class="divider"> </div> <h3>Demonstration</h3> <h2 class="headline"><strong>Accordion default</strong></h2> <p class="subheading">The default styling for the accordion.</p> <p>{loadposition accordion}</p> <p> </p> <h2 class="headline">Accordion Boxed</h2> <p class="subheading">A subtle box styling for the accordion.</p> <p>{loadposition accordionboxed}</p> <p> </p> <h2 class="headline">Accordion Flat</h2> <p class="subheading">Simpel flat styling for the accordion.</p> <p>{loadposition accordionflat}</p> <p> </p> <h3>Overview</h3> <p>The accordion layout is a simple collapsible accordion that uses the title of your item as the trigger to open or close the accordion. The accordion can use content from K2, Joomla or images populated from a directory.</p> <div class="divider"> </div> <h3>Features</h3> <ul> <li><span style="line-height: 1.3em;">Each item is rendered underneath the next one in a vertical list.</span></li> <li><span style="line-height: 1.3em;">Create layouts that include up to four columns.</span></li> <li><span style="line-height: 1.3em;">Use the title or category as the first item to trigger the accordion.</span></li> <li><span style="line-height: 1.3em;">Select whether to load the accordion with the first item open.</span><span style="line-height: 1.3em;"> </span></li> <li><span style="line-height: 1.3em;">Determine whether to position the icon to the left or the right of the title</span></li> <li><span style="line-height: 1.3em;">Select from a number of different icon types to set next to the title.</span></li> </ul> <div class="divider"> </div> <h3>Demonstration</h3> <h2 class="headline"><strong>Accordion default</strong></h2> <p class="subheading">The default styling for the accordion.</p> <p>{loadposition accordion}</p> <p> </p> <h2 class="headline">Accordion Boxed</h2> <p class="subheading">A subtle box styling for the accordion.</p> <p>{loadposition accordionboxed}</p> <p> </p> <h2 class="headline">Accordion Flat</h2> <p class="subheading">Simpel flat styling for the accordion.</p> <p>{loadposition accordionflat}</p> <p> </p>