April 17, 2012: Update Announcement for Version 1.5.5
Along with bug fixes, improvement to dashboard speeds (due to compression), we are pleased to have rolled out some important new features in the latest update (to version 1.5.5). See below for a brief description of the features and how to use them:
Support for Facebook Open Graph Tags for Product Pages
Now when you add a link to a product page from your website to your Facebook page, Facebook will be able to automatically find the correct product name, product image, and description. The appropriate OG tags are now automatically added to the <head> of the web page.
New CSS Structure
We have made some changes to how the CSS areas are organized and named. Previously they were named: Layout, PWS, Features, Content, Editor Styles, Print, Mobile. The new CSS areas are:
| Stylesheet | Description |
|---|---|
|
CSS Foundation |
This is a place to put CSS code for a CSS foundation. CSS foundations provide a base styling framework for common elements, such as typography, grids, layouts, forms, menus, tabs, buttons, etc. Webinfuse supports Twitter's Bootstrap framework (more on that below). |
|
Webinfuse Features |
This hold the CSS code for the base styling for Webinfuse features, eg. ecommerce cart, subnavs, etc. The idea is these features come with a very basic styling, which you can override and amend if needed, in the 'skin' styles below. NOTE: previously these were not editable, and now are. However we reccomend that you do not edit these, but instead over-ride as necessary in the Content Skin stylesheet. This keeps a clean and simple way to roll out additions and changes for future features that Webinfuse provides, if this area is dedicated solely for CSS Webinfuse provides. |
|
Webinfuse skin: Layout |
This is where the 'skin' or theme related styling goes, for the layout of the page. The layout covers everything surrounding the content area of the page, such as the overall site design, the header and footer areas, and the nav menus. |
|
Webinfuse skin: Content |
This is the skin/theme related styling for the content area goes, generally this is everything between header and footer, in the content area. This usually covers things such as copy elements (paragraphs, headings), content photos, tables, etc. |
|
Responsive CSS |
This is an area to put CSS code for the responsive part of the design. Responsive design refers to the craft of using media queries to serve different CSS for different screen sizes, so that the website properly formats itself to display on all devices from large computer screens to small cell phone screens. |
|
Print Stylesheet |
This is where you put CSS code that is utilized only during print, in order to tweak the styling for the printed page (eg. omitting the nav menu). |
| CMS Editor Styles | This operates the same as before, but just separated out into a new menu. This feature allows you to edit the list of styles in the 'Styles' drop down in the editor. You can select an element and apply the style to it, which applies a particular class (which can can have styling attached to it in the above CSS sheets). |
Support for Twitter's Bootstrap
As described above we have a new stylesheet area to place a CSS foundation framework, such as Twitter's Bootstrap. Webinfuse is officially supporting Bootstrap, and will format the HTML that our features produce to be compatible with Bootstrap. Note that we have not updated all of our HTML yet - over the next couple of updates they should all be updated.
The advantages of using a CSS framework are:
- A means of HTML standardization. Bootstrap is widely used, therefore web designers will already be familiar with its usage within the Webinfuse system.
- Common content elements can be created quickly and easily, without having to do any styling. For eg. in the table above (with the stylesheets and descriptions), all we had to do was create a blank table, and apply the classes "table table-striped" - and it is automatically styled. You would simply reference Twitter's Bootstrap website to find out what the HTML and classes should be, in this case: http://twitter.github.com/bootstrap/base-css.html#tables
- Check the Twitter Bootstrap website for supported features: http://twitter.github.com/bootstrap/index.html
Custom Class for Content Pages
You can now add a custom class (or multiple classes) to content pages, in the content page settings. The class will be applied to a div which wraps the content area. Then you can target CSS to a content page (or multiple content pages) based on the class you add.
Content Editor Update
The content page editor has been updated to TinyMCE version 3.4.9. The previous version was 3.4.6, so this update contains the 3.4.7, 3.4.8 and 3.4.9 updates.
See here for feature details:
http://www.tinymce.com/develop/changelog/index.php?type=tinymce