Home / Forums / DynamiX Support / Multiple CSS issues after upgrading to DynamiX 5.0.4 from 3.1.2

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

  • michaeljphoto
    Participant

    After upgrading DynamiX to Version: 5.0.4 from Version: 3.1.2, I’ve noticed some major design changes that I’m trying to revert using custom CSS.

    First, I’m trying to remove all of the “curves” everywhere and return it to the “right angle” look. To make things clear, here is an example:

    If you scroll down to below “Aerial Services” and look at the tabbed interface between “Aerial Services” and “Aerial Video Trailer,” you will notice that the selected tab is no longer “curved.” The “curve” has been replaced by the standard “right angle” or border-radius: 0;

    Can you advise how I can make all of the “curves” into “right angles?” I’m attempting to make this correction sitewide.

    Second, my drop down menu has lost it’s gradient shadow.

    Last, my return to top button is no longer centered, it is now right justified.

    Any help you can provide would be wonderful as I am actively working to resolve these issues using custom CSS.

    Thanks!

    • This topic was modified 1 year, 10 months ago by  michaeljphoto.
    Andy
    Andy
    Keymaster

    Hi,

    Try adding this to Appearance > Theme Options > Customize > custom CSS:

    .ui-tabs ul.ui-tabs-nav li {border-radius:0 !important;}

    For the shadow, try adding this to Custom CSS field:

    #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;
    }

    For the back to top button, try this:

    div.autototop a {
        right: auto;
        left: 50%;
    }

    michaeljphoto
    Participant

    Thanks for the reply. Your CSS was helpful in 2/3 cases.

    1. The change to make the tabs square did not work
    2. The gradient appears to be working, however it was working before using CSS instead of a background image
    3. The auto top button is working

    Any other theories on making all of the curves sitewide into squares? This is a major design shift so its very important to my website. Thank you so much!

    Andy
    Andy
    Keymaster

    Hi,

    The following code doesn’t appear to be present on your site, I’ve modified it slightly, but I’ve tested it and it should definitely work.

    1. `.ui-tabs ul.ui-tabs-nav li {
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    }`

    2.This is the exact code taken from the previous version, it was always using an image.


    michaeljphoto
    Participant

    That worked! Thanks!

    Now my only remaining question would be how do I remove the remaining curves? The menu is still coming out rounded in the drop down, historically that has had squared corners. Also, the outer frame is also rounded. You can see this on this page:

    Just look for the container that is holding the tabbed interface. Right outside of “Video Services.” Can you help with these two remaining curves?

    Thanks!

    Andy
    Andy
    Keymaster

    Hi,

    That’s strange, it’s never had straight edges on the menu or outer frame. I’ll give you the CSS anyway.

    #primary-wrapper .ui-tabs-panel,
    #nv-tabs ul li ul,
    .skinset-main {-webkit-border-radius: 0 !important;border-radius: 0 !important;}
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.