Printable View
Hi,
i'm developing some project and I need some information about how do to implement design into contao?
A) Do you do via Contao stylesheet and with default fe_pages?
or
B) Do you develope custom fe_template and create style from "ground zero"?
I would be very pleased if i can get a lot of answare, cause in the end the project is ment for you :)
Best regards.
Create custom fe_page and stylesheets from the "ground zero"
I've edit the post, so the answare should take you only 10 secound: A or B :)
Best regards,
W.
A for me
There is no A or B. It depends on what you need. Default templates generate HTML that is good for general purpose. Most designs will not require any/much change. Half of my +/- 60 Contao websites have a customized fe_template, the other half is on defaults. The thing that bugs me about the default templates is that there are some elements which are not needed, like a <div class="inside">. It comes in handy every now and again, but I don't use it most of the time.
No-one can really answer A or B, nor will any answer really help you because your specific requirements are unknown.
My best advice would be to use the default templates, but do NOT import the music_academy upon installation. Instead build your CSS from scratch.
Yes @Ruud I agree, but let say that we talk about most used technics. So there is only A or B :) My specification will be given or let me say the project will be present when I will get enought feedback from contao users.
Best regards,
W.
85 views and 2 feedback....that might be a record ?
B
A.
I import a preset list of CSS files that I use on most sites, e.g. reset (contao), gridpx (contao), forms, footer, menu-horiz.css, and then I create a site.css for global settings to the body, headings, etc. I used to have a webfonts.css as well, but with 2.10+ using variables, it's easier to keep the font statements where they need to be and use a css variable, e.g. $fontname and then you can systemwide replace the font if need be.
I have never had much problems with the default templates. Those .inside classes really come in handy when you need to add shadows and border images. Sometimes to style headings, I replace the default <h1></h1> rendering in templates with
<div class="hl"><h1></h1></div> so that the .hl class can be styled with a background image.
I also modify the nav_default.tpl and remove all spaces between[*] elements, so I can use inline-block to style them horizontally instead of using floats (this removes the 2px white spaces).
Finally you just have to make all the .image_container img { vertical-align: bottom} to remove those nasty little bottom pixels.
Also, if your gridpx isn't based on 960, you can just adjust the g1,g2,g3 styles or add custom widths in there to modify the pixels to match your design grid. I also add custom styles here like .mr0 (margin right 0) to remove right margins (10px), then you can apply them to the inner grid items, where the contao sheet adds a double gutter of 20px,
I also add a style called .mh0 (margin heading 0), to remove heading top margins on initial headings when the content of the page starts.