Customing Canvas menu

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #4686
    Customing Canvas menu 2Paul Brooks
    Participant

    Hi Jamie
    Good news – I’ve applied Navigation styling to my menu. Not so good news – I just can’t see how/where I can style the sub menus relating to child pages. Any ideas please?
    Paul

    #4688
    Customing Canvas menu 3Jamie Marsland
    Keymaster

    Hi Paul,

    There is no option within Canvas to do this. You will need to do some custom css . Here is a link on the woothemes website to enable this http://www.woothemes.com/tutorials/change-the-color-of-the-drop-down-nav-menus.

    #4691
    Customing Canvas menu 2Paul Brooks
    Participant

    Thanks Jamie – thought I was losing the plot there for a while
    Regards Paul

    #4693
    Customing Canvas menu 3Jamie Marsland
    Keymaster

    :)

    #4700
    Customing Canvas menu 2Paul Brooks
    Participant

    Sorry to bother you again Jamie
    I created a child theme containing the following, the css lifted from your link to Woo, and unchanged
    /*
    Theme Name: xxxxxxxxxx Child Theme
    Theme URI: http://www.xxxxxxxxx.com/
    Version: 1.0
    Description: xxxxxxxx child theme based on Canvas
    Author: Paul Brooks
    Author URI: http://www.xxxxxxxxx.com
    Template: canvas
    */
    /* Default styles */
    @import “../canvas/css/reset.css”;
    @import ../canvas/style.css”;
    /* Changes the default background color of the drop down menus */.nav li a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-menu-item a, .nav

    li.current_page_item li a, .nav li.current_page_parent li a, .nav li.current-menu-ancestor li a, .nav li.current-menu-item li a, .nav li.sfHover a { background:#D0D9E0; } /* Changes the hover background, text and text

    shadow color */.nav li ul li a:hover, .nav li.sfHover ul li a.sf-with-ul:hover { background:#316594; color:#FFFFFF; text-shadow:0 1px 0 #000;} /* Changes the default background color of a drop down menu with a child

    */.nav li ul li, .nav li.sfHover ul li a.sf-with-ul { background: none repeat scroll 0 0 #D0D9E0; }
    /* Default styles */
    @import “../canvas/css/reset.css”;
    @import ../canvas/style.css”;
    /* Changes the default background color of the drop down menus */.nav li a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-menu-item a, .nav

    li.current_page_item li a, .nav li.current_page_parent li a, .nav li.current-menu-ancestor li a, .nav li.current-menu-item li a, .nav li.sfHover a { background:#D0D9E0; } /* Changes the hover background, text and text

    shadow color */.nav li ul li a:hover, .nav li.sfHover ul li a.sf-with-ul:hover { background:#316594; color:#FFFFFF; text-shadow:0 1px 0 #000;} /* Changes the default background color of a drop down menu with a child

    */.nav li ul li, .nav li.sfHover ul li a.sf-with-ul { background: none repeat scroll 0 0 #D0D9E0; }

    and FTP’d it to wp-content/themes/childtheme/style.css and activated it

    This turned this horizontal menu in standard Canvas
    Home Short Stories » Poetry » Links with all (inc. drop downs) working ok

    into this vertical bullet pointed menu, and here I’ve put * SS or * p against the drop downs to indicate short stories and poems

    •Home
    •Home
    •Golden Days, Silver Nights *ss
    •Partners *ss
    •Poetry
    •Links
    •Short Stories
    •Year of the Pig *ss
    •Poem 1 *p
    •Poem 2 *p

    Any ideas please?
    Paul

    #4703
    Customing Canvas menu 3Jamie Marsland
    Keymaster

    Hi Paul,

    Could you try without the child theme. i.e just re-activate the canvas theme and paste the code into the custom.css file that comes with canvas.

    Let me know if that works,
    Jamie

    #4707
    Customing Canvas menu 2Paul Brooks
    Participant

    Hi Jamie
    I’ve reverted back to Canvas theme and put the same code in custom.css, and it’s working ok.
    Why would it work there but not in a child theme? Have I mucked up child theme creation or implementation somewhere?
    If I have to update Canvas to a new version in future is there a danger of custom.css content being lost? This risk, if it is one, is why I was leaning towards a child theme as best practice.
    Thanks for your help
    Paul

    #4713
    Customing Canvas menu 2Paul Brooks
    Participant

    Hi Jamie
    Bit of a saga this afternoon…I noticed a ” missing above on an import statement, so put that right. Having seen some examples on the net I also played with including and excluding brackets around the import file names, settling in the end on no brackets. I tried the child theme again, and the menu was now horizontal and colours as required but the sub items were at top level in menu. Up to now every page was defined as No Parent. Clutching at straws I defined the subs as having appropriate Parent “…”. This made sub items appear correctly below the right parent, but the left to right sequence of top level items was wrong – didnt reflect the sequence defined in Appearance>Menu. Time to clutch at another straw – I changed all the page order values from 0 to the order the menu items should be in, and voila – this put the menu sequence right. I’m now left with just one problem throughout the above – Home appears twice on the menu. There is only one page called Home. If I use Appearance>menu to delete Home, still 2 persist.I’ve tried deleting the entire menu and rebuilding it but still have 2 Homes. If I revert to canvas as my theme I only get one Home on the menu. I’d appreciate your thought on that, and whether all of the above were necessary – too many variables, too little knowledge to be sure here. As a BTW is the import of canvas/css/reset.css necessary? – I can’t find the file using ftp on host.
    Thanks
    Paul

    #4718
    Customing Canvas menu 3Jamie Marsland
    Keymaster

    Hi Paul,

    Sounds like you are having fun :)

    Here’s a link to a really good tutorial so you can check your customisations/child themes are correct http://www.woothemes.com/tutorials/customizing-a-child-theme.

    One option for you is just to put your customisations into custom.css and remember to back this up anytime you upgrade :)

    Jamie

    #4720
    Customing Canvas menu 2Paul Brooks
    Participant

    Thanks Jamie – any thoughts on solving the 2 x Home in the menu?
    Regards
    Paul

    #4721
    Customing Canvas menu 3Jamie Marsland
    Keymaster

    Can you check you have your menu selected as primary menu selected in appearance / menus. When you activate a new theme it will unselect this.

    J

    #4729
    Customing Canvas menu 2Paul Brooks
    Participant

    Thanks Jamie
    I’ve reseleted my menu as Primary. This solved the 2 x Home, but my menu has become vertical again, with bullets and underlines and >> indicating subs. The order and structure is fine and the drop downs act as fly-outs.
    All is correct if I don’t use a child theme and use custom css with exactly the same css code, but I feel now I’m not far away from a solution and would really like to understand the styling issue and how to use a child theme correctly. Would it help if I emailed you the site url/login? It’s not ready for public yet.
    Regards Paul

    #4731
    Customing Canvas menu 3Jamie Marsland
    Keymaster

    Hi Paul,

    Could you email me the child theme so i can test locally.

    thanks,
    Jamie

    #4771
    Customing Canvas menu 2Paul Brooks
    Participant

    Hi Jamie
    I’ve emailed the child theme to you
    Thanks
    Paul

    #4838
    Customing Canvas menu 2Paul Brooks
    Participant

    Hi Jamie
    Looking around for an answer on this I came across Fresh Canvas. Cribbing from that I’ve replaced my 2 import statements picked up from some Woo help with this –
    @import url(“../canvas/style.css”);
    and all is now working fine
    Regards
    Paul

    #4909
    Customing Canvas menu 3Jamie Marsland
    Keymaster

    Hurrah well done :)

    j

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.
Scroll to Top