ZUKI- A few things

  • Unknown's avatar
    themadameditor · Member ·

    Hi there,
    I finally mastered how to work with Zuki and need a few tweaks and help with the site so here goes
    1. The Menu- font is too large and they are too far apart is there a way to minimise the font and draw them closer?
    2. I would like accent colours on the child options of the menus so example; when you go to “the lovely” scroll to “eats” it should be a different colours not grey.
    3. is it possible to widen the blog area a little bit without upsetting the responsiveness on mobiles etc.
    4. I would really like to reduce the font size on blog posts titles by a lot its far too big.

    thanks so much for any help you can give.
    Annalisa

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

  • kathrynwp · Staff ·

    Hi Annalisa, I’ll help you with these tweaks separately.

    Since you’re getting into CSS customization, leaning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

    An Intro to CSS: Finding CSS Selectors

    An Intro to CSS, or How to Make Things Look Like You Like

    Intro to CSS: Previewing Changes with the Matched Rule Pane

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    https://thewc.co/articles/view/web-inspector-tutorial

    1. The Menu- font is too large and they are too far apart is there a way to minimise the font and draw them closer?

    This will reduce the space between each menu item:

    #site-nav ul li {
    margin: 0 10px;
}

    This will reduce the size of the menu font:

    #site-nav ul li a {
    font-size: 1.3rem;
}

    You can adjust both values as you like.

  • kathrynwp · Staff ·

    2. I would like accent colours on the child options of the menus so example; when you go to “the lovely” scroll to “eats” it should be a different colours not grey.

    In the code below, the first CSS statement will change the colour of your desktop submenu links, and the hover part will change the colour when you roll over the submenu items. The whole thing is wrapped in a media query so it doesn’t affect the mobile menu.

    @media screen and (min-width: 1260px) {

  #site-nav ul.sub-menu a, #site-nav ul.children a {
       color: #bb00bb;
  }
  #site-nav ul.sub-menu a:hover, #site-nav ul.children a:hover {
    color: #00ff00;
  }

}

    The garish example colours are just to make it clear where the changes are happening – of course you should pick your preferred colours. :)

  • kathrynwp · Staff ·

    3. is it possible to widen the blog area a little bit without upsetting the responsiveness on mobiles etc.

    I wouldn’t recommend widening the width of the content area as it’s already quite wide on large browser screens.

    If you do still want to experiment with it, be sure to wrap your CSS in a media query to make sure you’re restricting changes to particular screen sizes.

    You can learn more about using media queries that target certain screen sizes here:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Responsive Design with CSS3 Media Queries

  • kathrynwp · Staff ·

    4. I would really like to reduce the font size on blog posts titles by a lot its far too big.

    This CSS should catch most, if not all of the post titles on the blog index and in other locations:

    .wf-active #featured-content .rp-big-one-content h2.entry-title, .wf-active .front-fullwidth .rp-big-one-content h2.entry-title, #featured-content .rp-big-one-content h2.entry-title,.front-fullwidth .rp-big-one-content h2.entry-title, .wf-active h2.entry-title, .wf-active .front-fullwidth .rp-big-two-content .entry-header h2.entry-title, h2.entry-title  {
    font-size: 30px;
}

    You can adjust the size as you like, if you still find 30 pixels too big or small.

    This theme has a large number of different post title styles, so if, after making this tweak, you spot any others whose size you want to change, please link to a post or page with an example, as we may need to add those to the custom CSS as well.

  • Unknown's avatar
    themadameditor · Member ·

    hi there, thank you so much for taking the time to respond, all your tips worked excellently.
    As you rightly said about the heading, I am linking to an actual post page as I would like this reduced as well.
    http://themadameditor.com/2015/06/16/madam-reads-leave-your-mark-by-aliza-licht/

    thanks so much
    Annalisa

  • kathrynwp · Staff ·

    hi there, thank you so much for taking the time to respond, all your tips worked excellently.

    You’re welcome, glad to hear that!

    As you rightly said about the heading, I am linking to an actual post page as I would like this reduced as well.

    You can add that style by tweaking the CSS I provided earlier to this:

    .wf-active #featured-content .rp-big-one-content h2.entry-title, .wf-active .front-fullwidth .rp-big-one-content h2.entry-title, #featured-content .rp-big-one-content h2.entry-title,.front-fullwidth .rp-big-one-content h2.entry-title, .wf-active h2.entry-title, .wf-active .front-fullwidth .rp-big-two-content .entry-header h2.entry-title, h2.entry-title, .wf-active .entry-header h1.entry-title, .wf-active .entry-header h2.entry-title  {
    font-size: 30px;
}
  • Unknown's avatar
    themadameditor · Member ·

    thank you that works perfectly.

    One last thing, and it may not be possible which is fine, is it possible to have my instagram feed as footer so its spreads across the blog not just as a widget?

  • kathrynwp · Staff ·

    I’m not sure what you mean by “not just as a widget” – have you tried an Instagram widget in one of the Full Width widget areas, like Front – Page Full Width Center or Footer – Full Width Bottom?

    You can also embed individual Instagram images – but not an entire feed – in posts and pages, like this:

    https://en.support.wordpress.com/instagram/instagram-images/

  • Unknown's avatar
    themadameditor · Member ·

    hi there, something like this;
    http://www.garancedore.fr/en/

    scroll to the bottom for the instagram feed

    thanks

  • staff-totoro · Staff ·

    Hi there,

    One last thing, and it may not be possible which is fine, is it possible to have my instagram feed as footer so its spreads across the blog not just as a widget… something like this;
    http://www.garancedore.fr/en/

    That is a nice looking example site. I peeked at the code a bit, and it’s pretty clear that the Instagram feed on that site is custom-coded (the whole site is) and while it’s very well done, there is nothing like that here on WordPress.com.

    But one thing you could experiment with is adding an Instagram widget to the full-width footer (the pink box with the recent posts shown in it) and use the following code to make the thumbnails bigger:

    .wpcom-instagram-columns-3 img {
  max-width: 100%;
}

    This won’t be exactly the same as the example you’ve given, but if you experiment with the percentage (100%) in the code above, you can at least control how large the Instagram images are. It will not go full-width across the site (it’s limited by the pink box) but will be a nice look nonetheless.

    Hope that helps. Please let me know if you have any further questions.

  • Unknown's avatar
    themadameditor · Member ·

    thanks so much that works well. Now I have a couple more needs and then I should be good.
    1. How can I set a background to the instagram feed at the bottom
    2. I would like for there to be no space between the pictures. Is this possible?
    3. The accent colours, the pink boxes, I would like to change them but cannot see the option to do so. could you please help?

    Thanks ever so much once again for all your help I really appreciate it.

  • kathrynwp · Staff ·

    1. How can I set a background to the instagram feed at the bottom

    Something like this should work: 

    .home .wpcom-instagram-images {
  background-color: #f4d1de;
}

    Use whatever colour code you prefer.

    2. I would like for there to be no space between the pictures. Is this possible?

    Between which pictures? In the Instagram widget? Add a zero margin (margin: 0;) to your existing declaration for

    .wpcom-instagram-columns-3 img

    3. The accent colours, the pink boxes, I would like to change them but cannot see the option to do so. could you please help?

    You can change the pink in your Customizer by selecting a new Accent Colour:

    Customize

    If you have any additional questions, would you please start a new thread rather than continuing to add them here. Thanks!

  • Unknown's avatar
    themadameditor · Member ·

    got it thanks so much. I have a couple more questions please;

    1. the faint lines that separate the posts, I would like to make then coloured how do I do that?

    2. Also for the menu, I would like the selected page to be grey when on it. So if I click on XO it should be grey when I am on the page…

    thank you ever so much

  • Unknown's avatar
    thesacredpath · Member ·

    1. the faint lines that separate the posts, I would like to make then coloured how do I do that?

    The colors for a bunch of border lines are all set in the following CSS rule. It might be best visually to have all the borders a consistent color. See what you think with the below. 

    #comments h3.comments-title, #colophon, #primary h3.blog-title, #primary h1.archive-title, .template-front .widget-area, .page .site-content .page, .search-no-results .site-content .page, .default-sidebar, #front-sidebar-one, #front-sidebar-two, .nav-wrap, #infinite-handle, .single-post .post .entry-header, .archive .site-content .post, .blog .site-content .post, .single-post .site-content .post, .site-content .type-attachment, .search-results .site-content .page, .widget-area .widget, .flexslider .rp-big-one-content {
    border-color: #cc0000;
}

    2. Also for the menu, I would like the selected page to be grey when on it. So if I click on XO it should be grey when I am on the page…

    You can use the following CSS and edit the color code as desired. 

    #site-nav .current-menu-item a {
    color: #cc0000;
}

    In many themes, the “home” page also has a current-menu-item class set for it in the HTML, but in Zuki the theme designer didn’t include that class, so we can’t change the home link color when on that page.

  • Unknown's avatar
    themadameditor · Member ·

    oh thank you this works so perfectly.

    I have just a few tweaks and then I am done

    1. Could I please remove the tag “published by the madam-editor from all posts?
    2. Can I move the date so it is beneath the heading?
    3. Where the “related posts are displayed could I please move “related” aligned centre along with the SM options?

    thanks ever so much for all your help

  • Unknown's avatar
    thesacredpath · Member ·

    That’s great!

    1. Could I please remove the tag “published by the madam-editor from all posts?

    The following should get rid of the byline on all posts, including all of them on the main page as well as on the single post pages. 

    #featured-content .entry-author, .rp-medium-one-content .entry-author, .front-fullwidth .rp-big-two-content .entry-author, .rp-medium-two-content .entry-author, .single-post .post .entry-header .entry-author {
    display: none;
}

    2. Can I move the date so it is beneath the heading?

    Putting the date below the titles is problematic. We have to use position:absolute; to do that, and that means the element loses its relationship to the other elements, and since titles can vary in length, there isn’t a way to take that into account and have the date and the other stuff shift.

    3. Where the “related posts are displayed could I please move “related” aligned centre along with the SM options?

    Give this a try. 

    #primary .sharedaddy h3.sd-title, div#jp-relatedposts h3.jp-relatedposts-headline, .entry-content .sharedaddy .sd-content {
    text-align: center;
    width: 100%;
}
div.sharedaddy h3.sd-title {
    margin-bottom: 1em !important;
}
  • The topic ‘ZUKI- A few things’ is closed to new replies.