#80: implement graphical template change

Type: FeatureItem Feature:   Tags:  
ScheduledFor:   Assigned to:   Sites:  
Priority: 0 Status: % finished: 0%  

The process of change ePortfolio and Community graphical templates.

There should be 3 kinds of systems to make it work:
  • one to write articles, add dates to the agenda, manage image galleries: personal gallery, common galleries, external galleries (Flickr...)
  • one to choose in a list of free (and others) templates and (slightly) customize them (depending on the community)
  • one to select which content goes into which part of the template

Todo

1 - The user logs into Multypass and in his home (personal area), he will see his Multypass modules selected, like: ePortfólio, email, gallery, communities. The user will select the ePorfolio option and in the next page, his ePortfolio/blog, the user have an admin panel -like Wordpress or typical CMS ones- to manage the layout, colors and design of his blog, input RSS syndication, etc..

2 - The user logs into Multypass and in his home (personal area), he will see his Multypass modules selected, like: ePortfolio, email, gallery, communities. The user will select the Communities option and in the next page, the communities page, the user will see all communities available, but first his communities, the ones he owns, followed by the communities the user is a member of, and other communities. The user needs to be owner of the community to change the template. The user will select his Community and just click in Edit, to manage the community, like template, name, tags, description... After the changes, the user saves his changes and exits.

Related Subjects

Tasks

  1. make models of templates like atached
  2. make each model block/item available at 5 colors minimun
  3. *manageable borders(with/without), width of the border, background color, or even a choice of pre-defined customizations, Type of corners (round, square...

Details and Comments

Raphael said:

About templates, it's an important point, since we want to make a platform:
  • on which people feel at home
  • for people wanting a custom design
  • for non-technical persons (Ubuntu would say: for "human beings" wink but with a lot of power.

So I propose the following:
  • visual design will be based on CSS
  • there will be several choices for templates (we think in each model have 5 diferent colors green, blue, orange yellow, grey, andh a mix of both)
  • people will choose:
    • 1st: the template
    • 2nd: what goes in the defined areas

Since I'm not a webdesign man, I draw some schemes in Inkscape to have a visual feel but no real-life example. I attach you these designs.

Let's say that a visitor chooses the design in templates_scheme.png (the one with 10 areas). He will have to choose for each area: - a specific design for the block/box (when possible): none, borders, round corners... - the most important: criteria for displaying content, which means "what shall we put in this box?":
  • tags (everybody's ones, the user's ones, tagged articles...)
  • directory location (where to find this item(s) in the platform-wide directory or in the user's personal directory)
  • type of articles (simple articles, reviews, directory, image galleries...)
  • number of items (1 for a single article/image..., several for a list)
  • ordered contents (by date, by title, number of views, last commented...)
  • displayed fields (title, subtitle...)
  • filters for each field (eg.: a filter to remove links, a filter to display only the first 50 characters...)

Example with templates_scheme.png: Area #1:
  • tags: home_page
  • directory location: personal_pictures/layout_images/
  • type of articles: image
  • number of items: 1
  • order: [no order]
  • displayed fields: image
  • filters for each field: [no filter]

Area #2:
  • tags: [none]
  • directory location: personal_articles/
  • type of articles: sub-directories listing
  • number of items: All entries
  • order: [no order]
  • displayed fields: title + link to the directory entry
  • filters for each field: [no filter]

Area #3:
  • tags: home_page
  • directory location: personal_articles/ (and subdirectories)
  • type of articles: simple article
  • number of items: 1
  • order: [no order]
  • displayed fields: title, subtitle, logo, text
  • filters for each field: text is filtered by function strip_links (to remove hyperlinks), by function strip_images (to remove images) and by function "intro" (so that only 150 first characters are displayed)

Area #4:
  • tags: [none]
  • directory location: [none]
  • type of articles: tag cloud
  • number of items: 30
  • order: [no order]
  • displayed fields: title (with link to the
  • filters for each field: [no filter]

Area #5:
  • tags: home_page
  • directory location: personal_pictures/photos
  • type of articles: image
  • number of items: 1
  • order: by date (reverse)
  • displayed fields: image
  • filters for each field: image is filtered by make_thumbnail

Area #6:
  • tags: [none]
  • directory location: personal_articles (and subdirectories)
  • type of articles: simple articles
  • number of items: 5
  • order: by views (most viewed first)
  • displayed fields: title, # of views
  • filters for each field: [no filter]

Area #7: Area #8: ...I let you imagine wink

Area #9:
  • tags:
  • directory location: personal_pictures/layout_images/
  • type of articles:
  • number of items:
  • order:
  • displayed fields:
  • filters for each field:

Area #10:
  • tags: home_page, footer
  • directory location: personal_content/
  • type of articles: simple article
  • number of items: 1
  • order: [no order]
  • displayed fields: text
  • filters for each field: [no filter]

At a first glance, it could seem complicated, but in any case, thinking about what will appear "somewhere" (in a page) asks questions to which the answers are the criteria I give... This models allows everybody to concentrate

To have good performances, I suggest that users make their templates (one for each kind of information on their site) then the templates are compiled into an optimised (more "low-level") form. Generated pages (or parts of pages, like menus...) can be cached so that visits imply no too heavy computations.

If you find it a good base for the work on templates, just put it in the wiki!

Error: can't fetch image from 'http://www.colivre.coop.br/bin/viewfile/Multypass/AdoptingNewTemplate': 500 Can't connect to www.colivre.coop.br:80 (Bad hostname)

Error: can't fetch image from 'http://www.colivre.coop.br/bin/viewfile/Multypass/AdoptingNewTemplate': 500 Can't connect to www.colivre.coop.br:80 (Bad hostname)

Error: can't fetch image from 'http://www.colivre.coop.br/bin/viewfile/Multypass/AdoptingNewTemplate': 500 Can't connect to www.colivre.coop.br:80 (Bad hostname)

Error: can't fetch image from 'http://www.colivre.coop.br/bin/viewfile/Multypass/AdoptingNewTemplate': 500 Can't connect to www.colivre.coop.br:80 (Bad hostname)
Add comment
You need to login to be able to comment.
 

Topic revision: r10 - 22 May 2015, UnknownUser

irc Talk with Devs Now!

%IF{"$'WIKINAME'!='WikiGuest'" then="

♥ I Care

%DBQUERY{"(topic='^ActionItem[0-9]+') AND whocares=~'WikiGuest' AND Status!='Done' AND Status!='Rejected'" format=" $formfield(Title)" separator="$n---$n" }%
Filter ♥ AIs
"}%

 
Translations: English
Search on Docs:
   
ActionItem Search:

Copyright © 2007-2018 by the Noosfero contributors
Colivre - Cooperativa de Tecnologias Livres