Posted by stattler on April 29, 2010 at 2:53pm
I would like to make the top area of the site look like the one in http://www.windsorstar.com/ . That is, the bar that says "Hello Visitor! Login/Register" should go on top of the banner ad and the banner will be immediately on top of the site logo area.
Also, the current head banner is placed in the center of the page which wastes some space to its left and right. I was wondering if it would be possible to shift the banner to the right, and make some room for another small area on its left.
I know anything is possible but can anyone give me some direction how this can be achieved?
Thanks in advance.
Comments
I was successfull in doing so
I tried myself by copy-pasting the
#logo-areaand was successful in achieving somewhat close to what I wanted. It took me about 6 hours to solve, but I am sure for those who knows CSS and php, its a matter of 20 minutes.Here the steps are:
Created the new region called header_right on the sub-theme's .info file. Note the new region "Header Right" on fifth line
regions[left] = Left Sidebarregions[right] = Right Sidebar
regions[over_content] = On Top of Content
regions[under_content] = Underneath the Content
regions[header_right] = Header Right
regions[header] = Header
regions[footer] = Footer
Now open
sites/all/themes/customtheme/page/page-header.tpl.phpfile and look for the following codes. If you have not copied the .tpl.php file, copy the entire/pagefolder from openpublish_theme folder.<body <?php print openpublish_body_classes($left, $right, $body_classes); ?> ><?php if (!empty($admin)) print $admin; ?>
<div id="outer-wrapper">
<div id="wrapper">
<div id="header">
<?php print $header; ?>
<div class="clear"></div>
</div> <!-- /#header -->
Now replace the following
<div id="header"><?php print $header; ?>
<div class="clear"></div>
</div> <!-- /#header -->
with
<div id="logo-area" class="clearfix">
<div id="logo"> <?php print $header; ?>
</div><!--/ #header -->
<div id="headright" class="clearfix">
<?php print $header_right; ?>
</div>
</div><!-- #header-area -->
Now style the div id's. My styles are as follows:
#header {
text-align:left;
padding:9px 0 0 9px;
}
#headright {
float:right;
padding:9px 0 0 9px;
width:230px;
height:90px;
}
Clear cache and you are done!
WARNING: Please DO NOT do this on the openpublish_theme. Make a sub-theme, and implement on that.
sTattler.com
Add a block to the new region
Finally to place a block in the newly created region, create a new block from block administration page put some text or html image in that. I created a block and named it Header Right Block.
Then add the Header Right Block in the sitewide contentex
admin/build/context/22. If you have clared the cache, you will see a new region called Header Right in the context form. See the image belowYou can see it on my site below. Suggestions are welcome.
sTattler.com
Hey stattler, Could you post
Hey stattler,
Could you post the whole changed page-header.tpl.php file please.
Or at least the whole part with the changes so as to be clear on changes? Say from line 25 - 50.
Another thing that may solve an issue I had. With css, the text-align left will work just fine with images right? Just as float would (float: right)?
This would be perfect for me if so because I'm having to do vodoo on 'floating' a region right with no size.
http://satyamediagroup.com
Here is the page-header.tpl.php file
<?php
// $Id: page-header.tpl.php,v 1.1.2.5 2010/04/14 05:43:19 inadarei Exp $
/**
* @file page-header.tpl.php
* Header template.
*
* For the list of available variables, please see: page.tpl.php
*
* @ingroup page
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:ctag="http://commontag.org/ns#"
lang="<?php print $language->language; ?>"
dir="<?php print $language->dir; ?>"
version="XHTML+RDFa 1.0" >
<head>
<title><?php print $head_title ?></title>
<?php print str_replace('rss.xml', 'rss/articles/all', $head); ?>
<?php print $styles ?>
<?php print $scripts ?>
<!--[if gte IE 6]><?php print openpublish_get_ie_styles(); ?><![endif]-->
<!--[if IE 6]><?php print openpublish_get_ie6_styles(); ?><![endif]-->
</head>
<body <?php print openpublish_body_classes($left, $right, $body_classes); ?> >
<?php if (!empty($admin)) print $admin; ?>
<div id="outer-wrapper">
<div id="wrapper">
<!-- change begins -->
<div id="logo-area" class="clearfix">
<div id="logo"> <?php print $header; ?>
</div><!--/ #header -->
<div id="headright" class="clearfix">
<?php print $header_right; ?>
</div>
</div><!-- #header-area -->
<!-- change ends -->
<?php if (menu_tree('menu-top-menu')): ?>
<div id="top-menu" class="clearfix">
<ul id="login-menu">
<?php if (user_is_logged_in()) : ?>
<li><?php print t('Hello'); ?> <?php print l($GLOBALS['user']->name, 'user') ?></li>
<li><?php print l('Logout', 'logout') ?></li>
<?php else : ?>
<li class="hello">Hello Visitor!</li>
<li><?php print l('Log In', 'user') ?> or <?php print l('Register','user/register') ?></li>
<?php endif; ?>
</ul>
<?php print menu_tree('menu-top-menu'); ?>
< /div>
<?php endif; ?>
<div id="logo-area" class="clearfix">
<div id="logo"><a href="<?php print check_url($front_page); ?>" title="<?php print check_plain($site_name); ?>"><img src="<?php print check_url($logo); ?>" alt="<?php print check_plain($site_name); ?>" id="logo" /></a>
</div><!--/ #logo -->
<div id="search_box_top" class="clearfix">
<?php if ($search_box): ?><?php print $search_box ?><?php endif; ?>
</div>
</div><!-- #logo-area -->
<div id="nav" class="clearfix">
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>
</div> <!-- /#nav -->
<div class="clear"></div>
<div id="container" class="clearfix">
I have actually no idea about CSS/php. As for floating or aligning, I tried the float but that breaks the layout. So I used text-align:left for #header.
sTattler.com
Cool. Added that to my site
Cool.
Added that to my site too and it looks splendid.
You are right about the floats. Just to get two regions next to each other with one being fluid I had to do this:
<div style="float: left; margin-right: 305px; background-color: #efefef;"><?php print $editorial; ?>
</div>
<div style="float: right; width: 300px; margin-left: -305px;">
<?php print $editorial_ad; ?>
</div>
This with the styles inline instead of in a css file which i will move later.
This then means the editorial region is fluid, floated left with the right margin to allow the editorial_ad region with a width of 300px to stay next to it.
The immediate problem I have with this is that the content does not act fluid as far as I am concerned. Reducing browser window immediately procuces scroll bars even when there is space for content next to main image in the editorial region to flow under said image.
I am changing to your text-align for the left floated region to see what happens instead.
http://satyamediagroup.com
No cigar
No cigar in trying to use
<div style="text-align:left; background-color: #efefef;"><?php print $editorial; ?>
</div>
<div style="float: right; width: 300px;">
<?php print $editorial_ad; ?>
</div>
The editorial region fills the whole width and the editorial_ad regions breaks to next line. Adding clear: none; for top (just to test) makes no difference.
Anyone with a solution? Or maybe I should ask away from this thread?
Its sad that there seems to be so few contributing on this group. Does this mean OP users are really few?
My css skills suck too. I guess time to go read-up.
Why does the text-align: left work in the header and not in the body?
Something to do with logo-area css maybe?
http://satyamediagroup.com
If you have noticed, I used
If you have noticed, I used the
$headerand$header_rightinside thediv id="logo-area"<div id="logo-area" class="clearfix">---
---
</div><!-- #header-area -->
This is important! Try this, I am sure it will work.
As for less participants in this group, I think I am probably the most inexperienced and hence spending time here learning. People who uses OP are way smarter and expert, so they probably have not many questions to ask (smiley).
sTattler.com
I figured the same on the div
I figured the same on the div and tried it. Did'nt work.
As an exercise, could you maybe clone your header region and see if it works for you when you put your featured article in the header region?
i"m thinking maybe the view theme may also cause issues
http://satyamediagroup.com
To take the Hello visitor
To take the Hello visitor area on top of banner ad, move the menu region in
page/page-header.tpl.phpimmediately before the header area. The new page-header.tpl.php file looks like this<?php
// $Id: page-header.tpl.php,v 1.1.2.5 2010/04/14 05:43:19 inadarei Exp $
/**
* @file page-header.tpl.php
* Header template.
<em>
</em> For the list of available variables, please see: page.tpl.php
<em>
</em> @ingroup page
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:ctag="http://commontag.org/ns#"
lang="<?php print $language->language; ?>"
dir="<?php print $language->dir; ?>"
version="XHTML+RDFa 1.0" >
<head>
<title><?php print $head_title ?></title>
<?php print str_replace('rss.xml', 'rss/articles/all', $head); ?>
<?php print $styles ?>
<?php print $scripts ?>
<!--[if gte IE 6]><?php print openpublish_get_ie_styles(); ?><![endif]-->
<!--[if IE 6]><?php print openpublish_get_ie6_styles(); ?><![endif]-->
</head>
<body <?php print openpublish_body_classes($left, $right, $body_classes); ?> >
<?php if (!empty($admin)) print $admin; ?>
<div id="outer-wrapper">
<div id="wrapper">
<!-- Top menu is now on top of everything. -->
<?php if (menu_tree('menu-top-menu')): ?>
<div id="top-menu" class="clearfix">
<ul id="login-menu">
<?php if (user_is_logged_in()) : ?>
<li><?php print t('Hello'); ?> <?php print l($GLOBALS['user']->name, 'user') ?></li>
<li><?php print l('Logout', 'logout') ?></li>
<?php else : ?>
<li class="hello">Hello Visitor!</li>
<li><?php print l('Log In', 'user') ?> or <?php print l('Register','user/register') ?></li>
<?php endif; ?>
</ul>
<?php print menu_tree('menu-top-menu'); ?>
< /div>
<?php endif; ?>
<div id="banner-area" class="clearfix">
<div id="logo"> <?php print $header; ?>
</div><!--/ #header -->
<div id="headright" class="clearfix">
<?php print $header_right; ?>
</div>
</div><!-- #header-area -->
<div id="logo-area" class="clearfix">
<div id="logo"><a href="<?php print check_url($front_page); ?>" title="<?php print check_plain($site_name); ?>"><img src="<?php print check_url($logo); ?>" alt="<?php print check_plain($site_name); ?>" id="logo" /></a>
</div><!--/ #logo -->
<div id="search_box_top" class="clearfix">
<?php if ($search_box): ?><?php print $search_box ?><?php endif; ?>
</div>
</div><!-- #logo-area -->
<div id="nav" class="clearfix">
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>
</div> <!-- /#nav -->
<div class="clear"></div>
<div id="container" class="clearfix">
And the new CSS tags are:
#top-menu {
border-bottom:1px dotted #B5B5B5;
border-top:0px solid #780F2C;
font-family:Arial,Helvetica,sans-serif;
padding-bottom:5px;
padding-top:5px;
}
#header-area {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
height:113px;
}
#header {
text-align:left;
padding:6px 0 0 6px;
}
#headright {
float:right;
padding:6px 0 0 6px;
width:230px;
height:90px;
}
#banner-area {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:none;
height:100px;
}
#logo-area {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/bkg/bg-logo-area.png) repeat-x scroll center bottom;
height:110px;
}
#logo {
text-align: left;
padding: 6px 0 0 6px;
}
sTattler.com