Changing to Zuki Theme, CSS Questions

  • Unknown's avatar
    allisonhudson929 · Member ·

    Hello –

    Thank you in advance for your help. I’d like to change my theme from Gridspace to Zuki. I’d like to have certain elements – colors, details on buttons, nuances within posts – carry over, so was hoping you could help me with the CSS I’ll need for Zuki. I’ll list my questions first, followed by the existing CSS I have on my current theme. Thank you!

    – Would like to keep the same colors across all features, the menu, post titles, buttons including Sign Up, Follow, Older Posts, etc
    – Would like to center the menu at the top of the homepage, and add a logo above the menu if possible
    – Would like to add the site title above the menu if possible (understood that it may need to be within the logo)
    – Would like to hide tags at the bottom of each post
    – Would like to have the Connect feature be a live link right to my e-mail, as is the set up now
    – I think that’s it for now – thank you in advance!!

    Here is the current CSS for my site, using Gridspace Theme, April 14th, 2015

    .featured-content-detail {
    background: none repeat scroll 0 0 rgba(0,0,0,0.3);
    }

    .main-navigation {
    background: none !important;
    }

    .sf-menu a, .sf-menu a:visited {
    color: #333333 !important;
    border: none;
    }

    .sf-menu a:hover, .sf-menu a:focus, .sf-menu a:active {
    background: none repeat scroll 0 0 #f2fbc2;
    color: #000 !important;
    }

    .sf-menu li.prepend_item span {
    border: none;
    }

    .sf-menu ul li {
    background: none repeat scroll 0 0 #f2fbc2;
    }

    .sf-menu ul a {
    border-color: #ffffff;
    color: #ffffff !important;
    }

    .sf-menu li.append_item span {
    border: none;
    }

    .sf-menu li.current-menu-item > a, .sf-menu li.current-menu-item > a:visited, .sf-menu li.current-menu-parent > a, .sf-menu li.current-menu-parent > a:visited, .sf-menu li.current_page_item > a, .sf-menu li.current_page_item > a:visited, .sf-menu li.current_page_parent > a, .sf-menu li.current_page_parent > a:visited {
    background-color: #f2fbc2;
    color: #ffffff !important;
    }

    a.toggle-menu, a.toggle-menu:visited {
    color: #666666;
    }

    #pageslide {
    background-color: #ffffff;
    color: #333333;
    }

    .mobile-navigation a, .mobile-navigation a:visited, .mobile-navigation a:hover {
    color: #3D3D3D;
    }

    /*.site-branding .container {
    background-image: url(‘//summitdaytoday.files.wordpress.com/2014/12/photo-74-version-2.jpg’);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 100px 100px;
    }*/
    .more-link:hover, .more-link:focus, .more-link:active {
    background-color: #516600;
    color: #f2fbc2;
    }

    #infinite-handle span:hover, #infinite-handle span:focus, #infinite-handle span:active {
    background-color: #516600;
    color: #f2fbc2;
    }

    .sd-like-gravatars {
    display: none;
    }

    .single-post .entry-meta-header ul li:first-child {
    display: none;
    }

    .widget input[type=”submit”] {
    background-color: #F4FAD2;
    border: none;
    box-shadow: none;
    font-size: 14px;
    padding: 9px 18px;
    font-family: calluna-1, calluna-2, “Noto Sans”, sans-serif;
    text-shadow: none;
    color: #666;
    }

    .widget input[type=”submit”]:hover {
    background: #516600;
    color: #F4FAD2;
    }

    #infinite-handle span {
    background-color: #F4FAD2;
    border: none;
    box-shadow: none;
    font-size: 14px;
    padding: 9px 18px;
    font-family: calluna-1, calluna-2, “Noto Sans”, sans-serif;
    text-shadow: none;
    color: #666;
    }

    footer.entry-meta {
    display: none;
    }

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    This is really difficult and time consuming to do since it requires us to have both themes open and then to figure out what element matches what element in the other theme and then see if we can make it all match. In some instance it may take additional CSS and/or modifications to make things work.

    My suggestion would be to create a new “working” site, something like myworkingsite.wordpress.com and then use the CSS preview to work out all the CSS changes there. You can then simply copy the CSS and activate Zuki on your main site and paste in the CSS.

  • The topic ‘Changing to Zuki Theme, CSS Questions’ is closed to new replies.