How to add Different Parallax Images to Different Modules

Hi,

i need to use few different parallax modules in this website, for different purposes, but as i have found there is only one parallax which shows that dark blue, blurry background image. but there's no documentation that i could find to add more parallax content, or to customize it,

Please explain in details.

1. how to create a new parallax content
2. how to assign it to a module (ex. position: bottom 1 with 100% width)
3. how to change the text color, size in the text content inside the parallax content ? (p, h2 .etc)

This is a kind of an urgent matter, your earliest reply is highly appreciated.

Thank you and Best Regards,

Thisara.

I am still waiting for an answer, this is really urgent, someone please help me...

Hi

For start, to be able to use 100% width Your site needs a page class suffix "frontpage" and a suffix like for example "bottom4-fullwidth" to resize bottom4 layer to full screen.

Additionally each module You wish to have a parallax used needs a module class suffix "parallax".

To make changes You should use some developer too like Firebug (plugin for Firefox) and create a new style in override.css file. For example changing color of header in bottom1 layer will require code like:

Code: Select all

#gkBottom1 .header {
    color: red;
}


Hi, thank you for your reply, and i am sorry for asking the same thing again, i am not familiar with class suffix as i previously work with UIKit based templates, it has a customizer, module properties can be changed pretty easily, and even to make a parallax, Ex: simply can do by Widgetkit, hope you understand my situation.

Could you please explain in details how to do these things,

- how to add a page class suffix (frontpage) to the site, ??
- how to add a suffix like bottom4-fullwidth ?

when you add "parallax" to a class suffix the module becomes the default parallax, though its using the full width the content in the module is not. i am confused, hope you have an idea of my knowledge about GavickPro template customization. based on that please let me know step by step how to get it done.

you can take the contact page map module as an example, and tell me how to make it 100% width ?

your earliest reply is highly appreciated.

Thank you.

Hi

Here is a good example about how to use PAGE CLASS SUFFIX: https://www.gavick.com/documentation/un ... omla-pages

From my part I would just add that if You need more than one page class suffix for one page just add it after space. For example: "frontpage bottom4-fullwidth bottom5-fullwidth"


Of course some things are way easier when done with some extra css. For example contact box can be resized to full screen with this code:

Code: Select all

#gkBottom1 .gkPage {
max-width: 100% !important;
}


but it would affect all pages. Using it with a page class suffix will make it work only with pages where You want it.