Articles

Gutensite Article

Like many other hosted website builders, <a href="http://www.gutensite.com" target="_blank"> Gutensite </a>  allows you to easily create a simple and beautiful website in as little time as it takes you to figure out what you want to say. And because of its robust framework, advanced functionality, and ability to customize anything , Gutensite has become a refuge for non-profit and business websites that realize they need more than just a pretty online brochure and contact form.
If you want to stand out from the crowd and make sure your website brings you value, you need to optimize the design and functionality of your website to help you achieve your unique conversion goals . A good website should empower your clients/members and integrate with your existing business processes. On the Gutensite platform, you can work with directly their team or a third party designer/developer to customize your design and functionality. Or if you are ambitious you can customize the design the yourself and this tutorial will show you how.
Gutensite provides many <a href="http://www.gutensite.com/Free-Website-Designs" target="_blank"> beautiful, free design templates </a>  to get you started, so you can either tweak the template that is closest to what you want, or start completely from scratch. If you are a designer (or just adventurous), you can access the design files to work directly with the HTML, CSS and Javascript. Gutensite also uses the <a href="http://www.smarty.net/docsv2/en/" target="_blank"> Smarty templating engine </a>  to introduce logic and system variables into your HTML, so it’s very powerful.
<h2>Getting Started</h2>
From your Admin home page in the main “Content” tab, click on the “Design” icon and in the left sidebar, click on “ Design Files ”.
<img src="https://cmscritic.com/ms-content/uploads/2023/08/01_-_gutensite_design_files_folder_structure700x0.png" alt="Gutensite folder structure for editing your design files." />
On this page you will see the structure of your website, with folders related to whatever content types you have activated on your site. Gutensite has core system files that all websites use, but it will first look in your template to see if a “better” version of the file exists and use that instead. And if you customize a file personally for your website, the system will use that file instead of the template or core file. The folder view shows all these files as if they were “stacked” on top of each other so you can only see the “best” version. Colors are used to indicate which version your site is using:
<ul>
<li>
 black : the default core system files.
</li>
<li>
 red : files that have been customized for the template you are using.
</li>
<li>
 green : files that you have customized for yourself.
