Making your own intro for the Creativity one-page template

The main thing to be aware when looking to modify the Intro slideshow in Creativity’s homepage is that it is provided by our Image Show GK4 module, located in the “intro” module position. In the QuickStart package installation we have called the module “Intro” to make it easier to find in the Module Manager. In this article we’ll answer the most-frequently asked questions regarding its customization.

Note: If you’re curious about where to add custom CSS code please read this guide.

How to change color of font used in slides?

In the intro slides we used two lines, one is from the Title field and the second from the Content field in the Tabs settings inside the ImageShow module; to change them you have to override one or two lines:

h2.loaded { color: green !important;}
h1.loaded { color: red !important;}

How to change the background color under the loading clock?

You have to override only one line of CSS code:

.gkIsWrapperFixed { background: green !important; }

How to add icons inside slides

The gk_creativity Image Show style allows you to use the Font Awesome icons in the slide titles and content. You may find more information in these guides: title-icon-guide and content-icon-guide.

How to change the appearance of the “What We Do” button

First, I expect that you would want to start by translating this phrase – if so, check out our guide (the translation information is at the bottom).

Second, by default in the Quickstart the “What We Do” button is inside “gkIsWrapper-gk_creativity figcaption” CSS classes. So if you want to customize it you have to override a few styles; take a look at the default styles:

.gkIsWrapper-gk_creativity .figcaption > a {
 background: transparent;
 border: 2px solid #FFFFFF;
 border-radius: 2px;
 color: #FFFFFF;
 font-size: 15px;
 font-weight: 600;
 padding: 20px 36px;
 text-transform: uppercase;
}

So you can easily change background color, font size/color or border size/color; just change, or to be specific, override, the default values. For example; the font-weight property sets how thick or thin characters in your text should be displayed. A value of 400 is normal, and 700 or 800 is the same as bold. Of course you also can add your style effects there too. All you have to know are the basics of CSS to change the appearance of this element. If you want to change the button box appearance after hover use this class and your choice of colors:

.gkIsWrapper-gk_creativity .figcaption > a:hover 
{background: green; color: yellow;  }