Home / Forums / DynamiX Support / New version breaks layout of website

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts

  • Kevin
    Participant

    Hi,

    I upgraded to the latest version of WP, Visual Composer and the Dynamix theme and it causes the site to lose some of the formatting that was originally setup.

    You can see the difference in the two pages here (we use a staging area to test updates/new versions before deploying to live):

    [will add links to private message below]

    The staging version is using the latest version of WP, Dynamix and Visual Composer.

    Please can you help identify what’s going wrong here to cause the site to not display the same after making these updates?


    Kevin
    Participant
    This reply has been marked as private.
    Andy
    Andy
    Keymaster

    Hi Kevin,

    Can you be more specific with what formatting you want changed back. The two versions are quite different, the newer version has dropped some older looking styles and replaced them with a more modern look. It’s also wider ( however you can change the width via Appearance > Theme Options > General ).


    Kevin
    Participant

    Hi Andy

    Well we want the updated theme version to look the same as the older version – same width, same formatting style, etc.

    We don’t want the update to cause the look of the site to change, so how can we update the theme without it changing the formatting and the width, etc?


    Kevin
    Participant

    Hi Andy,

    It;s causing me a quite a bit of work – I’ve adjusted the max width to try and recover a lot of the layout issues caused but here’s a list of items now affected just on this one page:

    live – http://www.drivingmonitor.com/driver-risk-management-overview/grey-fleet-checks/
    staging – http://drivingmonitor.staging.wpengine.com/driver-risk-management-overview/grey-fleet-checks/livehttp://www.drivingmonitor.com/driver-risk-management-overview/grey-fleet-checks/
    staging – http://drivingmonitor.staging.wpengine.com/driver-risk-management-overview/grey-fleet-checks/

    1. Top Menu system has lost the highlighted rollover so the user doesn’t see any change when they hover – can this be fixed?

    2. In the Grey Fleet Alerts accordion expander option the tooltip no longer works and render in text so looks like this:
    Configure alerts at different levels
    Department managers can receive alerts just about drivers within their department, but our alerts system is powerful enough to have alerts setup at branch and company level, so issues can escalate up through the [tooltip color=”dark” tip=”Managers can be setup at all levels allows your organisation to control access views”]management hierarchy.[/tooltip]

    3. The ‘View the Free Demo’ buttons have all lost their nice rounded corners, all my styling and are just flat with no subtlety or hover state etc, again can I restore my original buttons?

    4. The parallax on the bottom green panel no longer works – can this be fixed?

    5. All of the footer divider lines has disappeared – again can these be restored?

    If you can please have a look at the 2 URL’s I’ve supplied and let me know what I can do about the 5 points above (if you can reply under each of the points that would be great).

    Thanks

    Andy
    Andy
    Keymaster

    Hi Kevin,

    1. The main menu highlights “Green” when hovering and the sub menus hightlight “White”. If you want the background gradient, try this bit of CSS in Appearance > Theme Options > Customize > Custom CSS:

    #nv-tabs ul li:hover span.menu-highlight,
    #nv-tabs ul li.current_page_item span.menu-highlight,
    #nv-tabs ul li.current_page_parent span.menu-highlight,
    #nv-tabs ul li.current-menu-ancestor span.menu-highlight,
    #nv-tabs ul li ul li:hover {
     background: transparent url(images/gradient-f.png) top repeat-x;
    }

    2. This is working for me, can you confirm it’s working for you now?

    3. For the buttons, try adding this to Appearance > Theme Options > Customize > Custom CSS:

    .button a, 
    .button a:visited, 
    button, 
    input[type="submit"], 
    input[type="button"] { background-image:url(images/button-a.png);
     background-position: bottom center;
     background-repeat:repeat-x; }
    
    .button a:hover,
    button:hover,
    #content input[type="submit"]:hover,
    input[type="button"]:hover {
     background-position: center top;
    }

    4. The parallax effect works for me, again it maybe cached.

    5. Try adding the following CSS ( same place as above )

    .widget > ul li,.widget.widget_nav_menu div > ul li,table th,table td,.recent-metadata, .divider-dark.lowerfooter-wrap {
        background: url(images/break-a-dark.png) repeat-x top;
    }

    Kevin
    Participant

    Hi Andy,

    Can you view the CSS in this site, as you can see I’ve implemented your code suggestions on the dev website but none of the changes seems to have made any difference anywhere:

    live – http://www.drivingmonitor.com/driver-risk-management-overview/grey-fleet-checks/
    staging – http://drivingmonitor.staging.wpengine.com/driver-risk-management-overview/grey-fleet-checks/

    Can you tell me if something is stopping the changes taking effect?

    Many thanks
    Kevin

    Andy
    Andy
    Keymaster

    Try this instead, the image URL’s need adjusting.

    #nv-tabs ul li:hover span.menu-highlight,
    #nv-tabs ul li.current_page_item span.menu-highlight,
    #nv-tabs ul li.current_page_parent span.menu-highlight,
    #nv-tabs ul li.current-menu-ancestor span.menu-highlight,
    #nv-tabs ul li ul li:hover {
     background: transparent url(/wp-content/themes/DynamiX/images/gradient-f.png) top repeat-x;
    }
    
    .button a, 
    .button a:visited, 
    button, 
    input[type="submit"], 
    input[type="button"] { background-image:url(/wp-content/themes/DynamiX/images/button-a.png);
     background-position: bottom center;
     background-repeat:repeat-x; }
    
    .button a:hover,
    button:hover,
    #content input[type="submit"]:hover,
    input[type="button"]:hover {
     background-position: center top;
    }
    
    .widget > ul li,.widget.widget_nav_menu div > ul li,table th,table td,.recent-metadata, .divider-dark.lowerfooter-wrap {
        background: url(/wp-content/themes/DynamiX/images/break-a-dark.png) repeat-x top;
    }

    Kevin
    Participant

    Hi Andy,

    OK great that worked thanks – you can now see the difference at:

    live – http://www.drivingmonitor.com/driver-risk-management-overview/grey-fleet-checks/
    staging – http://drivingmonitor.staging.wpengine.com/driver-risk-management-overview/grey-fleet-checks/

    nearly there now, only points still causing issues are:

    1. On the Grey Fleet alerts expandable panel the text still reads:
    Configure alerts at different levels
    Department managers can receive alerts just about drivers within their department, but our alerts system is powerful enough to have alerts setup at branch and company level, so issues can escalate up through the [tooltip color=”dark” tip=”Managers can be setup at all levels allows your organisation to control access views”]management hierarchy.[/tooltip]

    Can you see how the tooltip doesn’t render and just shows the tooltip [] square brackets – does this generally happen and do I have to do something special in order for wordpress to render it as a tooltip?

    2. The expandable panel text seems to be much smaller on staging on the new theme version than on our live site on the old theme version – so it’s quite small to read and not as usable – is there a quick way to make them look more like they were as they’re much easier to read on our live website?

    3. The parallax still doesn’t work even after lots of cache clearing?

    Many thanks
    Kevin

    Andy
    Andy
    Keymaster

    Hi Kevin,

    1. Try editing DynamiX/lib/inc/shortcodes/tooltips.php and remove this line:

    add_shortcode('tooltip', 'tooltip_shortcode');

    2. Yes, you can add a bit of CSS, add this to the Custom CSS field:

    #content .wpb_accordion .wpb_accordion_wrapper .wpb_accordion_header a {font-size:22px;}

    3. The parallax works for me on this page: http://drivingmonitor.staging.wpengine.com/driver-risk-management-overview/grey-fleet-checks/

    What pages aren’t working and what browser are you using?


    Kevin
    Participant

    Hi Andy,

    OK great, I’ve added that bit now and all seems OK.

    3. The parallax works for you on this page: http://drivingmonitor.staging.wpengine.com/driver-risk-management-overview/grey-fleet-checks/

    however I’ve just noticed in Chrome wjhen I view it is moving the green droplets image in the bg but only very ‘slightly as I hardly noticed – has this radically changed on the new theme as you can see by the current live version it parallaxes a lot more at:

    live – http://www.drivingmonitor.com/driver-risk-management-overview/grey-fleet-checks/

    Is there a way of controlling the parallax movement amount in a central setting so it’s more visible as moving background when the page scrolls?

    Many thanks
    Kevin

    Andy
    Andy
    Keymaster

    Hi Kevin,

    Yes, the parallax script is different in the new version. It was because Visual Composer introduced their own and I was using a different one, I didn’t want to bloat things so I opted for the Visual Composer one.

    There is, but it means modifying a file. DynamiX/vc_templates/vc_row.php and locating the following line:

    $wrapper_attributes[] = 'data-vc-parallax="1.5"'; // parallax speed

    change the 1.5 setting to a higher one.

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

You must be logged in to reply to this topic.