placing image on top right

Posted by dhineshkumar on August 7, 2012 at 12:33pm

i have created a sub theme from zen theme and i wish to add image of size 212*184 on top right corner of my site. how can i do this? guide me..

Comments

=-=

Posted by VM on August 7, 2012 at 2:36pm

if there is a region you can put the image in a block and enable the block in the region

another method may be to hardcode it in the page.tpl.php file

can i add custom region?

Posted by dhineshkumar on August 8, 2012 at 4:28am

No, sub-theme doesn't have region on top right side. I just see the page.tpl.php file found in zen/template folder as you have said and I copied that file into my sub-theme's template folder. I found following regions.

Regions:
* - $page['header']: Items for the header region.
* - $page['navigation']: Items for the navigation region, below the main menu (if any).
* - $page['help']: Dynamic help text, mostly for admin pages.
* - $page['highlighted']: Items for the highlighted content region.
* - $page['content']: The main content of the current page.
* - $page['sidebar_first']: Items for the first sidebar.
* - $page['sidebar_second']: Items for the second sidebar.
* - $page['footer']: Items for the footer region.
* - $page['bottom']: Items to appear at the bottom of the page below the footer.

And my question is can i add custom region to it?

Good

=-=

Posted by VM on August 8, 2012 at 12:15pm

yes. Custom regions can be added. see: http://drupal.org/node/171224

I got

Posted by dhineshkumar on August 14, 2012 at 10:55am

Some how i got answer how to place a image on top right side of the page. He we go..
1. I added a url/path of the image to a block's body field and i set Text Formate as Full HTML.
2. Then I set Region Setting as Header.
3. Through Firebug I identified source for block that i just placed on Header region.
As I'm using Zen sub-theme I found the file named block.css located as follows on my PC.
/var/www/drupal-7.15/sites/all/themes/zen_sub_theme/css/block.css. Then I gave code as:

#block-block-4{
background: none no-repeat scroll 0 0 transparent;
height: 212px;
left: 1150px;
position: absolute;
top: 35px;
width: 184px;
z-index: 11;
}

Note: in above code # refers to id of the block. block-block-4 refers to name of the block. The block name may vary according to more than one block in your site.

Then save the file and go to your site and refresh the page.

That's all..

Good

=-=

Posted by VM on August 14, 2012 at 12:03pm

consider placing your customization of css into a custom css file within your sub-theme so that when the base theme is updated your customization isn't lost.