Header Link

I realized that header of the History site links to itself, whereas it should link to my main blog which is the Upcoming site. So with the little help of google I found a way to do it.

With a little modification in HTML one can change his/her headers link. Please visit here to see a step by step tutorial.

Navigation problem handled!

At last! I find out how to solve the gadget gap. It took lots of hours to do it but I think I'm done. At first I decided not to have a drop down horizontal menu. I decided to have single links in this menu (no dropping down). For instance when I hover over the History button, nothing will drop down but when I click to it, the left side column will change and give the sub links in history tab.

This was impossible to achieve with adding pages into the blog. Pages are static blogs but they still inherit the template of the main blog roll, which leads having a labels column on the left hand side.

So I created a new blog dubstepne1.blogspot.com for the History tab. Upcoming tab will link to the main blogroll "dubstepne.blogspot.com" and the others will link to different sub blogroll links.

At first I exported the template of the original dubstepne blog and imported it into History blog. I did the final touchs in the new blog and I got it!

So my main blog looks like:

and the history tab looks like:

Aligning the horizontal menu

I added my horizontal menu without any problems but there is a gap between the blog roll and the menu. This led to an unexpected negative space.

So I played with the CSS to join them together. The blogroll is also a widget which can be selected by

#Blog1 selector. So I redefined its top margin.

#Blog1{
margin-top: -35px;
}

The negative value I gave pushed the blogroll up, which eventually helped to have a continuous look.

I still have the problem with the labels gadget. I must find a way to fill up the gap when I delete that gap. Still thinking about it.

In-site navigation

This was probably the hardest thing I had to decide on. I had two opportunities. Having a vertical menu or a horizontal menu. At first I wanted to have a custom made vertical menu so I opened photoshop to create new button styles.

As you can see I generate two different button styles on the left hand side of the above screenshot. But neither of them satisfied me. So I decided to make a horizontal dropdown menu for navigation purposes.

Site looks great now. But there is a huge problem. On my dummy website I have a labels widget on the left hand side of the page. I'm going to delete it. And the left hand side of the site will look really empty. But I'm tired, I'll handle this problem in the following days. See you!

Dubstepne Header

During the header process I had a lot of trouble. First of all I had no idea which colors to use. I think Header is also responsible for the color selection of the rest of the site. At first I decided to use a brown/beige color palette but it made the site look really old. Then I decided to make a grayish color (Hex No: #575454) and a blackish color (Hex No: #171616)  my websites main colors.

I am a fan of minimalism. Therefore I tried to come up with a minimalist header. Since Dubstepne is a pun I  decided to make it clear for everyone so I seperated Dub and Stepne using different backgrounds.

But this header had nothing to do with alignment. So I switched the darkness on the right hand side to left hand side. This way there was an alignment. Left handed darkness has the same width with the left widget column.

But the word dubstepne was still not aligned with anything. So I shifted a bit right to align it with the post widget.

Then I shifted the title a bit down to have a symmetry.

And at last I added a little black column on the right hand side to have continuity with the blog roll.

Here you go! Header for my website

Dubstepne

At last! I started my new blog, which will be my main project for this term. Since it is going to address Turkish people I've selected a pun for the name.

Dubstep is the genre of music I'll talk about in my website. Stepne is "Spare Tires" in Turkish, which I found wise to use, since people will use this website before they go to dubstep events. And thirdly there is a hidden pun. Once again in Turkish, "Dubstep Ne" means, "What is Dubstep". The word "Dubstepne" satisfied all my needs for a website name=)

Please visit dubstepne.blogspot.com !

Phase II - Design

I've been thinking about the main color of my website. Dubstep is a dark and filthy music genre. I think joyful colors won't match the needs of the visitors. But using only gray, black and white colors would also make the site really heavy and hard to follow. So instead of a black background I decided to use a brownish background. This way, the site neither look joyful, nor too heavy.

Also as our instructor Elif Ayıter stated, I'm planning to give importance to hierarchy. This blogroll will be my play ground. I'll play and experiment with fonts, background images, text colors and all of the design issues, and when I decide that I created something satisfying I'll code it and use the extra features of javascript, css, html and ajax. 

Let the fun begin!