Joomla Templates

Ho there.. I recently purchased the BlackBEarPro Chromatic, now I would like to integrate the joomlaworks frontpage slideshow mdule to my frontpage (in the main body). Now I actually have to asign this module a position ut unfotunately the body part of this template has no position assigned... how could I resolve the problem? As I'm not using the position "right" I tried to put it there; it showed but the layout was messed up .... I would really like to integrate this slideshow to my site.. so if you could please help me out I would really appreciate :-)

Hi,

I'm sure we can get this sorted - are you sure you don't want the slideshow published above the body in the "feature" position. This position was setup for this type of module.

If you are certain you want it in the body can you let me know if you are using 1,2 or 3 column layout? OR are you using multiple column variations on different pages? This could be tricky with the slideshow though I guess you could just assign it to one column variation/menu item.

If you can a link is always really good so we can see what's happening and tweak.

The basic code you will want to add will be to the template index.php and TemplateDetails.xml. I'll give this to you now and it may be all you need, however there are some additional options we can look at if this is not sufficient.

To index.php add this:
<jdoc:include type="modules" name="MyModuleName" style="xhtml" />

Add the above line to the following block of code after <div id="content">:

<div id="content">
<jdoc:include type="component" />
</div>

So the code looks like this:

<div id="content">
<jdoc:include type="modules" name="MyModuleName" style="xhtml" />
<jdoc:include type="component" />
</div>

Then in TemplateDetails.xml fine the area where positions are specified and add yours like I have below - you don't need to use "MyModuleName - use any name yuou like just make sure it is the same in the index.php and xml file:

<positions>
<position>MyModuleName</position>
<position>top-nav</position>
<position>left</position>
<position>search</position>
<position>right</position>
<position>feature</position>
<position>breadcrumbs</position>
<position>footer</position>
<position>top-banner-468-60</position>
</positions>

Let me know how you get on with that - the next step would be to look at wrapping that module position in <div> tags so that we can give the div some specific styling or positioning with CSS - however the above may just work for you.

Note this module position will have the width of the content area which of course changes with the flexible columns.

Cheers

Big Bear

Wow! thank you so much!! This really helped.. now the slideshow just works perfectly as it should :-)

I still do have another question though.. i do have submenus in the left module.. when you click on the upper Menu point the submenus open but they are all highlighted from start on .. is this supposed to be that way as it seems a bit confusing for the website users.... you can check it out here:

http://www.more.spako.lu

well anyway can't thank you enough for the help on the module position :-)))

Hi,
Glad that helped.
Had a look at your site and I can see what you mean about the sub-menus. I'm going to have to do some work on this as it's obviously something we've overlooked - you have thelittle white circles beside them.
It will be a day or so before I can look at this properly but will probably release an updated version of the template - will also posta fix for people who have spent time modding their design.

One last thought - you could add a line to your .css to push the footer text down a bit :-

#footer p {
padding-top:10px;
}

you can put that in anywhere. Play with the 10px value to get the text centered vertically.

Site looks great BTW.

Heya - I had a look at your site - you've applied the padding to #footer - what you want is to apply it to:

#footer p

This will target <p> tag within #footer and you won't get the footer area popping out like that.

Hi there :-) I'll try to put the code to the right place then.. not really good at this sorry :-/

thank you for your help :-) I really really appreciate!

:)

CSS seems hard but is actually really easy when you get the hang of it.

Keep asking questions when you need to - its no problem.

a <p> tag is just a paragraph tag - easy! It usually wraps around text - so an example would look like:
<p>some text</p>

You can see the <p> tags needs to have a closing tag to show where the paragraph ends - it simply has a backslash in it to show it is the closing tag, like this:
</p>

and then in your style sheet you can have a style definition for p like this:

p {
font-style:bold;
}

this would make all text wrapped in <p> tags bold!

We probably wouldn't want to apply this style because most text you enter in content items is wrapped in <p> tags and would all then be bold.

However, we can target just <p> tags within another element like your footer.

To do this we just enter the element followed by the sub-element or tag within that element - so in our case:

#footer p {
font-style:bold;
}

This targets just text wrapped in <p> tags within the footer and not all the other p tags on the page :)

So in our example:

#footer p {
padding-top:10px;

And this will give just that text a little bit of top padding to push it down and center it.

Hope that helps explain how it works - css is fun once you get the hang of it and it gives you complete control over the layout of your site!

:)