</li>
</ul>
Whenever you edit a file, the CMS makes a copy of the core or template version and puts it in your custom files. You can easily restore the original if you make a mistake.
<h2>Which Files to Edit</h2>
Gutensite uses common file extensions to help you figure out which file to edit:
<ul>
<li> HTML/Smarty (layout and elements): .tpl</li>
<li> CSS (styling): .css</li>
<li> Javascript (interactivity): .js</li>
</ul>
Each content type has it's own folder (e.g. /blog/), but all the generic website files are located in the /site/ folder. Below are some common files you may want to edit:
<ul>
<li>
<h3> Layout </h3>
<ul>
<li> Home Page: /site/site.home.tpl</li>
<li> Secondary Pages Shell: /site/site.shell.tpl
<ul>
<li>This is the shell that surrounds all the secondary pages content.</li>
<li>You can create custom shells for special landing pages or sections if you want, e.g. /site/site.shell_Store.tpl and then in the CMS you can assign a single page or an entire section of the site to use that alternative shell.</li>
</ul>
</li>
<li> Header: /site/includes/site.header.tpl
<ul>
<li>Usually a reusable header file is included in the home page and shell.</li>
</ul>
</li>
<li> Footer: /site/includes/site.footer.tpl
<ul>
<li>Usually a reusable footer file is included in the home page and shell.</li>
</ul>
</li>
<li> Modules: /site/includes/site.module.*.tpl
<ul>
<li>These are the templates for various promo modules you may include on your home page or other pages.</li>
</ul>
</li>
<li> Content Type Layouts: e.g. /blog/blog.home.tpl or /blog/blog.details.tpl
<ul>
<li>Any special content types will have their own folder and generally consist of a list page (multiple records on a page) and a details page (single record on a page).</li>
</ul>
</li>
</ul>
</li>
<li>
<h3> Style </h3>
<ul>
<li> Site Design Styles: /site/css/site.css
<ul>
<li>These styles will load on every page of the site.</li>
</ul>
</li>
<li> Core Styles: /site/css/core.css
<ul>
<li>These styles will also load on every page of the site, and include some default styles that the CMS will use. It can be customized or completely gutted and replaced with your favorite CSS framework (e.g. Twitter Bootstrap). But be aware that you probably want to keep some of the default classes for errors and other system generated content.</li>
</ul>
</li>
<li> Content Type Styles: e.g. /blog/css/blog.css and /blog/css/core.css
<ul>
<li>Any special content types (e.g. blog) has it’s own css that you can customize, which works just like the general /site/ content type.</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2>Example 1 – Changing Font and Color</h2>
Let’s say we want to change the default font and theme color of our template. The first thing we should do is go to our website and use your browser’s developer tools to “inspect element” that has the color we want to change in order to find the CSS that is styling these elements. Every browser has a developer mode (which you need to enable) that will let you do this. If you use Chrome, <a href="https://developers.google.com/chrome-developer-tools/"> read this tutorial explaining how to inspect elements </a> (it will be similar for other browsers).
<img src="https://cmscritic.com/ms-content/uploads/2023/08/02_-_find_correct_element700x0.png" alt="Find the correct element on the page that has the style you want to change." />
Use the inspector to click through the DOM to find the element that has the styles. You can change the values directly in the inspector to test your new styles live.
<img src="https://cmscritic.com/ms-content/uploads/2023/08/04_-_editing_the_color700x0.png" alt="Edit the background color of the element on the page." />
The inspector will also tell you the file where the css is located (e.g. site.css) and the class or id name controlling the style for that element.
<img src="https://cmscritic.com/ms-content/uploads/2023/08/03_-_finding_the_class.png" alt="Find the relevant CSS class that controls the styles for the element." />
Once you know the file and class, you can find and edit the design file in the Admin and make the change. In this case, we’ll edit the .home_main_content class in / site/css/site.css and change the background-color from #FF7A4D to #E2D75A .
<img src="https://cmscritic.com/ms-content/uploads/2023/08/05_-_edit_the_site_css700x0.png" alt="Edit the site CSS and change the background color." />
You may want to search the rest of the CSS for the original value and swap out your new value so that the new color is used everywhere the old color was used.
To change the font, repeat the process to find the font for a specific element. Or if you want to change the font for the entire site, edit the same /site/css/site.css file and at the top you’ll see the body element styles, i.e. change: “font-family” to some acceptable font style. We recommend using <a href="http://www.google.com/fonts/"> Google Fonts </a> for free and easy fonts to include beyond the basic web fonts. You can use @import method to add the font to the top of your CSS and <a href="https://developers.google.com/fonts/docs/getting_started?hl=en"> follow their tutorial for more instructions </a> .
<img src="https://cmscritic.com/ms-content/uploads/2023/08/06_-_edit_font_family700x0.png" alt="Edit the site CSS and change the font family to a font included with @import." />
<h2>Example 2 – Add Variables or Logic to your Templates</h2>
Let’s say you want to add a custom button to the Shell that goes back to the last page the user was on, but if they visited the page directly you want the button to go back to a default page.
So first you want to edit the template file, e.g. /site/site.shell.tpl and add the element to the html. You can find a list of available variables by looking at the <a href="http://gutensite.com/gutensite/v/2.0/docs/1.0/installs/Standard-Variables"> Gutensite 1.0 docs variable page </a> . You can also add {debug} to the template and then view your page in report mode (http://www.domain.com?report=gutensite) which will make Smarty show you all the variables that are available (in a popup window).
The variable we want is {$PAGE_TRACKING.last} (which shows the url for the last visited page). After we know the variable, we just just use Smarty to add some logic around a link to go back to the previous page. Something like this:
<pre>{* Add Button to Go to Last Page *}{if !empty($PAGE_TRACKING.last)} &lt;a href="{$PAGE_TRACKING.last}"&gt;Go Back&lt;/a&gt;{else} &lt;a	href="/"&gt;Go Home&lt;/a&gt;{/if}</pre>
<img src="https://cmscritic.com/ms-content/uploads/2023/08/07_-_add_logic_button_to_go_back700x0.png" alt="Add Smarty Logic to the HTML template to make a button that goes to the last page." />
This is just a very basic introduction, but Gutensite's open framework allows you to literally customize anything within your skill level. To learn more, read through <a href="http://www.gutensite.com/How-To-Customize-The-Website-Design-Files"> Gutensite's advanced design editing documentation </a> or call their customer service and ask for help. Happy coding!

How to Customize Your Own Website Design on Gutensite

mike-johnston

<a href="http://www.gutensite.com/?refcode=CMSCRITIC" target="_blank"> Gutensite</a> has now implemented Stripe, the popular payment gateway, its its eCommerce offering.
With features focused on elegant and professional presentation, Gutensite is a website builder which fits the corporate website mould perfectly. You can read more about it in our full <a href="/gutensite-review/" target="_blank">review of Gutensite</a>.
For existing Gutensite users making use of the platform's eCommerce features, will be please to know that Stripe is now integrated with the Gutensite Pro and Premium package.
<a href="http://www.gutensite.com/?refcode=CMSCRITIC"><img src="https://cmscritic.com/ms-content/uploads/2023/08/gutensite_logo-1.png" style="max-width:98px" /></a>
<h2>A More flexible &amp; Cost Effective Option</h2>
Gutensite eCommerce users were previously having to deal with other ways of accepting card payments.
But now, with Stripe, payment gateway setup is instant and free, and there are no monthly costs. The processing rate is a flat 2.9% + $0.30 per transaction, which happens to also be cheaper than most traditional bank merchant accounts.
Stripe also has web and mobile payment options for accepting credit cards as a mobile point of sale tool, and can power marketplaces to facilitate payment between buyers and sellers.
So if you want to sell your products, or accept donations for your non-profit using Gutensite, your life just became a lot easier. If you have a Gutensite Pro account, the store is already included for free, or you can add on the store to your existing site. Then create an account at Stripe, and copy/paste your secret key into your store settings.
For more information on this new Gutensite-Stripe integration, <a href="http://www.gutensite.com/Stripe-Integration-For-Instant-Affordable-Credit-Card-Processing-In-Store" target="_blank">check out the Gutensite announcement</a>.
Furthermore, be sure to check out <a href="/products/gutensite/" target="_blank">Gutensite via our CMS Directory</a>.

Gutensite Announces Stripe Integration

If you've been waiting to cast your vote for your favorites in the People's Choice Awards, now is the time to do so.Voting has officially opened and you may now <a href="/cms-critic-awards/">cast your vote</a>! So head on over to our <a href="/cms-critic-awards/">awards page</a> and submit your favorites.If you are in the running, we have created a handy badge you can use to spur interest...Simply download the graphic (shown below) and link it to <a href="/cms-critic-awards/">https://www.cmscritic.com/critics-choice-cms-awards/</a>.For those who missed it, here are the nominees in each category:<h3><a href="/cms-critic-awards/">Best Open Source CMS</a></h3>2013 Nominees ( <a href="/announcing-the-peoples-choice-for-best-open-source-cms-nominees">read the announcement </a>):<ol><li><a target="_blank" href="https://modx.com/">MODx</a></li><li><a target="_blank" href="https://www.dnnsoftware.com/">DNN Platform</a></li><li><a href="/products/liferay">Liferay</a></li><li><a href="/products/processwire/">Processwire</a></li><li><a target="_blank" href="https://e107.org/">e107</a></li></ol><h3><a href="/cms-critic-awards/">Best Free CMS</a></h3>2013 Nominees ( <a href="/announcing-the-peoples-choice-for-best-free-cms-nominees/">read the announcement </a>):<ol><li><a target="_blank" href="https://processwire.com/">Processwire</a></li><li><a target="_blank" href="https://tiki.org/HomePage">Tiki</a></li><li><a href="/products/concrete-cms">Concrete5</a></li><li><a href="/products/wordpress/">WordPress</a></li><li><a href="/products/umbraco/">Umbraco</a></li></ol><h3><a href="/cms-critic-awards/">Best Small to Midsize Business CMS</a></h3>2013 Nominees ( <a href="/announcing-the-people-s-choice-for-best-small-to-midsize-business-cms-nominees/">read the announcement </a>):<ol><li>Adobe Business Catalyst</li><li><a href="/products/ingeniux/">Ingeniux</a></li><li><a href="/products/kentico/">Kentico</a></li><li><a target="_blank" href="https://www.percussion.com/">Percussion</a></li><li><a target="_blank" href="https://www.progress.com/sitefinity-cms">Sitefinity</a></li></ol><h3><a href="/cms-critic-awards/">Best Enterprise CMS</a></h3>2013 Nominees ( <a href="/announcing-the-peoples-choice-for-best-enterprise-cms-nominees/">read the announcement </a>):<ol><li><a target="_blank" href="http://www.adobe.com/solutions/web-experience-management.html">Adobe Experience Manager</a></li><li><a target="_blank" href="https://www.hannonhill.com/products/cascade-cms/index.html">Cascade Server</a></li><li><a target="_blank" href="https://www.optimizely.com/">EpiServer</a></li><li><a href="/products/liferay/">Liferay</a></li><li><a href="/products/sitecore/">Sitecore</a></li></ol><h3><a href="/cms-critic-awards/">Best eCommerce Solution </a> (New for 2013!)</h3>2013 Nominees ( <a href="/announcing-the-people-s-choice-for-best-ecommerce-solution-nominees/">read the announcement </a>):<ol><li>3dcart</li><li>Aspxcommerce</li><li><a href="/products/bigcommerce/">BigCommerce</a></li><li><a target="_blank" href="https://business.adobe.com/products/magento/magento-commerce.html">Magento</a></li><li><a href="/products/shopify/">Shopify</a></li></ol><h3><a href="/cms-critic-awards/">Best Website Builder</a></h3>2013 Nominees ( <a href="/announcing-the-people-s-choice-for-best-website-builder-nominees/">read the announcement </a>):<ol><li>Adobe Business Catalyst</li><li><a target="_blank" href="https://www.jimdo.com/">Jimdo</a></li><li><a href="/products/squarespace/">Squarespace</a></li><li><a target="_blank" href="https://www.ucoz.com/">UCoz</a></li><li><a target="_blank" href="https://www.webydo.com/">Webydo</a></li></ol><h3><a href="/cms-critic-awards/">Best Forum Solution </a> (New for 2013!)</h3>2013 Nominees ( <a href="/announcing-the-peoples-choice-for-best-forum-solution-nominees">read the announcement </a>):<ol><li><a target="_blank" href="http://vanillaforums.org/">Vanilla Forums</a></li><li><a target="_blank" href="http://nodebb.org/">NodeBB</a></li><li><a target="_blank" href="http://www.simplemachines.org/">Simple Machines Forum</a></li><li><a target="_blank" href="https://www.vbulletin.com/">VBulletin</a></li><li><a target="_blank" href="http://www.invisionpower.com/">Invision Power Board (IPBoard)</a></li></ol><h3><a href="/cms-critic-awards/">Best Social Networking Solution</a></h3>2013 Nominees ( <a href="/announcing-the-people-s-choice-for-best-social-networking-solution-nominees/">read the announcement </a>):<ol><li><a target="_blank" href="https://www.dnnsoftware.com/products/evoq-engage">Evoq Social</a></li><li><a target="_blank" href="https://www.phpfox.com/">PHPFox</a></li><li><a target="_blank" href="https://www.oxwall.com/">Oxwall</a></li><li><a target="_blank" href="http://www.socialcore.com">SocialCore</a></li><li><a target="_blank" href="https://socialengine.com/">Social Engine</a></li></ol><h3><a href="/cms-critic-awards/">Best Hosted/Cloud CMS </a> (New for 2013!)</h3><ol><li><a target="_blank" href="http://acquia.com/products-services/acquia-cloud">Acquia Cloud</a></li><li><a target="_blank" href="https://agilitycms.com/">Agility CMS</a></li><li><a target="_blank" href="https://www.paperthin.com/products/commonspot-cms.cfm">CommonSpot</a></li><li>Gutensite</li></ol>Best of luck to all who are in the running!

It's Official! Voting is Now Open for the People's Choice Awards!

Welcome to the July edition of our new monthly recommendations posts. This edition focuses on recommending a number of products based on the types of requests we've seen come through from companies and individuals in the market for a CMS. Hopefully, you will find the right product for your needs by reviewing these recommendations lists.
Of course, should you find yourself needing additional assistance, you can <a href="https://www.cmscritic.com/contact/">contact us</a> and we'll be happy to provide you some consulting for a low hourly rate, or, if finances are a problem, comment here and we'll do our best to respond.
On with this month's edition….
I receive a lot of questions from people who are looking for an easier way to manage their existing web pages and are interested in adding them to a CMS. Some of the main reasons for wanting to do this are:
Rest assured there are many solutions on the market that can help you accomplish this goal. Today, we're going to take the time to introduce you to some of these solutions.
There are numerous systems that are available for the integration of existing websites that were designed before CMS' started to become more and more popular. One of the best solutions to really take this to the next level, in our opinion, is <a href="https://www.cmscritic.com/surreal-cms" target="_blank">Surreal CMS</a>. Surreal offers what we feel is one of the easiest and painless ways of integrating multiple sites into one simple and easy-to-use CMS interface that we've seen to date.
Instances when you would use this type of CMS:
<ol>
<li>You would like to hand off the maintenance of the website to someone with little or no HTML knowledge or background.</li>
<li>You would like to add some additional security to your site by making it more manageable from a centralized interface with usernames and passwords.</li>
<li>You find it frustrating and more difficult than you feel it should be to add content to your site quickly and easily.</li>
<li>You have clients that have, or you have, multiple websites that need to be integrated into a single CMS.</li>
</ol>
SurrealCMS does this all, with ease and with a nice interface that will make your clients and you smile.
Don't believe us? Check out this video showcasing how simple it really is:
Interested? The basic package is free, can't beat that with a stick. Check it out at the <a href="https://www.surrealcms.com/">Surreal CMS</a> website.
The second most common question we've been getting a lot of lately has gone a little something like this:
I need a system that makes it easy for me, as a non-designer, to really come up with something special and unique for my website. I want to be able to do this myself or with very little training. I would also like something that takes care of the whole SEO thing for me and last but not least, I want it hosted (SaaS – Software as a service).
Fortunately, there are plenty of solutions out there that fit this bill. Unfortunately, they aren't always obvious to people, so let's make a list shall we?
In order of my personal preference:
<ol>
<li>Squarespace – recommended by many an SEO expert, Squarespace has probably one of the nicest and most feature-rich platforms for designing a website, period. It contends with some of the more prominent CMS platforms that cost far more and it has built-in (and nice) analytics. You can try it for free at their website.  Did you think we'd make you learn about it all by yourself? Heck no, we went ahead and did a review just for you. You can check it out here: <a href="/squarespace-review-the-long-awaited-commerce-solution/">Squarespace Review</a></li>
<li>Gutensite – Gutensite, like Squarespace, takes the complication out of setting up a CMS. It's a beautiful system with a ton of power. Its only fault is that there is so much you can do that it can get a little bit overwhelming. This, however, also makes it quite powerful and because we love you so much, we reviewed it to: <a href="/meet-gutensite-a-platform-for-creating-beautiful-and-powerful-business-websites/">Gutensite Review</a>.</li>
<li>LightCMS – LightCMS has slightly fewer options than the above two but wins big points for customer service. They have an amazing response time and a system that is not at all overwhelmed with features. It's easy to use, cost-efficient, and generally pretty. You can check it out at <a href="http://www.speaklight.com">LightCMS</a> (we haven't got around to reviewing this one yet, sorry!)</li>
</ol>
Ok. That takes care of the most common questions we received for June 2010. Please add to the mix in the comments below and we'll answer your questions there and who knows, we may even add them to next month's edition.
As always, Happy CMS'ing.
The CMS Critic Team.

