Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • November 15, 2016 at 1:06 pm #712462
    DaraEmerson

    Dear Enfold Team,

    Thanks always for your help.
    I am trying to style the menu widget with CSS. Some things work and others not.
    Is it possible to give the basic CSS coding for it so I can adjust what is necessary?

    basically I want to:
    remove the dots
    create a menu color, hover and visited (colors)
    possibly put in lines as in the default side-bar submenu.

    Here is the code I have tried but it is not doing quite what I want:

    /*BLOG WIDGET MENU*/
    #top .widget_nav_menu li {
    background: none;
    outline: none;
    }

    .widget_nav_menu ul:first-child>.current-menu-item>a{
    color: #7aa84a;
    }

    .sidebar .widget_nav_menu ul:first-child>.current-menu-item {
    box-shadow: none;
    }

    #top .widget_nav_menu ul ul li:before {
    content: none;
    }

    #top .widget_nav_menu ul ul li a {
    padding: 6px 0px 7px 0px;
    color: #ebca75;
    }

    #top .widget_nav_menu ul ul li a:hover {
    color: #8fa874;
    }

    #top .widget_nav_menu ul ul li a:visited {
    color: #7aa84a;
    }

    website is tcm-team.at

    November 16, 2016 at 5:21 pm #713058
    Yigit

    Hey DaraEmerson,

    Can you please post a link to your website, temporary admin logins and a screenshot showing the changes you would like to make? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.

    Best regards,
    Yigit

    November 16, 2016 at 5:44 pm #713096
    DaraEmerson

    Thanks I will in the next 2 days.: ) Dara

    November 16, 2016 at 5:45 pm #713098
    Yigit

    Hi!

    Sure Dara. We will keep the thread open and will wait to hear from you. Thread will be on hold. You can simply re-open it by replying :)

    Regards,
    Yigit

    November 28, 2016 at 2:42 pm #717772
    DaraEmerson

    OK Yigit – is this image enough for you?

    View post on imgur.com

    thanks,
    Dara

    PS here is all the css for this subject:

    /*BLOG Remove author*/
    .html_elegant-blog .archive .post-entry .blog-author, .html_elegant-blog .archive .post-entry .comment-container + .text-sep {
    display: none;
    }

    /*remove COMMENTS, DATE everywhere but the Post pages*/
    .page .comment-container, .page .date-container, .archive .comment-container, .archive .date-container {
    display: none;
    }

    /* BLOG SHOW DATE; COMMENT

    #top . (Purchase code hidden if logged out) .minor-meta.date-container, #top . (Purchase code hidden if logged out) .text-sep-date {
    display: inline-block;
    }

    #top . (Purchase code hidden if logged out) .minor-meta.comment-container, #top . (Purchase code hidden if logged out) .text-sep-comment {
    display: inline-block;
    } */

    • This reply was modified 7 years, 12 months ago by DaraEmerson.
    November 29, 2016 at 3:05 pm #718253
    Yigit

    Hi,

    It seems like you copied the codes while you were logged out. That is why there is following in your code

      (Purchase code hidden if logged out)

    Please login and copy the code once again. If that still does not work, please post temporary admin logins here privately so we can look into it.

    Best regards,
    Yigit

    November 29, 2016 at 7:58 pm #718467
    DaraEmerson

    oops! sent you the incorrect css which I had already removed from the css (but thanks for the info on that) so disregard.
    the “correct” CSS I tried but failed with is in the above thread #712462

    All I am looking for is the CSS for sidebar widget menu:
    category, roll-over, visited
    sub-category, roll-over, visited
    adjust the lines and line-height
    etc,,,

    best regards,
    Dara

    • This reply was modified 7 years, 12 months ago by DaraEmerson.
    December 1, 2016 at 4:47 pm #719334
    DaraEmerson

    Dear Yigit,

    I want it to look like this always – whether one is in the main blog page or in a category etc….
    (css for “active” rather than “visited” link)

    View post on imgur.com

    There seems to be more levels of menu css for this
    the menu changes – this is what is happening now:
    1 – main blog page

    View post on imgur.com


    2 – main category page

    View post on imgur.com


    3 – subcategory

    View post on imgur.com


    4 – Tags category

    View post on imgur.com

    SO:
    – The hover, active links need to be the same
    – The subcategory needs to be indented always
    – css for the horizontal lines above and below the category areas in in the snapshot
    – css for the line height of the menu

    Is this clear?

    thanks!
    best regards,
    Dara

    • This reply was modified 7 years, 11 months ago by DaraEmerson.
    December 4, 2016 at 6:06 am #720141
    Ismael

    Hi,

    Thank you for the info.

    Please add the following css codes.

    /* subcat indentation */
#top .widget_nav_menu .sub-menu {
    left: 10px;
    position: relative;
}

/* hover color */
#top .widget_nav_menu ul ul li a:hover {
    color: #d45226;
}

/* line height */
#top .widget_nav_menu li {
    line-height: 18px;
}

    Best regards,
    Ismael

    December 5, 2016 at 1:35 pm #720448
    DaraEmerson

    Thanks Ismael!
    some things worked and others not.
    I have been fiddling about with in in inspection mode and tried to clean things up a bit.
    Appreciate the clarification!

    1 – still trying to figure out how to add the lines in-between the category sections.
    (see #719334 where image is placed)

    2 – how to increase the spacing between these lines – so there is also more space between the sub-category and the next main category item?
    (which I can probably figure out once I have question “1” answered)

    View post on imgur.com

    3 – the “roll-over” works but “current” not.
    I assume there is an automatically programmed “current” based on menu color which makes it simply bolder

    View post on imgur.com

    Have a great Monday! THe sun is shining. At least in Vienna

    December 8, 2016 at 5:19 am #721782
    Ismael

    Hi,

    1.) Add a border at the bottom of the items.

    #top .widget_nav_menu ul li a {
    border-bottom: 1px solid gray;
}

    2.) Adjust the line-height property of the widget items.

    #top .widget_nav_menu ul ul li a {
    line-height: 22px;
}

    3.) For the active link, use this.

    #top .widget_nav_menu ul ul .current-menu-item a {
    color: #d45226;
}

    Best regards,
    Ismael

    December 10, 2016 at 11:29 am #722677
    DaraEmerson

    Dear Ismael,
    Thank you for all the help.
    they all worked.
    It is so obvious when seen – I do not know why my code did not work.

    Last questions:
    1 – the featured images for the blog posts are not appearing.
    Is there any reason for this? how to remedy?
    2 – When searching via TAGS the pages have all the word “Posts” in the upper left corner of page
    how to remove this?

    View post on imgur.com

    Thanks! and Best regards,
    Dara

    • This reply was modified 7 years, 11 months ago by DaraEmerson.
    December 14, 2016 at 5:36 am #724087
    Ismael

    Hi,

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘styling menu widget’ is closed to new replies.