Thursday, March 29, 2012

Blogger Template: Pink Medieval

My inspiration for this layout is basically my love for medieval and pink. I wanted to go for a princess theme but with a medieval spin on it cos I think it's classier and more magical compared to the pink princess thing which has been done to death. We're all mini hipsters deep down inside; always trying to stand out. :P Everything is designed, drawn, photoshopped, edited by me unless otherwise specified.

Header took me a day to complete, I designed a coat of arms consisting of a phoenix, a tiara, flowers and an intricate design which all symbolize something to me, and then drew it in Adobe Photoshop, used a couple of brushes for the border and PSed a stock image I got from Deviantart into the background and viola!

The icons are so cute, aren't they? I wanted to make them into scrolls, but it didn't work with the color and stuff so more medieval brushes to the rescue! The divider was the simplest, I think it only took me like 5 minutes to make them.

Footer is an old fashioned key - see this is the kind of key I wanted to get for my 21st birthday. But you know what? FML. I never got a key from anyone. I chose the words 'the end' because of their association with fairytales.

I feel obliged to clarify that I am not a web designer, my HTML skills are so basic it can make grown men cry. I am not to be held responsible if you f up your template. 

Left: Before / Right: After
I've included the names of the various parts of the blog for those who don't know. :)

Header, tab, sidebar, pager, footer: 

The grey areas were virtually impossible to get rid of, I have tried everything I could think of in Template Designer - changed it to all sorts of colors, set to transparent etc - but it still had a grey undertone. This only happens to the template Awesome Inc. But then I found...
http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_artsy.png
... hiding in the codes! This little sneaky thing is the reason for the grey undertone! It's responsible for the white transparent background behind your header image, and pretty much everything else that's ugly.

To get rid of the ugliness, press CTRL + F and type in "gradient", there should be 25. I left 7 alone. It's mostly trial and error, but what I took out looked like these:
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url" default="none" value="url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_artsy.png)"/> 
<Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none"  value="url(http://www.blogblog.com/1kt/awesomeinc/header_gradient_artsy.png)"/> 
<Variable name="footer.background.gradient" description="Background Gradient" type="url" default="none"  value="$(header.background.gradient)"/>
For each one you delete, you must also search for the words in red and delete them!

For example: 
After deleting the second code quoted above, I searched for header.background.gradient, this was what came up:
/* Header
----------------------------------------------- */
.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}
I deleted $(header.background.gradient).

Get it? If not then lord have mercy on your soul cos I also don't know how to teach you liao.

But if you get it, congrats. You'll realize that your sidebars may look different from mine cos I tweaked it a lil more to my preference. If you want sidebars that look like mine, read on...

First, you'll want to replace this:
   <Group description="Gadget Background" selector=".sidebar .widget">
     <Variable name="widget.background.color" description="Background Color" type="color" default="#ffffff" value="transparent"/>
     <Variable name="widget.border.color" description="Border Color" type="color" default="#222222" value="transparent"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#000000" value="transparent"/>
   </Group>
With this:
   <Group description="Gadget Background" selector=".sidebar .widget">
     <Variable name="widget.background.color" description="Background Color" type="color" default="$(widget.background.color)" value="transparent"/>
     <Variable name="widget.border.color" description="Border Color" type="color" default="$(widget.background.color)" value="#f5d4d9"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="$(widget.background.color)" value="transparent"/>
   </Group>
What this does is automatically transform your gadget/widget's background, border and bevel to one solid color.

Clarification time: Gadget/widget is the individual elements you have added to your blog. Sidebar is the background of your widgets.

 So, after you replace the code above, just below it, there's a line that looks like:
   <Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">
     <Variable name="widget.outer.background.color" description="Background Color" type="color" default="transparent"  value="transparent"/>
   </Group>
Cos I want my gadgets and sidebar to look seamless, I replaced the code I highlighted in red with $(widget.background.color) and #ffffff respectively. #ffffff is the code for white, and since my sidebars are supposed to be white, I decided that there shouldn't be much harm reinforcing that. HEH.

Sidebar Divider:

This is simple. Go to Design -> Template Designer -> Add CSS -> Copy & Paste this code:
.sidebar.section .widget{
border-width: 0px 0px 16px 0px;
border-image: url("YOUR IMAGE URL HERE") 1000 0 repeat;
}
You can change the numbers around until you're satisfied with how it looks.

Date Background:

Originally, there's no date background, so if you want to be able to edit the date background follow these steps.

Look for:
<Group description="Date Header" selector=".main-inner .widget h2.date-header, .main-inner.widget h2.date-header span">
Add this:
<Variable name="date.background.color" description="Background Color" type="color" default="$(date.background.color)"  value="#000000"/>
I said ADD, not REPLACE, so keep that in mind. The color picker would show up in the Blogger Template Designer under Date Header.

I am such a little genius sometimes. If you run into any problems at all, leave a comment so that we can work it out and others can learn from it!

Good luck.

No comments:

Post a Comment

FacebookInstagramYoutubeTwitter