Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 5, 2019 at 8:47 pm #1050385
    rosewoodva

    Hi there,

    I have been through multiple previous support threads but cannot make it work. We just want the text and image to be aligned center for all the Tabs in the Tab Sections. Any help appreciated, thanks!

    Login info in Private Content. Page: http://trythebear.com/clients/aafx/recruiting-software/
    Screen shot here: https://snag.gy/dYtbjy.jpg

    I am using the following CSS to control the size of the image and the text…

    #small-icon .av-tab-section-image {
    width: 50px !important;
    }

    #small-icon .av-tab-arrow-container {
    width: 50px !important;
    }

    #small-icon .av-inner-tab-title {
    width: 50px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    }

    • This topic was modified 5 years, 11 months ago by rosewoodva.
    January 6, 2019 at 2:42 am #1050455
    michaelH

    Hi Deanna

    I would use a different approach for that.
    Currently and with pixel values you will always have a hassle in my opinion and with the white background of the image itself it does not look that nice.

    Do you have the images such as http://trythebear.com/clients/aafx/wp-content/uploads/2019/01/S1-180×180.png available as a SVG graphic by any chance? This will also result in a sharp result of the graphic, no matter which screen is used.
    Secondly, I would convert the SVG graphics into icons by uploading them to http://fontello.com. This service is already integrated in Enfold so you can afterwards just select the icons, put your text below it, done. There are different icon elements within the theme which allow you to postion them nice and easy.

    What do you think?

    Cheers
    Michael

    January 7, 2019 at 12:52 am #1050697
    rosewoodva

    Hi Michael,

    Fantastic idea! I will apply this method to this website and future ones. Much appreciated, please close this ticket!

    Deanna

    January 7, 2019 at 1:34 am #1050701
    michaelH

    Hi Deanna

    Glad you like it!
    I can’t close the ticket by myself as I am just a normal participant in the forum like you, so we just wait for a moderator to do it.

    Btw why didn’t you update to WordPress 5.0.2 yet? Any particular reason? I am just curious.
    Same question for Enfold :)

    Cheers
    Michael

    January 8, 2019 at 11:39 am #1051341
    Ismael

    Hi,

    @michaelH: Thanks for helping. :)


    @rosewoodva    : You might want to try this:

    #small-icon .av-inner-tab-title {
    width: 50px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    min-height: 60px;
    height: 60px;
}

#small-icon .av-tab-section-image {
    width: 50px !important;
    margin: 0 auto;
}

    Best regards,
    Ismael

    January 11, 2019 at 6:59 pm #1052851
    rosewoodva

    Hi Ismael,

    michaelH’s solution worked great to get the icons and text aligned. For really long words, it would not align and we had to add a line break and hyphenate the words.

    The only issue we have now is that we have quite a few icons, and we want users to be able to scroll through them.

    We added arrows, but they are not clickable. The only way to see tabs further down is to click on the rightmost tab and then it displays the next few tabs. We want arrow navigation to scroll through all the tabs. Example page: https://www.mindscope.com/recruiting-software/

    Arrow code:

    .av-tab-section-outer-container:after {
    content: ‘\e879’;
    font-family: ‘entypo-fontello’;
    font-size: 30px;
    position: absolute;
    top: 100px;
    z-index: 1000;
    right: 20px;
    }

    .av-tab-section-outer-container:before {
    content: ‘\e878’;
    font-family: ‘entypo-fontello’;
    font-size: 30px;
    position: absolute;
    top: 100px;
    z-index: 1000;
    left: 20px;
    }

    January 14, 2019 at 3:08 am #1053489
    Ismael

    Hi,

    The scroll feature will require modification that is beyond the scope of support, unfortunately, so may need to contact a freelance developer or contact our partner, Codeable.

    // https://kriesi.at/contact/customization

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.