Hi I am trying to add blocks to the front page of a clients website so that under the slideshow there would be 3 blocks a sidebar block and then under the 3 blocks would be another block like this
example
I have created 3 websites with drupal so I know how to do most things. I have attached a bigger picture. Any help would be greatly appreciated.

CommentFileSizeAuthor
#2 now12.jpg442.17 KBfinalzak
site.jpg890.96 KBfinalzak

Comments

pwhiteside’s picture

pwhiteside commented

Hi there,

Hopefully you know html and basic php because it will help you in doing this.

The front page is determined by the template file /sites/default(or all)/themes/bluemasters/page--front.tpl.php
You will need to add php inserts for each additional block you want, this is the origional front block area code,

<div class="home-block-area first">
    <?php print render($page['home_area_1']);?> 		
</div>
<div class="home-block-area">
    <?php print render($page['home_area_2']);?> 
</div>
<div class="home-block-area last">
    <?php print render($page['home_area_3']);?> 
    <?php print render($page['home_area_3_b']);?> 
</div>

 
The php insert is what makes drupal insert the blocks into the area, this one is called "home_area_1",

<?php print render($page['home_area_1']);?>

 
You need to add more such as your sidebar like so,

<?php print render($page['front_sidebar']);?>

 
For this to appear in the blocks page and be seen by drupal you need to add it to the bluemasters.info file like so,

regions[front_sidebar] = Front Page Sidebar

 
Remember to flush your theme registry and caches if it doesn't appear in the blocks page.
 
This will get the drupal to output the areas then you will have to make it look right by positioning the html and using css, this you should be able to do yourself if you know html & css.
 
I hope this helps,
 
Best Wishes, Phil the Whiteside of life.

finalzak’s picture

finalzak commented
StatusFileSize
new now12.jpg442.17 KB

thanks for the help i have successfully added more block but now i cant seem to get them to look the right way here is what I have so far now

here is the code i have:
in page--front.tpl

 <div id="home-blocks-area" class="clearfix">
   
		<?php if ($messages): ?>
        <div id="console" class="clearfix">
        <?php print $messages; ?>
        </div>
        <?php endif; ?>
          
            <div class="home-block-area first">
            <?php print render($page['home_area_1']);?> 	
                    </div>
        <div class="home-block-area middle">
            <?php print render($page['home_area_2']);?> 
        </div>
        <div class="home-block-area last">
            <?php print render($page['home_area_3']);?> 
           </div> 
            <div class="home-block-area bottom">
            <?php print render($page['home_area_3_b']);?> 
            </div>
            
            <div class="home-block-area side">
            <?php print render($page['home_area_4']);?>
            </div>

and in style

.home-block-area {width: 220px; float:left; padding:0 10px; background-image:url(images/home-block-box-bg.png); position: relative; bottom: 20px;}

.home-block-area.first { width: 220px; padding-left:0; background-image:url(images/home-block-box-bg.png); position: relative; bottom: 20px;}

.home-block-area.last { width: 220px; padding-right:0; background-image:url(images/home-block-box-bg.png); position: relative; bottom: 20px;  }

.home-block-area.bottom { width: 698px; padding-right:0; background: none; position: relative; bottom: 20px;}

.home-block-area.side { width: 220px; float:right; padding-top: 10px; position: relative; left: 10px; padding-right:0;  }

#home-blocks-area .region-home-area-2 .block { background: none; margin: 0; }

#home-blocks-area .region-home-area-3 .block { background:none; margin: 0; }

#home-blocks-area .block { background:url(images/home-block-header-bg.png) repeat-x; padding-bottom:5px; }

#home-blocks-area .block h2 { height: 36px; font-size:20px; font-weight:bold; color:#6b483b; margin:0; padding:20px 0 0 20px; }

#home-blocks-area .region-home-area-1 .block h2 { background:url(images/icons/star.png) no-repeat 13px 10px; padding:7px 0 0 49px; }

#home-blocks-area .region-home-area-2 .block h2 { background:url(images/icons/star.png) no-repeat 13px 10px; padding:7px 0 0 49px; }

#home-blocks-area .region-home-area-3 .block h2 { background:url(images/icons/star.png) no-repeat 13px 10px; padding:7px 0 0 49px; }

#home-blocks-area .region-home-area-3-b .block h2 { background:url(images/icons/star.png) no-repeat 13px 10px; padding:7px 0 0 49px; }

#home-blocks-area .region-home-area-4 .block h2 { text-align:left; padding:0 0 0 10px; color:#FFF; background:url(images/sbheader.jpg) repeat-x; }

I have tried changing the position of home-block-area.side but my page is still stretched as if the block was still in the same place. How can i get it moved up to be right next to the other 3? Thanks in advanced and any help is greatly appreciated.

finalzak’s picture

finalzak commented
Status: Active » Closed (fixed)

figured it out just had to mess with margins and paddings