Mingle Tip: Modify Mingle’s Look and Feel

This will probably only be interesting to a few people, but I’m putting it out there anyway. I’ve gotten tired of the orange header and yellow background in input fields in Mingle and decided to make a quick user stylesheet for use with “Stylish”:http://userstyles.org/stylish/.

Here’s the code you’ll need to make the header look like what you want and get rid of the yellow behind the input boxes when you are working on them. You can either paste this directly into Stylish as a new style or you can use the CSS rules in your own way. Just change the “my.mingle.installation.com” to the URL where you installed Mingle.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("my.mingle.installation.com") {
  /* Header Styles */
  #hd, #hd-bottom, #hd-nav li.menu-item, #hd-nav li.menu-item a.first-link {background: #000 !important;}
  #hd-nav li.current-menu-item, #hd-nav li.current-menu-item a.first-link {background: #FFF !important;}

  /* Input Boxes */
  input:focus, textarea:focus {background-color:#FFF !important;}
}

I may create a Firefox extension that will integrate more features like this for people if there is interest.

Leave a Reply

Your email address will not be published. Required fields are marked *