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/

Very strange night - very frighten night

On the mid night of July 31 2009, i was sleeping very well after my calling.

At about 2:30AM at night i heard a sound from outside of knocking my rent house's door by unidentified person. They were very quiet they said nothing they did only knocking and kicking very strong to my door for 20 minutes long till my door a little bit broke, that time i was very and very frighten while i was sleeping lonely in the room and i thought they were a thief.

Meanwhile i had called and woke rent house owner come to my house. But when she came then those unidentified person had run away.

Actually they were confusing the house they assumed that my house was his wife's house.
They knocked and kick very strong to the door because he was angry with his wife, his wife said.

Finally they drove the car back again they did not say "sorry" to me at all, dog shit!!!!, they just were walking straight to his wife's room and used the violence to his wife and say loudly at night during people were on the bed very well.

Now i have to repair my door again :(.

Web fonts for open source, a view from Cambodia

World Wide Web Consortium (W3C) has released new version of report about CSS3 show how the font resource load dynamically, that can help user agents to read all contents on WebPages without installing font on their computers.


For English, French, Chinese and many other languages have large speakers; they can recognize the benefit from this method that can keep original layout of contents for user agent to read the webpage. But for the language of small group, there are not in operating system of computer, this report is quite meaningful, an example, for Khmer language in Cambodia.

Embedded OpenType, don’t need to install fonts

Many years ago, webmasters in Cambodia were familiar with the term of “TrueDoc” from Bitstream and Embedded OpenType (EOT) from Microsoft, which can help the user agents, read text on website via loading font from server, without font installation in computer, but it doesn’t work with prominent open source web browser as Mozilla Firefox. Especially, EOT fonts work with Microsoft Internet Explorer only.

Now there is a lot of big website in Khmer language from Cambodia and abroad use EOT font, such as http://www.rfa.org/khmer of Radio Free Asia, http://khmer.radioaustralia.net.au/ of ABC Radio Australia, http://www.rfi.fr/ of Radio French International, http://khmer.ka-set.info/ of Ka-set newspaper, etc…

Also a well-known and old website http://www.everyday.com.kh/ which is interested in teenagers in Cambodia, has also provide Khmer email, use EOT based on legacy font which was created in 1990s. It is favorable for user agents who have MS Internet Explorer, but it still creates difficulties for Firefox web browser’s readers.

Web fonts for Firefox and Safari

According to W3C’s recent report post on their website in June 18, 2009, new term was used and described similar to TrueDoc and Embedded OpenType before, is Web fonts and the way to make them load dynamically from server to user agent’s computer, just upload the font server and add CSS code to webpage. Compare to Embedded OpenType from Microsoft, it is easier, because we don’t need any special tool to convert the font for server.
The fonts for upload to server still keep the original extension, example font.ttf, font.oft or font.svg, etc…

To use a downloadable font call Khmer OS:

@font-face {
font-family: “Khmer OS”;
src: url(http://domainname/font/KhmerOS.ttf);
}
p {font-family: Khmer OS;}

The user agent will download Khmer OS and use it when rendering text within paragraph elements.
p {font-family: Khmer OS, Time New Roman;}

If for some reason the site serving the font is unavailable, the default Time New Roman will be used.
Right now, above CSS works with Firefox and Safari only. We also can add more CSS for Internet Explorer in the same time, after create EOT font by using WEFT of Microsoft.

@font-face {
font-family: “Khmer OS”;
src: url(http://domainname/font/KhmerOS.ttf);
}
@font-face {
font-family: “Khmer OS”;
src: url(KhmerOS.eot);
}
p {font-family: Khmer OS, Time New Roman;}

For more information: http://www.w3.org/TR/2009/WD-css3-fonts-20090618/

Ref: http://khmertype.blogspot.com/2009/07/web-fonts-for-open-source-view-from.html

Drupal Conference finished

I just finished the first drupal conference with professionals in Cambodia this morning.

They are the professional from other University joined this conference.


Thanks,
HY ChanHan

Drupal installation guide

Created by: Mr. HY ChanHan

Drupal Conference