How to add a sidebar-top region in Genesis

The Genesis starter theme for Drupal supports 3 different layouts including both sidebars on either the left or right of the main content. In this configuration it can be useful to have a sidebar-top region that spans the width of both sidebars, but sits on top of them. This tutorial shows you how to do this in Genesis.

An example of when you might want to do this would be to display a fixed height banner or contextual ads. Its not good for content that will change in height as it could overflow the div—while the fixed height limitation could be overcome, this tutorial is meant for beginners and is a simple strait forward explanation of how to add new regions in Drupal and how to position the new sidebar-top region using
CSS.

Overview

1. Add a new region to your subthemes .info file.
2. Print the new region in page.tpl.php.
3. Add CSS to position the new region correctly.

For the purposes of this tutorial I am using the genesis-2c layout, which places both sidebars on the right. You will need to make adjustments if you have altered the default width of the sidebars (default is 240px).

1. Add a new region

Open up your subthemes .info file and add the new region. You can call it whatever you want and in the example below I have called it sidebar_top

Note: after you have saved the info file you need to clear the theme registry so the new region will show up on the blocks page. By far the easiest way to do this is by using the Admin Menu module, which has a link to do this included under the Drupal links (the Drupalicon on the left). Otherwise go to Performance settings and clear cache data.

;----------// Regions

; You can define new regions here.

regions[leaderboard] = Leaderboard
regions[header] = Header Blocks
regions[secondary_content] = Secondary Content
regions[content_top] = Content top
regions[content] = Main Content
regions[content_bottom] = Content bottom
regions[tertiary_content] = Tertiary Content
regions[sidebar_top] = Sidebar Top ; Our new region
regions[left] = Sidebar Left
regions[right] = Sidebar Right
regions[footer] = Footer

2. Print the new region

Now in page.tpl.php we need to print the new region. The easy way is to just copy/paste one of the existing sidebars and change the variable name and add a new id, or just copy and paste the new sidebar_top code in the snippet shown below. Note that I have used id="sidebar-top".

Place the new region above the other sidebars. It should look like the following code snippet:

if ($sidebar_top): ?>

print $sidebar_top; ?>

endif; ?>

if ($left): ?>

print $left; ?>

endif; ?>

if ($right): ?>

print $right; ?>

endif; ?>

3. Add CSS to position everything

So now we have to position the new sidebar-top region so it displays correctly.

1. First we float it left.
2. Then we need to give it some negative margin-left to pull it into position.
3. We need to set a height on it.
4. Finally we need to add margin-top to the other sidebars so they don’t overlap the new sidebar top.

The margin top for the left and right sidebars needs to be more than the height of sidebar-top. For those of you who know Zen and how it positions the primary navigation, this is pretty much the same sort of idea.

Heres the CSS - the screenshots below show the CSS and regions using Firebug. Place the CSS in page.css with the other sidebar styles. You will notice I have added 20px to the margin-top value so there is a horizontal gutter.

#sidebar-top {
background: #EEE; /* background color for dev only */
float:left;
height:240px; /* set a height on the new region */
margin-left:-500px; /* use negative margin to pull the sidebar-top into position */
width:480px; /* set a width equal to left + right sidebar widths */
}

#sidebar-left,
#sidebar-right {
margin-top: 260px; /* use margin top to push the left and right sidebars down */
}

Web3.0 is comming...

What exactly is web 3.0? It basically means web browsing with 3D experience. If Web 2.0 is built towards the social side of the online world, web 3.0 is expected to be where the money will be made by the corporations. Although it have existed for quite some time now, but the exposure is for web 3.0 based applications more towards focused groups. This is possible, thanks to the development of faster processors and hi-speed broadband access that keep on coming our way nowadays.

Web 3.0 based applications are expected to be a virtual reality location where consumers can try anything. An example would be the Second Life, where more than 1 million players, including offline merchants participate. I can’t wait to try out my new shirt.

Thanks,

By: HY ChanHan

Mini barcamp PP2 in Open Institute

Today is August 29th, 2009 , is the day that OI team preparing Mini Barcamp PP2 or we can call Technology geek meetup.

We have the following topics as:

1- FOSS vs Commercial Software

2- Social Media Tools Ecology

3- Web design how to

4- Team share vision

5- Using standard FOSS in Cambodia

6- How to make money with  FOSS

7- Code Ignitor

=====================

Why not show about System Management Technique (Agile Approach) for Database Management system to all of students in these meetup?

