@media rules assistance please for customised Expound theme

• 

  designsimply · Member · Jan 18, 2014 at 3:04 am

  • Copy link

  Great. It’s also very helpful that you’ve been including specific links!

  Looking at this post:
  http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/

  The following set of selectors from the theme’s original CSS are matching “Human Rights” for that post as well as the light gray menu items in that submenu: “Discrimination of Prostitution,” “Human Trafficking Awareness,” and “Online Safety.”

  .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a

  Here’s the complete rule:

  .navigation-main ul > .current_page_item ~ .current_page_item a,
  .navigation-main ul > .current-menu-item ~ .current-menu-item a,
  .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a,
  .navigation-main ul > .current-menu-parent ~ .current-menu-parent a,
  .navigation-main ul > .current-post-parent ~ .current-post-parent a {
  	background: #3a3a3a;
  }

  It looks like you copied that rule into your CSS earlier and changed the color to maroon and also added “!important”

  .navigation-main ul > .current_page_item ~ .current_page_item a, .navigation-main ul > .current-menu-item ~ .current-menu-item a, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
  	background: maroon;
  	color:#fff !important
  }

  Then I proposed you change it to take out the tilde characters because that rule was causing all the menu items under “Human Rights” to be maroon for that post and you didn’t want that.

  When you made the change to take out the tilde characters, then the match for the four menu items we’re talking about (Human Rights, Discrimination of Prostitution, Human Trafficking Awareness, Online Safety) fell back to the light gray color (#3a3a3a) for that rule from the original theme CSS.

  So, if you want to turn those that lighter gray color to dark gray, you need the rule with the tilde, BUT! you need to put it in the right order if you also want to add another rule after it that changes some of the other matched menu items to maroon. I hope I’m doing this a little justice because it’s a bit hard to explain with so many conflicting rules in your custom CSS! :)

  So, to turn the light gray (#3a3a3a) menu items on on this post http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/ to the darker gray (#2a2a2a) like the other top level menu items are currently, you can add this rule:

  .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
  	background: #2a2a2a;
  }

  But it MUST be added before this rule from your current custom CSS:

  .navigation-main ul > .current_page_item .current_page_item a, .navigation-main ul > .current-menu-item a, .navigation-main ul > .current-post-ancestor a, .navigation-main ul > .current-menu-parent a, .navigation-main ul > .current-post-parent .current-post-parent a {
  	background: maroon;
  	color:#fff !important
  }

  Because if it’s added after that rule then it will be more specific and the dark gray will override the maroon for all the items under “Human Rights.”

  The order in which CSS items are added matters a lot. If there are two rules that match the same element, the latest rule listed gets used. This is called specificity in CSS, and it’s hard to get a handle on it if you’re using complex CSS rules (and using a lot of !important rules can really make things confusing if you’re not very careful with them).

  If you want to learn more about specificity, you might like these links, especially if you’re a Star Wars fan. :)
  http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
  http://htmldog.com/guides/css/intermediate/specificity/

• 

  souldestructionblog · Member · Jan 18, 2014 at 8:52 pm

  • Copy link

  Thank you, but it still isn’t working properly. Human Rights isn’t highlighted on the main menu on the post we referred to earlier and also now on other posts all submenu items are highlighted when they shouldn’t be. This post is an example http://ruthjacobs.co.uk/2014/01/15/lori-adorable-sex-worker-and-sex-worker-rights-advocate-interview/

  Thank you

• 

  souldestructionblog · Member · Jan 19, 2014 at 1:26 am

  • Copy link

  It’s also the same with pages too. So all submenu items are highlighted when only one should be. For example on this page every submenu item is highlighted when it should only be the first on the main menu http://ruthjacobs.co.uk/about-ruth-jacobs/ and others such as http://ruthjacobs.co.uk/sites-i-like/ and http://ruthjacobs.co.uk/useful-links/ and http://ruthjacobs.co.uk/external-sites/ . Thanks

