I love the way blocks appear with rounded corners and green background color for the block's title + the fine icons.

I want to apply the same theming to the main content area at site's frontpage i.e.: the region where the teasers appear.

I use views and I use the default view of "frontpage". How to define the custom css file in order to make that region look like the blocks?!

See attached image!

Thanks.

CommentFileSizeAuthor
sample_block.jpg7.99 KBW.M.

Comments

Deepika.chavan’s picture

Deepika.chavan commented

Hi,
I tried the same thing on my local site. I enabled the 'frontpage' view and changed the site information setting accordingly.
1. a. Copied node.tpl.php file from fusion_core theme to '/acquia_marina/.' theme dir.
1. b. Added <div class="inner-inner"> line of code after <div class="inner"> and added </div><!-- /inner-inner --> before </div><!-- /inner --> line.

2. a. Renamed 'local-sample.css' file to local.css.
2. b. Added following css code in local.css file :

body.front #main-wrapper #main-group #view-id-frontpage-page .view-content .node h2 {
  padding:8px 8px 6px 50px;
  background:#94CE18 none repeat scroll 0 0;
  margin: -5px -2px 8px -5px; 
}

body.front #main-wrapper #main-group #view-id-frontpage-page .view-content .node h2 a {
  color:#FFFFFF;
  text-shadow:1px 1px #545454; 
  font-family:"Myriad Pro","Myriad Web Pro Regular","Lucida Grande",Geneva,Trebuchet MS,sans-serif;
  font-weight: 600;
}

body.front #main-wrapper #main-group #view-id-frontpage-page .view-content .node .inner {
  background: #FFFFFF url(../images/rounded-corner-left-right.png) repeat-y scroll 100% 0;
  padding: 8px 8px 5px;
}

body.front #main-wrapper #main-group #view-id-frontpage-page .view-content .node .inner-inner {
  background:transparent url(../images/block-gradient.png) repeat-x scroll 50% 100%;
}

2. c. Cleared cached data

3. a. Created new 'template.php' file in 'acquia_marina' theme dir.
3. b. Added following code in template.php file :

    <?php 
/**
 * Node preprocessing
*/
function acquia_marina_preprocess_node(&$vars) {
   $vars['is_front'] = drupal_is_front_page();
    if($vars['is_front']) {
      drupal_add_js(drupal_get_path('theme', 'acquia_marina') . '/js/rounded_corner.js');  
    }
  }

4. a. For rounded corners created 'rounded_corner.js' file in '/acquia_marina/js' dir.
4. b. Added following js code in rounded_corner.js file :

$(document).ready(function() {
       	$("body.front #main-wrapper #main-group #view-id-frontpage-page .view-content .node h2").corner("top 5px"); 
	$("body.front #main-wrapper #main-group #view-id-frontpage-page .view-content .node .inner").corner("tl 5px");
	$("body.front #main-wrapper #main-group #view-id-frontpage-page .view-content .node .inner").corner("tr 10px");
	$("body.front #main-wrapper #main-group #view-id-frontpage-page .view-content .node .inner").corner("bl 7px");
	$("body.front #main-wrapper #main-group #view-id-frontpage-page .view-content .node .inner").corner("br 10px");
});

4.c. Cleared cached data.

HTH !!
Deepika Chavan.

W.M.’s picture

W.M. commented

Thanks very much for the help, Deepika Chavan. I will test the above modifications on one of my site. Have a blessed day :)

W.M.’s picture

W.M. commented

I have tested the above code. It works. I am going to modify the above code to match my needs:

- I want to set a green h2 title to the whole frontpage view contents i.e. not one green title per each node title. I want one green title (with "News" as title text) for all 10 or 20 items (nodes) displayed in the frontpage view.

- I want to "inject" the ability to set a "block-icon" to the title in the above code.

If you have any suggestions please don't hesitate to share!

The help is of great value already, have a blessed day.

sheena_d’s picture

sheena_d commented
Status: Active » Closed (fixed)