:(:(

Thanks,

HY ChanHan

E-learning Presentation on August 28th, 2009

E Learning Presentation

View more documents from ChanHan Hy.

Google links Apps to Groups for quicker sharing

Google has provide a lot of free tools to us for online documents sharing.
For me, i am using all google apps for my works not only E-mail but among Talk, calendar, googledocs...

So please try it today!!

By: ChanHan

Khmer Fonts

How To Embed Khmer Fonts On FireFox3.5 , Safari, Opera, Google Chrome

View more documents from ChanHan Hy.

Who know about Drupal CMS well?

Dear bloggers,
I would like to inform you that i need someone know and can do very well with Drupal CMS to be a Web Master.

If you think that you are good at Drupal CMS , please contact me as soon as via hy.chanhan@gmail.com

OR
Tel: 010 705 186

This is your opportunities to be a web master.

Thanks,
HY ChanHan

DAP-NEWS is compatible for all web browsers

Hi,

DAP-NEWS.COM is the top 10 data center of news in Cambodia as Khmer Language. New DAP is compatible for all web browsers after i embedded it with the new term of CSS3 next generation of CSS.

So you still can read it even though you computer don't have Limon Fonts installation.

Do you want your website is compatible for all web browser too?
Do you want your website is read by visitor who don't have Khmer font installation?

Do you want your website embed on:
1- FireFox3.5
2- Safari
3- Google Chrome
4- Opera
?

I can do it now!!! All web browsers are supported with Khmer Font Embed after CSS3 released.

Thanks,
HY ChanHan
hy.chanhan@gmail.com
010 705 186
011 711 756

Limon fonts, ABC Zero space, Khmer Unicode, all of khmer fonts on FireFox3.5, Safari, Opera, Chrome

Not only Khmer Unicode can embed on FireFox3.5, Safari, Opera, Chrome... but Limon fonts, ABC Zero Space fonts also can embed on them too for now.

I have experience with it just today since i saw and try with the next generation of CSS , CSS3.

It is very great for Web Masters or Developers.

Whoever can read the news on the net very well even if they do't have Khmer fonts.

By: HY ChanHan

Women Web Portal, E-learning Web Portal and....view on FireFox, Safari, Google Chrome

Today i have embedded Khmer Unicode for Wemen web portal , khmer OS, E-learning portal to be able view on FireFox , Safari and Google Chrome web browsers.

URL:
http://women.open.org.kh
http://open.org.kh
http://osp.open.org.kh
http://khmeros.info
http://elearning.open.org.kh

Some browsers as below:

FireFox3.5
Safari 4.0.2
Google Chrome

By: HY ChanHan

CSS3 Border-Radius & Rounded Corners

Use CSS3 border-radius to make your corners rounded! In this edition of the CSS3 series, we look at how to use the third generation Style Sheet language to round the corners of div layers. There is also a quick + / – to which browsers support the border-radius CSS3 effect.

Reference: http://www.zenelements.co.uk/blog/css3-border-radius-rounded-corners/

CSS3 embed font-face

What is CSS, yet alone CSS3?

Very briefly, CSS stands for ‘Cascading Style Sheets’ and is a mark-up language for altering and giving style to a website. The 3, is just to represent the next generation in style sheet language. A version number, if you will.

Why am I writing about CSS3 if it is not yet fully supported?

Because it is fun to learn new things! …and a few people have asked me how to get the rounded corners on their online profiles. I explained how to do this with images or CSS3 and like a snowball rolling down a hill, I am here writing up a few things I’ve been learned along the way and hope that it will this may just help others out too.

CSS3 is not new, it is just the new term that W3C has posted it recently how to make them to load dynamically from server to user agent's computer.

So you can embed your font on FireFox or Safari, Chrome...

Here is a quick ‘CSS3 versus Browser’ outlook:-

1- FireFox (3.0.5 ...some support)

2- Google Chrome (1.0.154.36...some support)

3- Internet Explorer (IE6, IE7, IE8…Not support)

4- Opera (9.6… little support)

5- Safari (3.2.1 on Windows… good support)

So for now we can embed Khmer Unicode on FireFox or Safari...Cheer!!!

More detail: http://www.zenelements.co.uk/blog/css3-introduction/

BY: Mr. HY ChanHan

Around the river side in Phnom Penh

According to my travel around river side every evening, at least there is an accident per night happened between motor and motor , motor and car crashing.

So we should be slow , step by step when we are driving on the street.

Look around yourself , left and right before you across the way, especially wear helmet to protect you head and put motor glasses to look somebody behind you.

Accident is the frightening things that government is worrying to the people in the city, particularly is teenager, boys and girls in 2009.

Good intent from me, Mr. HY ChanHan

Get Bachelor Degree on 5th August 2009

On 5th August is my birthday, meanwhile i will get my bachelor degree at National Institute of Education (NIE) on 5th August too.

It is nearly 3 years long, Build Bright University of Cambodia just aims to celebrate a ceremony to provide Bachelor Degree to the students in stage III on 5th August 2009.

We are the students of BBU very proud and very happy with this meet up because it is the time that we can meet and talk again during we cannot meet each other nearly 3 years ago.

And today 4th August 2009 we are invited by BBU to gather at NIE to get ready some actions before go up to get the certificate from Prime Minister of Cambodia.

At 2:00PM meet you there!!

Barcamppp has launched to register now

BarCamp Phnom Penh 2009

An open conference of all things

Technology, Communication and Innovation.

born from the desire for people to share and learn in an open environment. It is an intense event with discussions, demos and interaction from attendees.

Register today!!!! http://barcampphnompenh.org/