WordPress.org

Forums

[resolved] [UI Adjustment] Navigation Menu & Document Background Color (5 posts)

  1. Jay
    Member
    Posted 1 year ago #

    This is a bit heavier menu ui adjustment. Adjusts various properties of the left navigation menu and document body to enhance readability.

    html {
    	background-color: #fafafa;
    }
    #adminmenu div.wp-menu-name {
      font-weight: 100;
      padding: 9px 12px 9px;
      line-height: 1em;
    }
    #adminmenu div.wp-menu-image {
    	height: 14px;
    	width: 36px;
    }
    #adminmenu .wp-menu-image img {
    	padding: 0px 0 0;
    }
    
    #adminmenu li.menu-top {
    	min-height: 30px;
    }
    div.wp-menu-image:before {
    	padding: 5px 0;
    }
    #adminmenu li.wp-menu-separator { margin: 9px; background-color: #444; height: 1px; }
    
    ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu>li.current>a.current:after {
    	border-right-color: #fafafa;
    }
    #titlediv #title {
    	border: 0px solid transparent;
    	border-bottom: 2px solid #ccc;
    	box-shadow: none;
    }
    #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
    	top: 8px;
    }
    #adminmenu .wp-has-current-submenu ul>li>a, .folded #adminmenu li.menu-top .wp-submenu>li>a {
    	padding: 5px 12px;
    }
  2. Hey there.

    The background-colour was changed to #f3f3f3 a couple of days ago to enhance the readability. More information on this change can be found here:
    http://core.trac.wordpress.org/changeset/26788

    Some of the additional changes in your code, relating to alignment, have now been implemented also:
    http://core.trac.wordpress.org/changeset/26675

    If you're running the latest version, you'll have noticed these improvements in the past couple of days.

    If you're interested, you can follow along with changes to the dashboard area's UI on trac:
    http://core.trac.wordpress.org/ticket/25858

    Marking this topic as resolved for now, feel free to reopen if you think something in the UI still needs a bit of tweaking.

  3. Jay
    Member
    Posted 1 year ago #

    Great job with the adjustments so far.
    I've continued to make a few adjustments to the UI to enhance readability. Some are personal changes, but I think the majority will help the community. I've gone ahead and commented the changes Im using as well.

    /* Set the seperator color - Visual clues for navigation "sections".
    /* Since CSS3 is heavily used, only the rgba value is set.
    /* Allows for visual seperation on darker color schemes, contrasted by "more whitespace" on lighter themes.
    /* "Dark is defined, White has whitespace"
    ===================================================================================== */
    #adminmenu li.wp-menu-separator { margin: 9px; background-color: rgba(255,255,255,0.15); height: 1px; }
    
    /* Adjustment for Spacing between menu items. Currently typography spacing leads to disorientation between nav menu items
    ========================================================================================================================== */
    #adminmenu div.wp-menu-name {
      font-weight: 100;
    
      padding: 7px 12px 7px;
      line-height: 1.25em;
    }
    
    #adminmenu div.wp-menu-image:before { padding: 6px 0; }
    #adminmenu div.wp-menu-image img {	padding: 0px 0 0; }
    #adminmenu li.menu-top { min-height: 30px; }
    
    /* Set the background color for the editor's in the plugins and appearence sections so text can be read. Higher contrast.
    ========================================================================================================================== */
    #template textarea { background-color: #fff; }
    
    /* Since the new theme is "metro" style, get rid of ugly shadows
       and make a definite seperate between title and permalink with border
    ================================================================================================================================== */
    #titlediv #title {
    	border: 0px solid transparent;
    	border-bottom: 2px solid #ccc;
    	box-shadow: none;
    }
    
    /* Slightly reduce the spacing between open submenu items, emulates line-height: 2em;
    ================================================================================================================================== */
    #adminmenu .wp-has-current-submenu ul>li>a, .folded #adminmenu li.menu-top .wp-submenu>li>a {
    	padding: 5px 12px;
    }
    
    /* Match metabox section header background colors to rest of theme. Gives "visual clue" as to what's a section "header", and allows
       for identifcation of a "clickable region"
    ================================================================================================================================== */
    .postbox h3, #namediv h3, #submitdiv h3,#poststuff h3, .metabox-holder h3 { background-color: #333; color: #fff; }
    
    /* Plugin section color overhaul. Darker colors for deactivated plugins, lighter color for activated.
    ================================================================================================================================== */
    .plugins tr { background-color: #444; color: #eee; }
    .widefat thead tr th,.widefat tfoot tr th { background-color: #333; color: #eee; border-bottom: 1px solid #666; }
    th.manage-column a, th.sortable a:hover, th.sortable a:active, th.sortable a:focus {color: #eee;}
    .sorting-indicator:before {color: #888;}
    .plugins .active td,
    .plugins .active th,
    tr.active + tr.plugin-update-tr .plugin-update {
    	background-color: #fff;
    	color: #222;
    }
    .plugins .active .plugin-description p,
    .plugins .active .plugin-version-author-uri {
    	color: #333;
    	font-size: 13px;
    }
    .plugins .inactive .plugin-description p,
    .plugins .inactive .plugin-version-author-uri {
    	color: #ccc;
    	font-size: 13px;
    }
    
    .plugins .inactive .plugin-title strong {color: #fff;}
    
    .plugins tr.active.plugin-update-tr + tr.inactive th,
    .plugins tr.active.plugin-update-tr + tr.inactive td,
    .plugins tr.active + tr.inactive th,
    .plugins tr.active + tr.inactive td,
    .plugins .inactive td,
    .plugins .inactive th,
    .plugin-install #the-list td {
    	box-shadow: none;
    	border-bottom: 1px solid #555;
    }
    .plugins td.desc { line-height: 1.25em; }
    
    .plugins .inactive td,
    .plugins .inactive th,
    .plugins .active td,
    .plugins .active th  {
    	color: #ccc;
    	padding: 5px 9px;
    }
    
    .plugins .active td { color: #333; }
    .plugins .inactive a { color: #9ec9ed; }
    .plugins .inactive a:hover { color: #b9dffe; }
    table.widefat span.delete a, .plugins a.delete { color: #e18181; }
    table.widefat span.delete a:hover, .plugins a.delete:hover { color: #ff5959; }
    
    /* Adjust the screen meta links such as screen options & help to match the metro theme
    ================================================================================================================================== */
    #screen-meta-links a {
    	border: 1px solid #444;
    	background-color: #333;
    	color: #eee;
    	box-shadow: none;
    }
    #screen-meta-links a:hover { color: #fff; }
    #screen-options-wrap, #contextual-help-wrap { border-bottom: 2px solid #333; }
    #contextual-help-link-wrap { display: none !important; } /* personal option to remove help section */
    
    /* Adjust the size and reposition the plugin details "popup box". Currently aligns to bottom, severely hampering readability
       Chrome 31.0.1650.63 m
    ================================================================================================================================== */
    #TB_window { top: 10%!important; height: 80%!important; bottom: 10%!important; }
    #TB_iframeContent { height: 100%!important; }
  4. Jay
    Member
    Posted 1 year ago #

    Another quick adjustment

    /* Adjust the posts/pages comment count bubble text alignment
    ========================================================================================================================== */
    .post-com-count span {text-align: center;}
  5. Hey.

    I like your attention to detail. :) I hadn't noticed that the number in the posts/pages count bubble wasn't centred.

    These forums aren't the best place to submit CSS, or to suggest slight changes to the UI. Discussions like these need to be ran through the WordPress UI team, and it's best to start them by submitting a new ticket to Trac:
    https://core.trac.wordpress.org/newticket

    Or, you can add additional comments on the new UI's design to the thread here:
    http://core.trac.wordpress.org/ticket/25858

    Some guidelines on working with Trac can be found here:
    http://make.wordpress.org/core/handbook/working-with-trac

    Hope this information is useful to you.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.