Customizing "Load More Posts" button for Neat!

• 

  reversethieves · Member · Jul 16, 2012 at 2:39 pm

  • Copy link
  • Add topic to favorites

  Hello. I’d like to be able to make this feature fit in with the rest of my site. Can I please have the CSS coding necessary for this? I just want to play around with it, but I don’t know the correct tags. I’m using the Neat! theme.

  http://www.reversethieves.com

  Thank you.

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

• 

  thesacredpath · Member · Jul 19, 2012 at 3:04 am

  • Copy link

  Here are the basic rules for the load more posts button:

  .infinite-scroll #infinite-handle span {
  background-color: #FFFFFF;
  color: #36769C;
  }
  
  .infinite-scroll #infinite-handle span:hover {
  background-color: #36769C;
  color: #FFFFFF;
  }
  
  #infinite-handle span {
  border: 1px solid #303030;
  border-radius: 2px 2px 2px 2px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  padding: 6px 26px;
  }

  The following is the little down arrow before the text in the button.

  #infinite-handle span:before {
  color: #BDBDBD;
  content: "⬇";
  font-size: 12px;
  font-weight: bold;
  height: 14px;
  line-height: 10px;
  margin-right: 10px;
  width: 14px;
  }

• 

  reversethieves · Member · Jul 20, 2012 at 1:42 pm

  • Copy link

  Thanks so much! This worked great.

  One follow-up. I can’t seem to change the color of the arrow when it is hovered over. It always becomes white.

• 

  thesacredpath · Member · Jul 20, 2012 at 10:48 pm

  • Copy link

  The hover color for the arrow would be here:

  #infinite-handle span:hover:before {
  color: #FFFFFF;
  }

• 

  reversethieves · Member · Jul 21, 2012 at 12:42 am

  • Copy link

  Thank you! Looks great!

• 

  thesacredpath · Member · Jul 21, 2012 at 1:44 am

  • Copy link

  You are welcome.