1

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

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.

  • Thanks johanpw, I edited the question. Thank you for your assistance and time. – user3063785 Nov 12 '15 at 4:17
  • @user3063785 please see my edited answer :) – johanpw Nov 12 '15 at 16:20
  • Thanks a lot johanpw, it worked. Would you advise any books/blogs/videos for learning HTML5/CSS. I come from a background of C/C++ and was told "software engineer learns html5 javascript and jquery" is a good read. I went through free tutorials from tutsplus. I need to be more fluent in HTML5/CSS. Thank you again for your assistance and time. – user3063785 Nov 12 '15 at 18:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.