21 October 2014

Custom search bar

21 October 2014
I've been using a custom search bar in some of the free templates I have on here and I realized I haven't included instructions on how to adjust the width.

If you're using any of this blog's free templates with the custom search bar, here's how to adjust the width of the search bar so it won't look annoying when you adjust the sidebar width.

1. Go to Template, then Edit HTML. Make sure you've backed up your template first!
2. Search for this code:

input#searchinput {
  background: url(http://3.bp.blogspot.com/-aJoIaNi5n0w/T4iXxkJvIiI/AAAAAAAAAHc/Umn8urN9rq4/s1600/spyglass.png)  no-repeat 5px 6px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-size: 14px;
  height: 22px;
  line-height: 1.2em;
  padding: 4px 68px 4px 30px;
}

3. You can adjust the width by adjusting the padding, specifically the second number (68 in the example above).
4. Edit the padding and preview your template first to make sure it all lines up before saving all changes to your template!


How to add the custom search bar

I can't remember where I found the tutorial for the custom search bar because it's been so long. I'm so sorry I can't link up to that tutorial! Anyway, here's how to add this type of search bar to a Blogger blog.

1. First, back up your template.
2. Then go to Template, then Edit HTML.
3. Insert this code above ]]></b:skin>

/* Forms */
input[type=text],
input[type=password],
textarea {
  background: #f3f3f3;
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  border: 1px solid #ccc;
  color: #222;
}

input[type=text]:focus,
textarea:focus {
  color: #363636;
}

textarea {
  padding-left: 0;
  width: 98%;
}

input[type=text] {
  padding: 2px;
}

input#searchinput {
  background: url(http://3.bp.blogspot.com/-aJoIaNi5n0w/T4iXxkJvIiI/AAAAAAAAAHc/Umn8urN9rq4/s1600/spyglass.png)  no-repeat 5px 6px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-size: 14px;
  height: 22px;
  line-height: 1.2em;
  padding: 4px 68px 4px 30px;
}

input#searchsubmit {
  display: none;
}

4. Save the changes to your template.
5. Go to Layout and add a new HTML/Javascript gadget.
6. Copy/paste this code:

<div align="left">
<form action="http://YOUR BLOG URL/search/" id="searchform" method="get">
<input class="field" id="searchinput" name="q" placeholder="Search" type="text" />
<input class="submit" id="searchsubmit" name="submit" type="submit" value="Search" />
</form>
</div>

7. Replace the red text with your blog URL and save!


22 September 2014

[WordPress] Blog Design Tips: How to customize the Jetpack email subscription widget

22 September 2014
This is probably my first WordPress-related blog design tip. I had this over at my main blog but decided that, since this is design-related, I should post it here.

Before I decided to leave Feedburner, I was playing with the idea of adding the Jetpack email subscription widget to my blog. Those who use the widget may know that the style of that widget is pretty basic, so I set out to customize it a little bit. You know, make the widget label follow my template's style for widget titles and background colors and what not. It took me a little while to find a solution. Had to do a little trial-and-error until I got results. Eventually I ended up with a simple yet customized email subscription widget like the one on the right below.

Jetpack email subscription
From plain to not-so-plain! Yayyyy. 
So, how did I manage to do this?

First thing I did was go to Google! I found a few tutorials but they involved going into the source files and editing the code from there. I'm not really comfortable with that so I decided to try and see if I can simply add a code in Edit CSS under Appearance. By the way, you have to activate the Custom CSS module in Jetpack to get this feature. Anyway, I figured I just needed to find the identifier for the widget and its elements, like the title, content, etc. and start from there. I did go to the source files - I looked for it via the File Manager of my hosting account - just to see if I could find the identifiers, but I couldn't find the right one so I resorted to one of the things I do when I want to take a look at a blog's code. I opened my blog on another tab on my browser, found the email subscription widget, right-clicked on it and selected "Inspect Element." This opens a new window showing CSS codes and stuff.

Right-clicking on the widget showed me this.
Right-click on the widget and select 'Inspect element' to see this.
If you look at the screencap above, the highlighted line refers to where the code for the Jetpack email subscription widget starts. The texts in parentheses after "class" are identifiers and I just had to figure out which ones to use. After a little trial and error, I finally found the identifiers I needed: subscribe-blog-blog_subscription-2  and widget-title label . First I worked on the widget content. I went to Edit CSS and added this code to customize the widget content:

