Eighties Theme: Changing Mouse Over Color in Post Titles, Time Stamp, Author & Highlight Color

• 

  lonnie01234 · Member · Feb 20, 2015 at 4:15 am

  • Copy link
  • Add topic to favorites

  I would like to change the color of the post title when the mouse is placed over it as well as the date stamp and author. Currently, the color is a salmon/pink color. I would like a light green. Also, when the title of a post is highlighted it is a pink/salmon color. I would like to make that grey or light green. Thank you for your help!

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

• 

  staff-happychia · Staff · Feb 20, 2015 at 9:16 am

  • Copy link

  Please try this CSS:

  .entry-title a:hover,
  .entry-meta-time a:hover {
  color: LightGreen;
  }

  when the title of a post is highlighted it is a pink/salmon color.

  How are you highlighting the title?

• 

  lonnie01234 · Member · Feb 20, 2015 at 11:02 am

  • Copy link

  When I click the mouse, hold, and drag the cursor, the color of the text that is highlighted turns white which is fine but the color of the highlight is pink. Your previous suggestion worked I appreciate your help!

• 

  staff-happychia · Staff · Feb 20, 2015 at 10:37 pm

  • Copy link

  Ah, text selection :-)

  ::selection {
     background:LightGreen; /* WebKit/Blink Browsers (Chrome, Safari etc.) */
  }
  
  ::-moz-selection {
    background:LightGreen; /* Gecko Browsers (Firefox etc.) */
  }

  In case you are keen, here is the reference.

• 

  lonnie01234 · Member · Feb 20, 2015 at 10:47 pm

  • Copy link

  Thanks again for your expertise. Worked great! I have found one more problem with colors. Buttons at the bottom of the post that link to older/newer posts are pink, and the pink is enlarged if hovered over. Similarly, tags turn pink if moused over. I have tried to figure out how to make the changes, but I am inexperienced with CSS and haven’t had success on my own. I really, really appreciate the help!

• 

  staff-happychia · Staff · Feb 20, 2015 at 11:24 pm

  • Copy link

  Let’s add this CSS:

  .paging-navigation .nav-previous a,
  .post-navigation .nav-previous a,
  .comment-navigation .nav-previous a,
  .paging-navigation .nav-next a,
  .post-navigation .nav-next a,
  .comment-navigation .nav-next a  {
      background: LightGreen;
  }
  
   .post-navigation .nav-previous a:hover,
   .post-navigation .nav-previous a:hover,
  .comment-navigation .nav-previous a:hover,
  .paging-navigation .nav-next a:hover,
  .post-navigation .nav-next a:hover,
  .comment-navigation .nav-next a:hover  {
        background: LightGreen;
        box-shadow: 0 0 0 3px LightGreen;
   }
  
   .entry-meta-tags a:hover {
       background: LightGreen;
   }

  Once you add everything we can condense some CSS if you wish.

• 

  thesacredpath · Member · Feb 26, 2015 at 7:21 pm

  • Copy link

  Hi, it looks like you got the tags taken care of. For the next/previous post box, you can use the following to change the hover colors. The “enlarging” you see is the box shadow. You can make that the same color as the hover for the button, or a different color as you choose.

  .post-navigation .nav-next a:hover, .post-navigation .nav-previous a:hover {
      background: #0000ff;
      box-shadow: 0 0 0 3px #ffff00;
  }

• 

  lonnie01234 · Member · Feb 27, 2015 at 1:52 pm

  • Copy link

  I appreciate your help very much! It worked great!

• 

  thesacredpath · Member · Feb 27, 2015 at 9:21 pm

  • Copy link

  You are welcome.

  staff-happychia, your reply was caught in spam. I unspammed you. If that ever happens, modlook the thread and add “chaitanyamsv caught in spam” or something similar.

• 

  staff-happychia · Staff · Feb 27, 2015 at 10:20 pm

  • Copy link

  Ah, thank you @thesacredpath. I wasn’t aware I was treated as spam.

  How do I know if I was caught in spam?

• 

  thesacredpath · Member · Feb 28, 2015 at 3:52 am

  • Copy link

  staff-happychia, if you reply to a thread and then go back to the main CSS forum page, your reply should be at the top, or near the top and your username should be reflected as the last poster. If it isn’t, that typically means you are caught by the spam filter. Doesn’t happen too often, but once in a while it does.

• 

  staff-happychia · Staff · Mar 1, 2015 at 1:39 am

  • Copy link

  Thank you @thesacredpath.

• 

  michaelanico · Member · Mar 2, 2015 at 11:47 am

  • Copy link

  Thanks for the CSS!

  I wonder if you also have the code for changing the “older posts” box on the front page, both background and the pink colored border?

• 

  thesacredpath · Member · Mar 2, 2015 at 8:52 pm

  • Copy link

  Hi there, the first rule below is the normal color for the button. The second rule is for the hover colors. The button actually has a box shadow rather than a border.

  #infinite-handle span {
      background-color: #0000ff;
  }
  #infinite-handle span:hover {
      background-color: #cc0000 !important;
      box-shadow: 0 0 0 3px #00ff00 !important;
  }

• 

  michaelanico · Member · Mar 3, 2015 at 10:12 am

  • Copy link

  Thanks! Works great!

• 

  thesacredpath · Member · Mar 3, 2015 at 5:19 pm

  • Copy link

  You are welcome.