Enabling sections with dark-bottom seems not working

Hello,

I am trying to build the frontpage effect of the demo site.
That one where different sections are shown in white and black background and divided by diagonal areas.

I read some older topics related to this issue and come to understand to configure the template as follows:
- put some modules in positions bottom1, bottom2, ...
- look for the IDs of that moduls
- add rules to template config -> features -> Fuffixes for pages with this IDs: e.G. 102=frontpage dark-bottom section-nav

But nothing happens to change on my site: [url]alpha.dertanzball.de[/url]
When I look at the generated source code I can see the different sections in html - good so far.

There must be something I am missing. Do I have to install further components or is a specific type of module needed?

I really need some help here

I can't even look for the explanation site anymore because the demo site of music state template won't open for me anymore.
Everytime I try to open the site my brother tries to load it for a while and then the following message is shown:
"You are a spammer, hacker or an otherwise bad person."
I am nothing like this. I am a paying customer :-/

Try adding :
ItemID/Option: 479
Suffix: frontpage dark-bottom section-nav

if you have troubled or it isnt working send me your backend and I can take a look

Hey devsmi

Thanks for your answer but the id doesn't work - i would have guessed it because it's not used by any module.
To be clear I didn't install the testing contents and now I am trying to do this by myself.

The attached screenshot shows what I entered into template configuration ("features").
The IDs shown are the IDs of the modules listed on the frontpage - taken out of ID column in modules list.

Is that the correct way to do this?

The site is available at http://alpha.dertanzball.de
If that information doesn't give the needed hint to anyone I gladly send you the data for ACP.

Could you send me backend so I can look at the site. Adding the id I gave you shoul work

Ok, so after a very quick help from devsmi - thanks a lot! - I got the effect working on my site.

But there are some questions about how this frontpage features works that I want to share with everyone.

1. How do I know what specific ID my frontpage has? Is it the same for every new joomla installation?

2. Does it matter in what module position the different frontpage modules are?

3. Are there any further preferences one has to check?

4. The dark images displayed between the sections - is there a pattern for what image will be shown?

1. How do I know what specific ID my frontpage has? Is it the same for every new joomla installation?
To find what ID your frontpage is using you will need to locate your default menu item. Usually people will set this to "Home" and again usually is in "main menu". Your default menu item will have the orange / yellow star. Once you find that it will say the item id on the right side. Not all joomla installations are the same and ids are not all the same.

2. Does it matter in what module position the different frontpage modules are?
The modules can be in any position on the frontpage but any module inside gkBottom1, gkBottom3 and gkBottom5 is going to have a dark background by default.

3. Are there any further preferences one has to check?
If you are installing the template only and not quickstart then your frontpage may not show the black backgrounds. To fix this you should follow step 1 and figure out what your default menu id is. Then in your template settings under Features I believe.. Find Suffixes for pages and add
ItemID/Option: YOUR DEFAULT MENU ID
Suffix: frontpage dark-bottom section-nav

Then blam you are good to go

4. The dark images displayed between the sections - is there a pattern for what image will be shown?
The images in the dark background are all set in the css which can be found templates/gk_musicstate/css/template.css.
to make things quick just do a search for these. I will list them in orger from first to last
1st Image:
.frontpage.dark-bottom #gkDarkBottom {
background: url("../images/common/dark_bottom_bg.jpg") no-repeat scroll center center #1e1e1e;
bottom: -450px;
height: 1000px;
position: absolute;
width: 100%;
z-index: 0;
}

2nd Image:
.frontpage #gkBottom3 {
background: url("../images/common/people_bg.jpg") no-repeat scroll center top #141414;
overflow: hidden;
padding: 350px 0;
position: relative;
}

3rd Image:
#gkBottomSection {
background: url("../images/style1/bottom_bg.jpg") no-repeat scroll center top #341a18;
}

You can add !importantl to the end of this line so that it will be the same image for any style you choose. This way your not changing other files aswell

So change it like this

#gkBottomSection {
background: url("../images/style1/bottom_bg.jpg") no-repeat scroll center top #341a18 !important;
}

Thanks a lot for this explanation, devsmi
That definitely helps me in understanding and configuring this template and I hope it does help others with the same problem as well.