On A Whim theme: 2 Customization Questions

• 

  denatb · Member · Jan 21, 2014 at 4:37 pm

  • Copy link
  • Add topic to favorites

  These questions are both for On A Whim Theme on a blog that has the Custom Design Upgrade:

  1. Re: the header logo photo. Is it possible to change the overall size of that photo? I am finding that the small circle is just too small to show images well. Is there some CSS I can use to double the size of the image as it shows there? That would be a good start. I’d also like to change it to a rectangle rather than a circle, if that is possible as well.

  2. Re: the hearts in the widget area. We removed the hearts that show up in widgets using code I found in a forum topic. Is it possible to replace the heart with a different shape? Perhaps a flower or…?

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

• 

  staff-totoro · Staff · Jan 22, 2014 at 2:00 am

  • Copy link

  Hi there,

  I see that in the time since you have submitted this request, you have updated your header image, and it is no longer a circle. So you have discovered that you can make it a different shape with careful cropping. However, there is no way to make the image this theme uses any larger than 80px wide (or tall, if you were using a horizontal image) using CSS.

  2. Re: the hearts in the widget area. We removed the hearts that show up in widgets using code I found in a forum topic. Is it possible to replace the heart with a different shape? Perhaps a flower or…?

  This can be accomplished with CSS but you will need to find a graphic to replace it. Good idea to keep the shape simple and preferably a white or light color. From there you can add the image to your media library, then click on the edit link and copy the file URL and then try the following line of code.

  .widget-area .widget:nth-child(2n+1):before {
  background: url(http://sewninvermont.files.wordpress.com/2014/01/sewn-in-vermton-logo.jpg) center no-repeat;
  background-size: 116%;
  }

  A few things to note about the above code:
  – You will want to replace the URL with one from an image you add to your media library
  – You may need to experiment with that percent value to make things work with the image you use. I used that percent to match the sample image I chose from your current uploads
  – If you can, use a .png file that has a transparent background. This will match what the theme uses.
  – If you don’t use a .png, no big deal. Just know that your background for the graphic you choose will be visible, so make sure it works with your site colors.

• 

  denatb · Member · Jan 22, 2014 at 11:06 am

  • Copy link

  The shape of the circle changed by surprise, a nice surprise. We’ll see about adding the code for the other piece. Thank you.