Support » Theme: Virtue » Footer Widget not displaying as intended

  • I am developing a website using the Virtue (Free) Theme.
    (I know editing options will be more restrictive with it being a free theme – am working with them and all’s going well)

    Issue is with inserting a Footer widget:
    – Have chosen a 4-column footer from the template options.
    – I want to insert a widget button into one of the columns (Col 3) to link elsewhere.
    – No widget button is available as a set option for a footer widget so have copied the coding for the standard widget button available for standard page content and have pasted this into the ‘Customize HTML’ option for footer widgets (footer col 3).
    – this appears as hoped for on the footer of all Pages of the website except on those pages that are ‘Posts’ – with these pages, it doesn’t display in its entirety (all other included footer information appears)
    – (I have created most pages as ‘Pages’ using the feature template but am using the ‘Post’ default template to create ‘news’ items)
    – on the footer of the ‘Post’ pages, the custom widget only partially appears: button name, colouring as intended but not button outline.
    – can’t work out why this should be but presuming there could be a clash of coding with the default template of the ‘Post’ page but it does seem strange given no problems with the custom widget on all other pages. Any help-guidance-suggestions would be gratefully received! Thank you.

    – have chosen a blue as the footer colour, with white text and the button outline also in white. Intention is that when cursor is on the button it fills white, the text shows blue. Have chosen a rounded button style.

    The custom coding I have inserted is:

    <a style=”border-color: #ffffff; color: #ffffff; background-color: transparent;”

    onmouseenter=”this.style.borderColor=’#ffffff’; this.style.backgroundColor=’#ffffff’; this.style.color=’#2d6c91′;”

    onmouseleave=”this.style.borderColor=’#ffffff’; this.style.backgroundColor=’transparent’; this.style.color=’#ffffff'”

    class=”vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-outline-custom” href=”http://[–the web link here–]” title=”read our current newsletter” target=”_blank”>Weekly Newsletter

    • This topic was modified 1 month, 1 week ago by  cdrnewark2019. Reason: last part () of the included coding referred to didn't appear on message as posted
Viewing 3 replies - 1 through 3 (of 3 total)
  • hannah

    (@hannahritner)

    Hey @cdrnewark2019,
    Can you post a link to your site?
    Thanks!

    Hannah

    Hi Hannah,
    yep, the site address whilst it’s on test is this:

    http://www.holytrinitynewark.org.uk/church/test

    I hope the description of the issue/what I’m trying to achieve made sense.

    Thanks in advance, for your help.

    Hey,
    The issue is that your button is created using your pagebuilder plugin (visual composer) and that plugin is not loading on your posts page. The css styles that make the button look like a button are only loaded when visual composer is loaded and so on posts where you don’t have visual composer loaded those styles are missing.

    I suggest you simply create a button without the need for visual composer.

    But another simple workaround is to add this css into the theme options > advanced settings > custom css box:

    .footerclass .vc_general.vc_btn3 {
        display: inline-block;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        background-color: transparent;
        border-radius: 5px;
        border: 2px solid transparent;
        box-sizing: border-box;
        word-wrap: break-word;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: relative;
        top: 0;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        line-height: normal;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        font-size: 14px;
        padding: 13px 19px;
    }

    I hope that helps,

    Ben

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.