Advise needed: using modules in template header

[muitobom]

Hi All,
As being a Contao rookie I need advise how to add modules in the header area of the site i'm busy with.

Please see the attachment. I have marked the modules with red boxes how i think they should be created.
The text in the various modules is not fixed in the graph but has to be text form navigation and custom html.

My idea is to create custom modules and place them after the header (opzegdienst logo), which is the first module top left.

any help is appreciated
thx, frank

[Medianomaly]

Hi there,

Here's a few suggestions, just based off glancing at your diagram. There may be technical reasons you have things broken up they way you do that I don't know about.

I'd put the logo and the navigation next to it directly in the header. Float one left and the other right.

Make the main navigation bar one module instead of 2 -- custom navigation if need be -- and also put it directly in the header. Clear it so it drops below the previous 2 modules.

Instead of breaking up your masthead image, it'd be better to keep it all together. You can use CSS to position your various elements how you see them in the mockup. There are so many ways to do this, and those elements can be so many things, that I can't give you specific ideas on what modules to use. But if you follow the basic principle of keeping it all together, then you only need one column, and thus can add it to your main column.

Then of course your content will also be in the main column.

You have the ability to add custom layout sections, but the more you use Contao you realize you need them less and less.

[muitobom]

Hi Brian,
thanx !

can you please explain:

Clear it so it drops below the previous 2 modules.

thx

[Medianomaly]

I just mean apply the CSS "clear: both;" to the menu so it moves below your logo.

[muitobom]

Ok thx,
I am really stuck now. I know it is quite a complicated templated, especially for a beginner... however a nice challange !

Maybe there is someone out there who is willing to give me some tips how to integrate multiple text blocks(with links to pages) in the mastgraph.

you can login in the backoffice if requiered.

thx

[Medianomaly]

You mean the part you have labeled "main column", right? I can see it peeking up from the bottom.

Lots of ways of you can do that, actually. The most straightforward is to add a left and right column to your layout (if you do that, then put the big masthead image element in the header instead). Also in your layout settings, add "articles" to the left and right columns where you define modules. Once you do that you can add articles into all 3 columns.

Another is to use the "subcolumns" extension --I haven't used this but I've seen it mentioned on the forum very recently as being very good.

Still another is to just add 3 articles (or even content elements) to your main column. Give them CSS classes or IDs, and you can create your columns using CSS.

Much of the battle is just honing your CSS skills. Contao balances very well providing a framework to help beginners while staying out of the way of experienced users.

[muitobom]

hi agian,
nope not the main, that is clear.
I meant how to place some modules on top of the mastgraph.

I need to place some texts in the for example red button. I cannot figure out how to do this.
this is why I thought breaking-up the header part in to multiple graphical segments, every segment has it's own background (by css) and every segment has its own module with own texts.

I do not understand how this can be achieved with only 1 module with the mastgraph as a background.
How to place a module with the text for the red button ?

Sorry if I cannot make myself clear,
thx, frank

[Medianomaly]

Oh, I see...

A couple of ways you can go about this. One way is...

1. Make a separate article for it -- home page main column. You can give articles a specific CSS class and/or ID in the settings. CSS it with "position: relative".

Inside that article, you'd have the following Content Elements:

- Image (for the big image)
Doesn't even have to be a background. You can absolute position and z-index the other elements to put them on top. Although there's nothing wrong with it being a background, either. Let's assume you'll do the latter.

- Hyperlink (for the red button).
I'd give this a CSS class in the settings, then use a CSS image replacement technique to create the look of the button. Give it the proper margins to space it the way you have it in the mockup.

- Headline (for the big text on the semi-transparent background)
Give this a CSS class too. The background can just be a semi-transparent repeating PNG. You can achieve the look with background, text styles, and the right padding or width and height. "Float: left" so that the icon links and can sit to the right of it.

- Text, Custom HTML, or even a Custom Navigation Module (for the iconic list of links).
If these links go to individual pages on your site -- best bet is to use the Custom Navigation module. If you add a CSS class to this module, and also have added a CSS class to each of the pages in your site structure, this will give you the ability to style this separately from your other navigation elements, and even style the individual links (in your case by adding the appropriate icon to each as a background image). "Float: right" on this one.

Hope this helps at least a little.

OK -- I gotta get back to work now. Godspeed.

[muitobom]

thanks Brian !