• 

  souldestructionblog · Member · Jan 19, 2014 at 11:24 pm

  • Copy link

  I’ve fixed the aforementioned issues but I am still left with every submenu item hightlighted when a post is in two or more categories that are also main menu items. This post is an example http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/ and http://ruthjacobs.co.uk/2013/07/30/michelle-morgan-an-artist-and-a-survivor-of-prostitution-meets-me-to-share-about-her-art-and-her-life-after-one-month-out-of-the-sex-trade/ Many thanks

• 

  souldestructionblog · Member · Jan 20, 2014 at 12:40 am

  • Copy link

  Just to let you know as a temporary measure I have changed the video main menu category to a link instead which stops all submenu itms being highlighted under other parent categories when a post falls under two categories. If this can be resolved so I can use the category ‘videos’ instead of the link on the main menu, then I would greatly appreciate that. So you have the code it’s posted below. Thanks again

  .navigation-main li:hover > a {
  	background: maroon;
  	color: white;
  }
  
  .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
  	background: #212121;
  }
  
  .navigation-main ul > .current-post-parent ~ .current-post-parent a, .navigation-main ul > .current-menu-parent .current-menu-parent a, .navigation-main ul > .current-post-parent .current-post-parent a, .navigation-main ul > .current_page_item .current_page_item a, .navigation-main ul > .current-post-parent .current-post-parent a {
  	background: maroon;
  	color: #fff;
  }
  }
  
  .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a:hover, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a:hover, .navigation-main ul > .current-post-parent ~ .current-post-parent a:hover {
  	background: maroon;
  	color: white;
  }
  
  .main-small-navigation ul > .current_page_item, .main-small-navigation ul > .current-menu-item {
  	background: maroon;
  }
  
  .navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent, button, input[type="button"], input[type="reset"], input[type="submit"], .button-primary, a.button-primary, a.button-primary:visited, .wpm-button-primary, a.wpm-button-primary {
  	background-color: maroon !important;
  }

• 

  designsimply · Member · Jan 20, 2014 at 4:42 pm

  • Copy link

  Let’s look at one thing at a time. Please switch the Videos menu item back to a category and make NO other changes to the CSS and then let’s examine this post so I can make sure I’m clear about the problem:

  Rt Hon Mrs Theresa May MP: Make the Merseyside hate crime model of policing prostitution law

• 

  souldestructionblog · Member · Jan 20, 2014 at 7:49 pm

  • Copy link

  Thank you, but I hate my site looking messy with all those submenu items highlighted when they shouldn’t be. Is there another way to work this out please?

• 

  designsimply · Member · Jan 20, 2014 at 9:48 pm

  • Copy link

  I’m sorry but I can’t see the problem clearly to work on it unless it’s visible on your site.

  There are a couple options though. One is that I can continue to try to explain based on theory and based on the information you have provided.

  I really think the CSS rules are working as expected and the problem is that you’re getting confused by having so many different rules for similar things that overlap. So, a 2nd option could be to remove all of the menu-related custom CSS and start over with that part. You should be able to do that in the preview section without leaving your site looking messy for viewers on the front end. If you want to take this direction, I can help but we’d have to step back and also I would assume a blank slate with the CSS.

  Another option, if you would like, would be to hire a designer to spend some more in-depth time on the issue. There is an inquiry form at http://en.support.wordpress.com/customize-my-site/request-theme-customization/ if you’re interested in that.

  As staff for WordPress.com, we are not here to provide design consultation but we do are best and care very much about giving CSS support when we can. We can offer direction, but not in-depth design work. Once we start spending a great deal of time on one issue, it becomes more of a question of design consultation and not really about the CSS tools that we support or providing basic CSS education and direction.

