Formatting title of a slide in Image Show GK4 module

Question

I am using Image Show GK4 module with module_style as gk_storefront in Joomla 3.4.5. For the slides, I chose content type as "Text", then added a image, and title as "Driven by Excellence". I do not see a way to add a superscript for the title text "Driven by Excellence" or format the font type, font color.

1. Is there any option to add a superscript for the title text "Driven by Excellence" or format the font type, font color?

2. If there is no way, is there any other module I can use which is like Image Show GK4

P.S. I cannot post in the support forum of Image Show GK4 as I am using the free module. I am with a non-profit employer so we cannot buy a package for support from them.

Additions: The styling which changes the title text "Driven by Excellence" is

.gkIsWrapper-gk_storefront figcaption {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            filter: alpha(opacity=0);
            -webkit-font-smoothing: antialiased;
            left: 50%;
            opacity: 0;
            pointer-events: none;
            position: relative;
            text-align: center;
            top: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            width: 100%;
            z-index: 1;
        }

How can I add "TM" in superscript after "Driven by Excellence" this?

I realize the styling .superscript { position: relative; top: -0.5em; font-size: 80%; } can do it, but how can I add a class or ID for "TM"

I don't notice any option in Image Show GK4 module with module_style as gk_storefront in Joomla 3.4.5

Answer 1

You can achieve what you want with some CSS, but without a link to your site it's not possible to give an exact answer.

Using your browsers "Inspect" tool, locate the correct element. The title is probably a <h3> tag, but you'll want to add a class or ID in order to change the slideshow title only.

I've used the following code previously to edit the title of Image Show GK4, but you might have to modify it to fit your template:

.gkIsWrapper-gk_shop_and_buy .figcaption h3 {
    // Your CSS styles here
}

Add this to your CSS file. You might have to add !important to the CSS styles to make sure they are applied.

Update

In order to add a ™ symbol, you can use pseudo classes:

.gkIsWrapper-gk_storefront figcaption:after {
    content: "\2122";
}

Note that this will add a ™ symbol to all your slide titles, and might not be what you want.

You can also copy the symbol from this answer, and paste it into your module. It should work fine, and you don't need to use superscript or anything because it's a proper symbol, not the letters "TM".

Hope this helps.