22 May 2015

BTT #3 | CUSTOMISE YOUR SEARCH BAR

This is a super easy design tutorial for how to customise your search bar. I see so many gorgeous blogs and then notice they still have the standard blogger search bar and lets be frank, it's pretty ugly! There is a quick fix for this, and it's customisable to suit your layout! Head to CUSTOMISE > ADVANCED > ADD CSS and add the code below:

input.gsc-input {
  border: 1px solid #000!important;
  width: 99%;
  height: 20px;
  background: #ffffff;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
  -webkit-box-align: center;
  text-align: center;
  cursor: default;
  font-family: oswald;
  text-transform: uppercase;
  font-weight: normal;
  color: #000;
  height: 24px;
  padding: 0px0px 0px 0px;
  font-size: 9px;
  border: 1px solid #000;
  background-color: #fff;
  box-sizing: border-box;
  letter-spacing: 3px;
}

The top bit of the code alters the search bar and the bottom code alters the search button. I have added some standard changes for you, but play around with the code till you get the button how you like it, I have bolded some areas you might want to change up! Don't forget to press APPLY TO BLOG. Let me know if there are any topics you would like me to cover in this series!
Share: Pin This Email This

MEET THE AUTHOR: Serena Ozgowicz is a 24 year old Puggle owner with a passion for beauty, crafts and coding! You can follow her on facebook, twitter and instagram. Thank you for reading this post!

No comments//

Post a Comment

CUSTOM BLOG DESIGN STYLED BY PRETTYWILDTHINGS