#subscribe-blog-blog_subscription-2 {
background: #F9F9F9;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px dashed #CCCCCC;
}
I hit Preview and it looked like this:  
Jetpack email subscription widget 3
It looked alright so I hit Save Stylesheet. Then I went to Editor to take a look at my theme Stylesheet and find the style for the widget titles. I copied the code and went back to Edit CSS where I pasted the code right below the code I just added for the widget content.

 It looked something like this:

.widget-title {
font-family: 'Raleway', sans-serif;
font-size: .9rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 20px;
color: #444;
}
So, basically that's just the code for all the widget titles. I added the word "label" so that it would refer to the title of the Jetpack widget (if you look at the screencap again, you'll see "label" below "widget-title"). I added the word "label" next to "widget-title" and added a few more lines for background color and padding (see blue text below).

.widget-title label {
font-family: 'Raleway', sans-serif;
font-size: .9rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 20px;
color: #444;
background: #FCDFFF;
padding: 15px;
}
I hit Preview again and this is what it looked like.
I wanted the widget title to look like a sticky tape kind of thing so I added this to the code for the widget content: margin-top: -20px; to make it move closer to the title and this one to the widget-title label: margin-left: 10px; to make the title move to the right. So then I had codes that looked like this:

#subscribe-blog-blog_subscription-2 {
background: #F9F9F9;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px dashed #CCCCCC;
margin-top: -20px;
}
.widget-title label {
font-family: 'Raleway', sans-serif;
font-size: .9rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 20px;
color: #444;
background: #FCDFFF;
padding: 15px;
margin-left: 10px;
}
I hit Preview again and this is what it looked like.

You can make your own adjustments to the codes, like font-family, padding and margins, as well as the colors. I made a few more adjustments to mine to make the widget title look centered.

So that's how I customized by Jetpack email subscription widget -- before I decided to ditch the widget and Feedburner and use Mailchimp instead.

I don't know if this is the best way to do it or if it makes the site quirky in some way. If you know of a better way to customize the widget, maybe you can give us tips! :)

27 February 2014

Blogger Template Experiment 5: Black & White Minimalist Simple Template

27 February 2014
Hey, we have a new template! This one's just really simple. Very toned down. You know how I love minimalist designs.

For this one you'll need to create your own header (I used this font for the demo) and add your own social media icons, as well as the search bar (instructions at the bottom of this post).

You will have to manually add your profile photo, too, if you want to do it like the demo. You just need to adjust the width of the profile pic to 255px.

This template is also customizable using the Blogger Template Designer.




Demo | Download XML File | Download HTML File

You know the drill. Back up your template first, then upload the XML or HTML file of the template above.

Add the search bar

The formatting for the search bar is already embedded in the XML file, but you will have to manually add the search bar in your layout. Go to LAYOUT, select HTML/Javascript, and then copy and paste the code below.
<div align="left">
<form action="http://YOUR BLOG URL/search/" id="searchform" method="get">
<input class="field" id="searchinput" name="q" placeholder="Search" type="text" />
<input class="submit" id="searchsubmit" name="submit" type="submit" value="Search" />
</form>
</div>
Preview and then SAVE!

Change or remove set image size

The images are set to a default size. If you want to change or remove this, go to Edit HTML and look for this code:
.post-body img {
width: 635px;
height: auto;
float: left;
}
.post table.tr-caption-container img {
width: 635px;
height: auto;
float: left;
}
You can change the width or remove the entire code. If you remove the entire code, it will just revert back to the usual options for images (original size, small, medium, large, x-large).

Preview and then SAVE!


24 January 2014

So, I moved my main blog to WordPress.

24 January 2014
Hullo! I moved my main blog to WordPress so I haven't been doing a lot of Blogger design experiments lately. I still plan on exploring Blogger designs though and hopefully I'll be able to do a lot of that this year.

Right now I plan to recreate the old templates that I posted about way way back but wasn't able to share. I received a couple of emails asking about them but I couldn't find the XML files in my computer. So, I'm going to start with those and then do more experiments after. :)

I'm still figuring out WordPress so it looks like I won't be able to do WordPress blog themes just yet. Soon, baby. ;)
© 2014 Color It YOU - Blog Design and Tips. Powered by Blogger.
Legal terms and disclaimers here.