title

Dictionary

The layout 'Dictionary' allows you to create an alphabetically ordered list with pagination of article type 'Article, short'. Usually the list of articles are ordered by the publish date. However, in case you use the layout 'Dictionary' for the article category, all articles which are connected to this article category are ordered alphabetically, and they are appear in groups on the website, like 'A-F', 'G-K', 'L-O', 'P-S' and 'T-Z'. This website uses the layout 'Dictionary' for the FAQ.

Here a screenshot of a working system, based on the scheme 'Financial':

dictionary_2.png

 

 


title

Scheme: Flexible layout

The scheme 'Flexible layout' is, like the name says, quite flexible. You can set all colors of your choice, a lot of images and the position of the logo (left/right). The main navigation has no limits in submenu levels. The typical 'Top navigation' appears in this layout in the footer area. After you created a zone with the scheme 'Flexible layout', the public website looks like that:

flex_scheme.png

Now you can customize the colors in the zone administration:

flex_colors.png

You can customize following images in the zone administration:

  • Main image => the image for the header
  • Background image => inage for the background of the body as a tile
  • Logo => can be on the left or the right side of the website
  • Gradient, menu => a background image for the main menu bar
  • Gradient, footer => a background image for the footer
  • Decorator => the decorator of the main menu (arrow up)
  • Arrow up => image for arrow up
  • Arrow left => image for arrow left (pagination)
  • Arrow right => image for arrow right (pagination, main menu)
  • Arrow submit => image for arrow submit (search)
  • Shadow, left => shadow on the left side of the mainpage
  • Shadow, right => shadow on the right side of the mainpage

A working example of the scheme 'Flexible layout' is this website of Tiny Marbles CMS, which is customized exactly in the way how it is explained above. All boxes like the banner boxes or contact boxes appear on the right side of the layout.


title

Scheme: Horizontal tab bar

The scheme 'Horizontal tab bar' comes by default with two colors: blue and reddish-brown. The main navigation bar consists of maximum 5 horizontal tabs on the top of the website, and there is only one sublevel for the main menu available. The complete layout is not as flexible as the scheme 'Flexible layout', but with the help of the images you can set in the zone administration you are able to change the look and feel of the website completetly. After setting up a new zone with the scheme 'Horizontal tab bar', the website appears like that:

tab_scheme.png

Now you can customize the main image, the footer image and the logo for the complete website in the zone administration. Furthermore you can set an individual background image for the content area for each article category. All banner and contact boxes appear on the left side of the layout. Here you can set the images in the zone administration:

tab_edit.png

Here a link to an example of a working system based on the layout 'Horizontal tab bar', which is customized exactly in the way it is explained above.


title

Scheme: Financial

The scheme 'Financial' is not very flexible, but if you like the style, you are able to set up a very unique website. The scheme comes by default with three colors: blue, reddish-brown and blackberry.

The main idea of this scheme is to show a different 'main image' on the left upper corner of the layout depending of each article category. Furthermore you can set an icon image for each article category. It works very well with people shots (which you can purchase for instance on iStock ...). The main menu bar appears on the left side of the layout, and it is possible to show one more level for the submenu. You can set a default main image and a background image for the complete website in the zone administration. After setting up a website with the scheme 'Financial' the public website looks like that:

financial_scheme.png

In the zone administration you can customize the main image and the background image, and you can set the color. Attention: The 'main image' and the 'menu icon' can be setted individually for each article category in the article category management area.

financial_admin.png

The banner boxes and the contact boxes appear on the right side of the layout. Here you can see a working system based on scheme which was customized exactly in the way it is described above. And another example of this scheme a little bit more of individual customization (the client got a special 'blue' color).


title

Layout types

Here you see the list of all available layouts, in each case with an example of existing websites based on Tiny Marbles CMS. Click on the thumbnails of the small screenshots to get an impression how the layouts are working. Attention: the colors, pictures, graphics and logos are of course not included in Tiny Marbles CMS.

Article short
article_layout_ex7.png This layout is the default layout and the most basic one. It only can be connected to the article type 'Article, short'. Therefore you only have one HTML-editor box. When the user clicks on the article category in the navigation tree of the public website, the article is shown with the title and the content of the HTML-editor box.

 

 

Article long
article_layout_ex2.png The layout 'Article long' can only be assigned to the article type 'Article, long'. Therefore you have two HTML-editor box. When the user clicks on the article category in the navigation tree of the public website, the article is shown with the title and the content of both HTML-editor boxes underneath. Currently this type of layout is used in the website scheme 'Financial' to provide a different color for the teaser of the article and the main content of the article.

 

Article list, short
article_layout_ex9.png Basically this layout provides a list of articles with the type 'Article, short'. When clicking on this article category in the navigation tree of the public website, the related articles are shown in a list with a separator and pagination at the bottom of the list. The articles are ordered by publish date.

 

 

Article list, news
article_layout_ex1.png This layout works similar to the layout 'Article list, short', but provides a list of articles with the type 'Article, long'. When clicking on this article category in the navigation tree of the public website, the teaser (first HTML-editor box) of the related articles are shown in a list with a date, a separator and pagination at the bottom of the list. In case the second HTML-editor box has content a link in the list with 'more' appears. By clicking on the link 'more' the user can see the complete article consisting of title, first HTML-editor box, second HTML-editor box. The articles are ordered by publish date and RSS can be used. 

 

Blog layout
blog.png The layout 'Blog' works like 'Article list, long', and provides additionally the features: comments, RSS feed, social network buttons and Permalink. The administrator can choose per article layout whether the comments or social network buttons should be shown and if the comment feature should be used with reCaptcha. Furthermore it is possible to add a notification send to the article author in case a new comment is posted. The comments can be closed for each article. 

 

 

Contact
article_layout_ex8.png The layout 'Contact' is a combination of the layout 'Article short' and additional input fields like 'name', 'email' and a message box to send a message to the website administrator.

 

 

 

Appointment
article_layout_ex4.png The layout 'Appointment' is a combination of the layout 'Article short', the layout 'Contact', additional input fields like 'appointment' and the possibility to send a message with attachments (using a file upload)  to the website administrator.

 

 

Dictionary
article_layout_ex3.png This layout provides a list of articles with the type 'Article, short'. The articles are ordered alphabetically and they are sorted in groups like 'A - F', 'G - K' and so on.

 

 

 

Google Maps
article_layout_ex5.png The layout 'Google Maps' is based on the article type 'Article, long'. A Google Map is shown, which can be specified on the administration page for the complete website. Additionally a text can be written in both HTML-editor boxes of article type 'Article, long'. The on the public view part of the website map appears in the middle of the content of both HTML-editor boxes. 

 

 

Team
article_layout_ex6.png The layout uses the article type 'Article, short'. Additionally a list of images are automatically shown which are tagged as 'team' in the image library. Additionally the description of each image is shown underneath the image itself. This layout type works perfectly well to set up easily a page where you would like to present your team.