Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Content and user types layout

1,283 views

Published on

Rubedo CMS : designing content and user layouts.
For each of your content types, you can create your own custom content layout by selecting the fields (title, summary, date, image…) you want to be displayed. To go any further, you can decide whether each element will be displayed or not for each device (desktop, tablet or smartphone).
For each of your content types, you can create your own custom content layout by selecting the fields (title, summary, date, image…) you want to be displayed. To go any further, you can decide whether each element will be displayed or not for each device (desktop, tablet or smartphone).

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Content and user types layout

  1. 1. Content layouts 12/11/2013 Content and User Types Layout www.rubedo-project.org Rubedo 3.x
  2. 2. Rubedo CMS : Designing content and user layouts www.rubedo-project.org You can create custom content and user layouts. Thanks to these layouts, the detail view of your contents/users can be modified in the front-end display. – For each of your Content types and User types, you can create your own custom layout by selecting the fields (title, summary, date, image…) you want to be displayed. To go any further, you can decide whether each element will be displayed or not for each device (large desktop, desktop, tablet or smartphone).
  3. 3. Rubedo CMS : Designing content and user layouts www.rubedo-project.org You can create custom content and user layouts. Thanks to these layouts, the detail view of your contents/users can be modified in the front-end display. – For each of your Content types and User types, you can create your own custom layout by selecting the fields (title, summary, date, image…) you want to be displayed. To go any further, you can decide whether each element will be displayed or not for each device (large desktop, desktop, tablet or smartphone).
  4. 4. Rubedo CMS : Designing content and user layouts www.rubedo-project.org You can create custom content and user layouts. Thanks to these layouts, the detail view of your contents/users can be modified in the front-end display. – For each of your Content types and User types, you can create your own custom layout by selecting the fields (title, summary, date, image…) you want to be displayed. To go any further, you can decide whether each element will be displayed or not for each device (large desktop, desktop, tablet or smartphone).
  5. 5. Rubedo CMS : Designing content and user layouts www.rubedo-project.org You can create custom content and user layouts. Thanks to these layouts, the detail view of your contents/users can be modified in the front-end display. – For each of your Content types and User types, you can create your own custom layout by selecting the fields (title, summary, date, image…) you want to be displayed. To go any further, you can decide whether each element will be displayed or not for each device (large desktop, desktop, tablet or smartphone).
  6. 6. Step 2 : Select a content type Each content has its own fields (title, summary, date, image, ...) In this example, the « Wiki » content type has the following fields : • Title • Summary • Text • Image • Location
  7. 7. Step 2 : Select on content type On the front-end, the different fields of the « wiki » content are displayed : Title Location Image Text
  8. 8. Step 2 : Select a content type When you create a new content type, the fields are displayed by default one below another. Our new « Wiki » content type does not have a specific layout yet.
  9. 9. Step 2 : Select a content type In the Content Types application, once the « Wiki » content type is selected, click on the « Layout » tab. « Layouts » tab lets you create new custom layouts.
  10. 10. Step 3 : Create a new layout 1. Click on « Add » 2. Give your new layout a name 1 – Add a new layout 2 – Give it a name and click on « Create new layout »
  11. 11. Step 3 : Create a new layout Once you have given a name to your layout, the fields of your content type are displayed as a list. Name of the new layout List of the fields of your content type
  12. 12. Step 3 : Create a new layout http://www.rubedo-project.org Creating a new layout is based on the same principles as creating a new page or a new page mask : 1. You can add rows to define areas of your layout. 2. You can divide rows into columns. 3. You can add fields into columns. Properties on rows and columns let you define on which devices (desktop, tablet, smartphone) these elements will be displayed. Width of rows are in percentage for responsive web design, based on a 12- column grid (« span »). « Offset » corresponds to a space left blank.
  13. 13. Step 3 : Create a new layout http://www.rubedo-project.org Select the main frame Frame
  14. 14. Step 3 : Create a new layout http://www.rubedo-project.org Add new rows, and then new columns inside rows. Specify span, offset and visibility Column
  15. 15. Step 3 : Create a new layout Once you have divided your layout into rows and columns, you can assign one field or more in each column, by selecting it thanks to the combobox.
  16. 16. Step 3 : Create a new layout http://www.rubedo-project.org The layout must now be activated and saved. Activate the layout Save
  17. 17. Step 4 : Check your new layout on the front-end http://www.rubedo-project.org The new layout should now be taken into account : Title Summary Adress Text Image
  18. 18. Create new content layouts http://www.rubedo-project.org To sum up : – A custom detail layout can be created for each content type. – Within multilingual websites, layout applies for all languages. – Activated layouts are applied in real time in the front-end. You can also add a custom template. Other tutorials are available on www.rubedo-project.org
  19. 19. http://www.rubedo-project.org Documentation and tutorials : docs.rubedo-project.org @Rubedo_project

×