Blog entries related to Quintagroup activities, releases and events, written by Quintagroup team members. Blogs include overview of newly released packages for Plone, screencasts about Quintagroup products and themes customization. Summaries of Plone events organized by Quintagroup team.
Recently it was announced of the first release of a free Plone theme, designed and developed by Quintagroup: Python Reel, your Free Responsive theme for Plone 4.2.x that holds a great promise to become even more popular than well-loved Schools and SunRain, all-time favourites among Free Plone Themes.
Let’s see, if those expectations can actually live up to become true in today’s mobile-dominated web.
At first glance design-wise Python Reel gives off that animalistic vibe that is so in for 2013, presenting the graceful styling inspired by the shape of snake. But, it’s much more softer take on a serpent, with pastel colors and elegant typography Python Reel is suitable for most business/personal websites. Still, Python Reel is not so simple and gentle as it may look.
Responsive Web Design
To start off, Python Reel features Responsive Web design to present itself with grace on any device, be it a small smartphone, a tablet or widescreen HD PCs. Take a look at the website on touch phone, 7-inch tablet, iPad:
As you see, the whole content is resized and repositioned to be more device-appropriate. 2013 is considered to be a year when mobile web usage will finally overtake PC’s. It’s crucial more than ever to have your website mobile-ready. Fully responsive Python Reel satisfied all those requirements, coming also with mobile-first navigation and touch-enabled carousel.
Mobile users are often looking for immediate answers; they want the information and they want it now. Simple responsive navigation won’t do, it will just take up an entire mobile screen, without actually showing much. Python Reel has a native support for quintagroup.dropdownmenu product that transforms multi-level navigation into an elegant responsive drop-down menu, built following mobile first approach.
With a simple responsive menu you get all menu items listed at the top, which is quite messy. Mobile-first navigation looks as a select box that triggers a pop-up with the complete multi-level navigation menu.
Having a carousel slider on your Plone website is not a big deal, but making it responsive to smaller devices, meaning tablets and smartphones is a completely different story. In Python Reel just with a few clicks you can have an elegant image slider that is not only scalable, but can be positioned in the top area or just below the header.
Now, let’s look under the hood, Python Reel is powered by Compass framework built on top of Sass. So, unlike most Plone Themes this one is coded in another, cleaner fashion. CSS templates are well-structured and reusable, thus making maintenance and deep customization easier as well.
Top Area as a Focal Point
This is where themes like Python Reel come on stage. Python Reel let’s you set your header images with the logo that comes in a light and dark versions. The theme will allow you to set the colors of your navigation menu, including the text info. Write your own slogan. Instead of one picture, create a carousel and change its background to match overall color palette on your website. Fortunately, the theme is rather friendly with the user, changing colors is just a matter of changing its html number.
With such a combination of features, you can quickly create a good looking home page that looks like it was built by a professional designer.
One of my favourite features in Python Reel is the columns settings. The columns section will allow you to set up to three columns. You can have your content on the left with a portlet on the right, flip that around, have portlets on both sides, adjust their width or even remove them altogether. ContentWellPortlets extension in turn let you add portlets to any page section header, footer, content. This way Python Reel theme will display a number of page layouts that allow each page to be individually customized without additional code. This allows for quick creation of multiple page designs within the site.
Python Reel would not be mobile enough without social media to share the content and connect with your visitors on Facebook, Twitter, Linkedin; keep them up-to-date with the latest news in RSS.
Try it out
After spending several hours playing with Python Reel on plone-demo, I can say it is a pretty solid theme. Seeing Python Reel only on pics doesn’t really do it justice though. You’ll need to switch on your imagination. There is little to nothing you couldn’t customize in this theme with proper tools and knowledge. So you need to try out this theme for yourself and get a real feel of what Python Reel has to offer, how easy it’s to personalize and how great and versatile it can look.
Lastly, let’s cover support. All Plone themes are not made equal. Some, like Python Reel, are flexible and can be used for virtually any purpose. This is great, but sometimes the options can be overwhelming. As for Python Reel all customization instructions are provided in README.txt. But if there are some things you don’t fully understand or have trouble with, you can always open the ticket. Downloading for free Python Reel you get a solid product that will continue to receive updates as well as support into the future.
Get Your Plone Theme
Overall, I really like Python Reel and think this Plone theme can fit most business fields really well. It’s easy to set up and customize, plus it responds to your viewer’s device. Python Reel gives you plenty of options, but at the same time, not enough to overwhelm you. What I love most about this Plone theme in particular is how flexible it is. It can be used for websites ranging from single-column to 3 column responsive sites. This theme could be your ticket to mobile market.
You can download Python Reel from:
Wishing you every Joy and a Happy New Year!
The tendency towards building user-friendly and facilitating technologies is booming, with new methods and strategies appearing with the speed of light. We want all possible life conveniences to be at our disposal twenty four hours a day seven days a week. Internet is not a happy exception. As well as mobile phones - everyone would anyway admit that these two inventions made our lives much easier. Internet available on your cell phone - another benefit, while responsive view of your website when browsed on a mobile device - the following step towards enhancing the quality of our hasty twenty-first-century lifestyle. With responsive themes you can not only benefit from purely technical aspects of surfing the net from your mobile, but also from the aesthetic and functional ones.
Want to make your website easy to browse on a mobile device and engage more visitors? You are on the right way - not only does Quintagroup suggest responsive Plone themes, but we also can offer two of our responsive themes for free - SunRain and Schools. It means one more benefit on behalf of Quintagroup - there are not so many free responsive Plone themes, while using our design services enables you to download and implement them to your mobile website.
Apart from the usual functionality, design customization and bright palette of colors, you can stop bothering about usability of the mobile version of your website. Responsive themes enable your website to widen the list of visitors by engaging users browsing the net more and more often on their mobile devices.
Responsive approach to our themes is based on CSS3 media queries that help easily switch between different layouts in order to accommodate for different screen sizes. You won’t have to wait while your mobile device is ‘thinking’ over loading your website that was primarily designed for desktop browsing, you won’t have to zoom it to see some tiny icons or buttons (because, for example, primarily they were designed for desktop browsing). Responsive themes ensure accessibility of your content and simple mobile-oriented navigation.
So, ‘fresh up’ your website with responsive Plone themes and make it more appealing to your users.
SunRain Responsive Theme
Functional and interesting design of the free SunRain Plone Theme created by Quintagroup with two different views depending on your taste and needs - Sun and Rain - is now also available for mobile devices. Click on the screenshot to find out more about its key characteristics.
Got interested and want to download? Follow this way:
- Download from plone.org: http://plone.org/products/sunrain-plone-theme/
- Download from pypi: http://pypi.python.org/pypi/quintagroup.theme.sunrain/
- Home Page: http://skins.quintagroup.com/sunrain
Schools Responsive Theme
Adaptable and functional free Plone Theme designed by Quintagroup team has now become responsive. Click on the screenshot to find out more about its key characteristics:
Got interested and want to download? Follow this way:
- Download from plone.org: http://plone.org/products/schools-plone-skin/
- Download from pypi: http://pypi.python.org/pypi/quintagroup.theme.schools
- Home page: http://skins.quintagroup.com/schools
Quintagroup Plone Themes - SunRain and Schools Cases
If you want to see how our SunRain and Schools themes can be implemented in practice, you may browse the following websites and check presently available solutions:
- SunRain Plone Theme designed by Quintagroup: http://goo.gl/uROos
- Schools Plone Theme designed by Quintagroup: http://goo.gl/YTvae
Give It A Try!
You may also go to plone-demo.quintagroup.com and kill two birds with one stone - not only does it give you an opportunity to try working with Plone, but also deal with the themes themselves. Follow the instructions to log in as Plone administartor, then go to the ‘ploneadmin’ dropdown menu in the right upper corner, choose ‘Site Setup’ button, find ‘Diazo theme’ icon under ‘Plone Configuration’ settings and choose the theme you’re interested in. This will help you make up your mind quicker and prompt you to contact us for further details.
Quintagroup has recently launched a new version of our Plone Demo website, where you can see and feel Plone CMS at first hand.
Admin demo account can be used to log in and, thus, get the experience of a true Plone user. You will be able to add content by creating pages, folders, events; move content between site sections; manage workflow for every content item by publishing or making it private; and much more.
Apart from out-of-the-box Plone features, you can try several Plone add-ons in work. These are:
- PloneFormGen, a tool for creating/managing online forms
- Plone Carousel, a tool for creating image carousel in Plone
- collective.embedly, a tool for embedding video, images and other rich media files via providing their URL
- ContentWellPortlets, a tool for adding portlets into places other than left and right columns
- Plone Drop Down Menu, a tool for creating multi-level navigation menus
- Plone SEO, a tool for editing meta tags to enhance search engines visibility of Plone sites
Plone demo site also has Quintagroup diazo themes for Plone installed. There are 15 themes right now, they are all very different and include a bunch of theme-specific features. You can try any of the installed Plone themes right now by following the instructions on Plone Themes page. Enjoy Plone new look!
After diazo approach introduction to the Plone theming world we decided to restructure all our free themes: now they are dependent on plone.app.theming package.
The following are feature list for most popular Quintagroup free themes:
SunRain Plone Theme (quintagroup.theme.sunrain)
- Two different views: Rain and Sun
- Replaceable header image for the whole site and site sections
- Subscribe viewlet with 4 editable actions: share on Twitter & Facebook, Send this and Subscribe to RSS
- Customizable site slogan on the header area
- Blogging support (requires Products.Quills or blog.star product)
- Styles for portlet culumus (tag cloud portlet)
- 2 portlet styles for static stylish portlet: Green Item and Grey Item and special styling for links in such portlets
Schools Plone Theme (quintagroup.theme.schools)
- Styles for front page image carousel (works with Products.Carousel)
- Replaceable header image for the whole site or site sections
- Right top area reserved for the first portlet from the right column
- Customizable top area height
- Configurable columns width
- Editable color of links, links hover, and visited links
WhiteBlack Theme (quintagroup.theme.whiteblack)
- Replaceable header image for the whole site or site sections
- Configurable columns width
- Header area height depend on number of site actions
- Global navigation located above the content area between portlet columns
Other Free Plone Themes
There are also TechLight, Lite and EstateLite free diazo Plone themes that are ready-to-be-used on your Plone 4.1 site.
All our themes use Plone 4 logo that is customizable as in default Plone via ZMI portal_skins/sunburst_images/logo.png. Themes' footer is also editable as in default Plone: via portal_view_customizations/plone.footer.
We also included improved thumbnail display view (switch to Thumbnail view for this) for all themes.
All themes were tested with such popular Plone products as: Products.Carousel, Products.ContentWellPortlets, Products.LinguaPlone, and quintagroup.dropdownmenu. We added special styles to make our themes look nice with these products activated.
Themes can be installed into buildout via adding theme name into eggs section of buildout.cfg file, rerunning the buildout and restarting instance. Then activate theme via Site Setup -> Add-ons and enjoy!
Please, feel free to contact us any time with any feedback or improvement suggestion. Thank you for using our products.
SunRain theme is a free theme, initially developed for Plone 3, but now can be activated on Plone 4.0 sites.
The theme includes 2 different views: default 'Rain' and 'Sun' (can be activated via ZMI) - click the following screenshots to see full-screen images.
Theme comes with Static Stylish portlet, that allows to add specially-styled text portlets: 'Green Item' and 'Grey Item'. Apart from setting portlet background color, such portlets has portlet text of different size. This allows creating portlets with important information which will easily be noticed by site users. Static Stylish portlets also include special styling for portlet links.
The theme is tested with Portlet Cumulus that allows adding Tag Cloud portlet to Plone site.
SunRain theme has 'subscribe' viewlet integrated, that adds 4 actions 'Share on Twitter', 'Share on Facebook', 'Send this' and 'Subscribe to RSS'. You can set necessary icon links as simply as editing corresponding portal_action items in ZMI. You are also able to hide/show items that you need.
SunRain Theme uses customizable slogan and replaceable logo.
Want SunRain theme?
You can freely install and customize SunRain Plone Theme on your Plone 4 instance right away. Simply add quintagroup.theme.sunrain to eggs and zcml sections of your buildout.cfg file, rebuild it, restart your Plone site, and activate the theme via Site setup -> Add-ons.
SunRain on TalkQuintagroup
We decided to use SunRain theme on a new version of our corporate blogging site - TalkQuintagroup, that has just migrated from Plone 2.5.1 to Plone 4.0.7. The theme suits perfectly our blogging purposes because it has special blog and blog listing views styled for collective.blogstar and Products.Quills.
Collective.embedly allows to embed videos, images and other rich media to Plone by simply adding external links that are converted into embeddable content. The approach here is to use the Transform machinery to replace the URL with embed code by calling the embed.ly API.
There are more than 200 services that support embed.ly service. With collective.embedly it becomes very easy to insert content from those websites simply by proving object URL. Embedly-supported serices s include such video sharing sites as Youtube, Blip.tv, Vimeo; such audio streaming services as Grooveshark, SoundCloud, last.fm; such image/photo stocks as Flickr, and many other: GoogleMaps, Facebook, Twitter, etc.
collective.embedly: how to embed media to Plone
To embed media from any of the embedly-supported external resources to Plone - follow such instructions:
- Open edit form of the object you want to embed content into. Select some text and choose Embedly link style for it. As a result, the text will now look like linked. You should be careful here since TinyMCE makes the whole passage linked, so keep in mind that the whole passage will later be substituted with embedded media.
- Select this text again and go to Insert link dialog to insert the URL to the desired object on the external service.
- Save this page. Now when rendered, there will be "preview" from embed.ly service inserted instead of the linked text.
For more illustrative instructions - see collective.embedly documentation. You will find how-tos on embedding videos to Plone from YouTube, blip.tv, vimeo and TED.com websites there. Also see how to embed images from Flickr, how to embed map from GoogleMaps, how to embed audio from SoundCloud, and how to embed content from Facebook to Plone.
Screenshot on the right dislays how can a page with different embedly-converted content look in Plone 4. collective.embedly works in Plone 4.
Give it a try!
collective.embedly is compatible with Plone 4. It is distributed as a Python egg and can easily be installed into your buildout as other packages for Plone.
Visit the following pages to find more information about collective.embedly:
Quintagroup is pleased to announce a new quintagroup.dropdownmenu add-on for building drop-down menus on Plone sites. With quintagroup.dropdownmenu your Plone navigation tabs can become multilevel menu items.
quintagroup.dropdownmenu is a successor of qPloneDropDownMenu product, but we took different concept of creating menus as a basis for our new package. Starting from Plone 3, when portal_actions introduced CMF Action Category containers, an opportunity to build nested actions trees was opened.
While developing our new product we decided to use that portal_actions feature. Thus, quintagroup.dropdownmenu builds drop-down menu through the web from a tree of nested Category Actions and Actions within portal_actions tool. Since CMF Action Category does not behave as a regular action and it has different set of properties, we introduced convention in quintagroup.dropdownmenu that requires to have a specially named Action for each Actions Category.
Apart from building drop-down menu on the basis of portal_action items, quintagroup.dropdownmenu allows to generate it on the basis of site structure. This is governed by settings in the Drop Down Menu configlet. There you can also define whether:
- Turn on/off tabs icons display. If you enable this feature your drop-down menu will have the following look:
- Turn on/off non-folderish objects display - here you can specify whether to display non-folderish menu items (such as pages, images, files, etc.) or not;
- Turn on/off navigation & portal_actions strategy - here you can specify if drop-down menu will be built on the basis of Plone site structure, on portal_action items, or on both;
- Drop-down menu depth - here you can specify how many levels folders to list after the top level.
Give it a try
quintagroup.dropdownmenu is compatible with Plone 4 and Plone 3. It is distributed as a Python egg and can easily be installed into your buildout as other packages for Plone.
Visit the following pages to find more information about quintagroup.dropdownmenu features, usage and installation:
In this screencast you will find information about Schools Plone Theme's basic features, installation instructions and main customizations. You will learn how to manage site's carousel banners, how to use additional portlets manager, how to change top area image and logo.
New screencast about quintagroup.plonegooglesitemaps product for Plone. If compared to a Plone Google Sitemaps previous screencast, this new one covers Plone Google Sitemaps package installation on buildout-based instance for Plone 3. Also, apart from explaining creation of Content Sitemap, we added example of creating News Sitemap and showed News Sitemap peculiar features, as well as new configlet added to News Items objects for defining News Item specific features.
In this screencast we also describe how to register Plone site in Google Webmaster Tools area, how to validate it and submit Sitemap.
- Plone Google Sitemaps home page and documentation area
- Post feedback about this product in TalkQuintagroup Plone Forums Plone Google Sitemap area
- More screencasts from Quintagroup can be found in the Screencasts section.