Tiki Design

Idea for generating a custom css style from a photo / logo

posts: 38 Canada

copied from:


You want a Tiki-powered site but none of the bundled themes fit with the look & feel you want for a project? You would like an easy way to generate a style? Me too!

I have a (crazy?) idea for a Tiki CSS generator. Before I explain it, please visit the StrangeBanana:

Ideal end result would be: 1- submit logo or picture, 2- a corresponding CSS is generated, 3- result can be visualized from demo site and 4- then just use the custom css on your site!

Todo list:

  1. Modify one of the current CSS (style) to have a small number (3-6) of basic colors.
  2. Turn these colors into variables, for example $background, $basecolor, $highlight, etc
  3. Generate colors from a photo / logo. There is a "Random From Image" button. So the user could try several times until he finds something pleasing. (like StrangeBanana) http://www.colr.org/
  4. Generate colors which contrast well (for text over backgound) http://www.barelyfitz.com/projects/csscolor/
  5. For cases where we need a gradient (example, calendar event importance), we could have a formula which generates them. Please see "Generating Palettes With PHP" from site above for an example. #Another possible tool: http://www.meyerweb.com/eric/tools/color-blend/

For all the images, logos, etc in Tiki, we should try to make sure they are all transparent so they look good with different backgrounds.

Am I missing anything? Any volunteers? Anyone see something similar in another CMS?


M ;-)

posts: 11
Am I missing anything? Any volunteers? Anyone see something similar in another CMS? Thanks! M ;-)

Hi marclaporte,

I hope you can do this for Tikiwiki, indeed.

I posted some ideas — from the perspective of a non-techie — in another thread. I would suggest the folllowing.

Instead of a randomized design, you should aim for targeted design. This would reduce the permutations from infinite randomness. Most likely, people would not go through so many permutations, if the choice is too random and it does not result to a desired goal, after trying another random layout.

For example, how about including some preferences checklist:

(1) Skeletal layout preference — single column; two-row single column (i.e., header, main section) three-row single column, etc.

I have seen this done manually, but one of the challenges in a websign using pure CSS, not tab tags, challenged the designers to present the same set of information using various general skeletal layout formats. At present, there seems to be some semblance of flexibility in Tikiwki, but in reality it is quite rigid. It would be a great help if you can decouple this rigidity in the Tikiwiki, with your program.

(2) Color scheme: monochromatic shades or "rainborw" choices or plain color (white, black, etc.) background. [This may require presentation of the colorwheel or better the color table.]
(3) Fonts and Size restrictions.
(4) Main background: white vs dark could target the direction of the "random choices" presented, as this will affect the color of the fonts used too.
(5) Navigations and navigations sections preferences

I know it is easier said than done, but, as the user restricts choices, there is a process of fine tuning to narrow towards the eventual page layout chosen. It would be a good idea to have a "store" system in your site so that users can store and pick from previous choices.

I do not think that is possible right now with the http://www.strangebanana.com/generator.aspx

Instead of submission of a logo, the best would be to have a logo generator — using also the scheme outlined above, and for the resulting choices in the logo creation help further narrow the choices for the main page and the footer.


Switch Theme


Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config


luci, 14:22 GMT, Tue 17 of Jan, 2017: @Bsfez: :-D
Bsfez, 09:52 GMT, Wed 11 of Jan, 2017: This is really a nice Tiki !
chibaguy, 10:32 GMT, Mon 27 of Apr, 2015: Site admins: Be careful about editing the topbar menu, which is in a small space. I had to fix an option that should be a menuSection, to prevent overflow.
Torsten, 19:44 GMT, Fri 12 of Sep, 2014: hidden functionality "; recommitted in trunk, tested and working. Documentation under way on [Link]
chibaguy, 16:45 GMT, Thu 04 of Sep, 2014: The layout template can now be changed using the "Layout" module above. :-)