New Landing How can we help? Cardinal Image Element – How to add an icon when a URL is used instead of lightbox link?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Posted in: Cardinal
  • #236396
    SenecaData
    Member
    Post count: 3

    Hi there! This is in regard to the “Image” element used through the Swift Page Builder.

    Please visit the link for the homepage I entered in the form (test.senecadata.com). Underneath the homepage video slider, you’ll see four images above each of our market-sector headings. Roll over the image all the way to the left, then roll over the next image. You will see that the first image (set as a lightbox link) has an eye icon that appears. The next three images are set as page links (URLs), and do not include an icon. I would like to add a custom icon that appears even when the rollover is set up as a URL link rather than a lightbox link.

    1.) Where can I find this in your code structure, and/or
    2.) Is there an optimal way to edit this using either the child theme or the custom CSS/JS field in the theme options, and/or
    3.) Can I request that the next version of Cardinal includes an input for “Upload/Attach a custom icon” under the image options menu for that element?

    Thanks!
    Rob

    #236888
    SenecaData
    Member
    Post count: 3

    Is someone available to help me resolve this issue?

    Thank you,
    Rob

    #236894
    David Martin – Support
    Moderator
    Post count: 20834

    Hi Rob,

    This is fairly in-depth modification, the file is located within the plugin, Swift Page Builder. The path is wp-content/plugins/swift-framework/includes/page-builder/shortcodes/media.php

    Look for line 114, starts with class SwiftPageBuilderShortcode_spb_image extends SwiftPageBuilderShortcode {.

    As an alternative approach, have you considered trying CSS to do this? Ex:

    figure.animated-overlay figcaption h4:after {
        content: "\f08e";
        font-family: fontAwesome;
        color: #fff;
    }

    Thanks.

    #236896
    SenecaData
    Member
    Post count: 3

    Hi David,

    Thank you – I apologize for the persistence, we have a deadline prior to the holiday and I’m not so much a coder as a designer. I will try what you have suggested and will post my solution before marking as resolved.

    Merry Christmas!

    Thanks,
    Rob

    #236898
    David Martin – Support
    Moderator
    Post count: 20834

    Hi Rob,

    Sure no problem.

    Thanks.

    #236902
    SenecaData
    Member
    Post count: 3

    Adding the following code suggested by David to the cardinal-child theme CSS:

    figure.animated-overlay figcaption h4:after {
        content: "\f08e";
        font-family: fontAwesome;
        color: #fff;
    }

    Successfully added icon to URL-linked image overlays. Issue resolved.

    Thanks,
    Rob

    #236904
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Great! Thanks David

    – Kyle

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register