• 

  designsimply · Member · Jan 20, 2014 at 9:54 pm

  • Copy link

  I’ll try some of option two :) which is to try to explain some of the past issues you posted about based on the information you have provided.

  Thank you, but it still isn’t working properly. Human Rights isn’t highlighted on the main menu on the post we referred to earlier and also now on other posts all submenu items are highlighted when they shouldn’t be. This post is an example http://ruthjacobs.co.uk/2014/01/15/lori-adorable-sex-worker-and-sex-worker-rights-advocate-interview/

  On this post http://ruthjacobs.co.uk/2014/01/15/lori-adorable-sex-worker-and-sex-worker-rights-advocate-interview/ if I apply the CSS from your example at https://mc.a8c.com/happiness/tqr/?topic_id=369244#post_1606541 in a preview then the Human Rights main menu is highlighted as expected.

  If you added that sample CSS and also updated the menu so the Video is a category video item, it looks to me like the Human Rights submenu items would continue to look like it does right now (screenshot).

• 

  designsimply · Member · Jan 20, 2014 at 9:59 pm

  • Copy link

  It’s also the same with pages too. So all submenu items are highlighted when only one should be. For example on this page every submenu item is highlighted when it should only be the first on the main menu http://ruthjacobs.co.uk/about-ruth-jacobs/ and others such as http://ruthjacobs.co.uk/sites-i-like/ and http://ruthjacobs.co.uk/useful-links/ and http://ruthjacobs.co.uk/external-sites/

  To test this, I opened each page and previewed using the CSS you provided at https://en.forums.wordpress.com/topic/media-rules-assistance-please-for-customised-expound-theme?replies=33#post-1606541

  In my tests, only the expected submenu items were highlighted. None of the menus had all of the submenu items highlighted.

• 

  designsimply · Member · Jan 20, 2014 at 10:41 pm

  • Copy link

  I’ve fixed the aforementioned issues but I am still left with every submenu item hightlighted when a post is in two or more categories that are also main menu items. This post is an example http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/ and http://ruthjacobs.co.uk/2013/07/30/michelle-morgan-an-artist-and-a-survivor-of-prostitution-meets-me-to-share-about-her-art-and-her-life-after-one-month-out-of-the-sex-trade/

  I checked this page again http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/

  Using your sample CSS from https://en.forums.wordpress.com/topic/media-rules-assistance-please-for-customised-expound-theme?replies=33#post-1606541 this rule is the one that’s affecting the submenu under Human Rights, but it’s not working on those elements independently, it’s the whole submenu and parent block.

  .navigation-main ul > .current-post-parent ~ .current-post-parent a, .navigation-main ul > .current-menu-parent .current-menu-parent a, .navigation-main ul > .current-post-parent .current-post-parent a, .navigation-main ul > .current_page_item .current_page_item a {
  	background: maroon;
  	color: #fff;
  }

  And this part is the specific selector that’s the cause:

  .navigation-main ul > .current-post-parent ~ .current-post-parent a

  It would probably help to preview the following two examples just in order to visualize what’s happening. First try previewing this (make sure the Video menu item is set to a category):

  .navigation-main ul > .current-post-parent ~ .current-post-parent a {
  	background: yellow;
  }

  Then delete that and preview the same rule without the ~

  .navigation-main ul > .current-post-parent .current-post-parent a {
  	background: yellow;
  }

  See the difference?

  Now, in order to keep the top level Human Rights menu highlighted based on the CSS posted at https://en.forums.wordpress.com/topic/media-rules-assistance-please-for-customised-expound-theme?replies=33#post-1606541 try adding the following to the very bottom of that set of code:

  .navigation-main ul > .current-post-parent .sub-menu a {
  	background: #212121;
  }
  
  .navigation-main ul > .current-post-parent .current-post-parent a {
  	background: maroon;
  }

  What it does is target in on just the submenu items, turns them all dark gray, and then turns the current post parent submenu items back to maroon.

• 

  souldestructionblog · Member · Jan 21, 2014 at 12:17 am

  • Copy link

  Thank you so much! That’s fixed it perfectly. I really appreciate your help.

• 

  designsimply · Member · Jan 21, 2014 at 12:21 am

  • Copy link

  Whew! I’m so glad it worked out this time! :)