CMS Critic Recommends... - July Edition

A new category in this year's awards is the People's Choice for Best Hosted / Cloud CMS. This new award was designed to recognize those vendors that offer primarily SaaS (Software as a Service) Content Management Systems.
Here are the nominees for this year:
<h3>Acquia Cloud</h3>
Acquia's open cloud platform delivers scalability, security, and high performance for your Drupal sites. Acquia Cloud is the only solution that helps everyone from professional developers to large enterprises achieve success in Drupal application lifecycle management.
<a href="http://acquia.com/products-services/acquia-cloud">Learn More.</a>
<h3>Agility CMS</h3>
Agility helps media companies and brands maximize the value of their online content. Their content management system and solutions are geared to improve profitability of the online channel by increasing traffic, boosting advertising revenue, and promoting conversions while decreasing the time and cost of keeping content up to date. Their software is designed with the entire production team in mind offering a fresh and easy solution for content management across the board.
<a href="/products/agility-cms/">Learn More.</a>
<h3>Gutensite</h3>
Gutensite would be a great platform for a wide range of websites, from simple brochure sites to enterprise, mission-critical websites that need advanced customization. It has the cost advantages and the simplicity of a shared hosting website builder, but it's a platform that can grow with you, because like an open-source CMS literally anything can be customized. Gutensite for those that value good design and need customer support or a dedicated webmaster.
<a href="/products/gutensite/">Learn more.</a>
<h3>CommonSpot</h3>
PaperThin's web content management system CommonSpot is designed to specifically address the requirements of web content management, web experience management, brand management, social media management, document management, and community management while satisfying the needs of digital marketers and business users at every technical level. CommonSpot is a complete web content management solution that helps you publish content instantly, and intelligently.
<a href="/products/commonspot/">Learn more.</a>
Best of luck to all who were nominated and see you at the voting stage September 1, 2013!

Announcing the People's Choice for Best Hosted / Cloud CMS Nominees!

CMS Summit 26

Find out at CMS Summit 26, May 12 - 13 in Frankfurt, Germany

What's ahead for CMS in the agentic era?

#ffffff

Explore a wide range of informative articles on Gutensite, insights, and industry updates. Stay informed and ahead of the curve with our diverse collection of news and posts covering the latest trends and developments in the industry