By ekul08 on

I just created a new region to place an ad block in on my site breakingchaos.com.

I couldnt move the header, or the footer so I added a new one called "topbit". I've called it in my template.php file, and I have added the following to my page.tpl.php file

print $topbit;

I've added my googe adsense block, and i can now control the pages I want it on.

But above the google ad there is this line. How do I call my new region in my CSS file and get rid of it?

I've tried finding any reference to "border-top" and deleting it, but no luck. I only tried the few that LOOKED like a similar colour though.

Also tried adding (to my style.css file)

#top-bit {
margin: 0;
}

and various other combinations, but no luck.

Comments

ekul08’s picture

ekul08 commented

Hrmm, i cant find the edit button, but what i ment to say I added to the page.tpl.php file was..

<div id="top-bit">
<?php
  print $topbit;
?>
</div>
desm0n’s picture

desm0n commented

Hi

Take the <div id="top-bit"> out as it will do you little good because after that you are using blocks and the block div gets called next. Referance the block div itelf to change the look.

<div id="top-bit">
<div class="block block-block" id="block-block-3">
<h2 class="title"><span></span></h2>
<div class="content"><div id="topadsensespace" align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-0439889184920138";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "image";
google_ad_channel ="3876738970";
google_color_border = "3D81EE";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//--></script><br />
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
</div>
</div>

so for this block use the blocks id referance in your CSS i.e.

#block-block-3" {
whatever you wanna put here;
}
ekul08’s picture

ekul08 commented

Sorry, im a little confused.

Am i supposed to put the first bit of code into my page.tpl.php?

Because i set up a 5th 'region' called topbit, which sits where my adsense ad is. (using this method http://drupal.org/node/29139 )

Into that new region I palced a new block with my adsense code. If i place that first lot of code into page.tpl.php the ad will show up on every page, wont it? I want to be able to control it with the blocks "dont show on these pages" feature.

Or am i supposed to put that first lot of code into my block code, and the second into my css?

desm0n’s picture

desm0n commented

Sorry let me explain it slightly better.

The first lot of code i posted was actually some of the source from your site. We use that to determine what the ID is of the block you wish to change from its default.

As you have found, each block inherrits a look that is defined in your CSS file.

Now in your case you want to use your newly defined area to display a block that doesn't take on the same visual style as all the default blocks. Putting a div around that region and then including a block won't work as CSS is cascading and the blocks DIV will be called within your own defined DIV, thus rendering your own DIV useless (as you've found).

Thankfully drupal thought of all this for you and allocates a unique ID to each block, allowing you to overwrite the default style for just that block.

I posted the first bit of code to show you where you'd find this ID so you could implement this practice on future blocks should you need.

<div class="block block-block" id="block-block-3">

We look at part of your source code and find that this blocks ID is block-block-3. No two blocks have or should have the same ID so you can now effectively override this blocks style using CSS.

To do this you simple include a class in your CSS file with this blocks ID.

#block-block-3" {
whatever you wanna put here;
}/coded>

putting anything in the "whatever you wanna put here;" statement will override the default blocks theme, replacing with your own. This will be JUST for this block and cares not where its placement is. So if you moved this block into a sidebar for instance after implementing a new CSS class for it, it will still look as you intended, regardless of the other blocks visual look in that area.

I hope that clarifies it for you better.

ekul08’s picture

ekul08 commented

Thanks so much! :D I now have control over it.

For instance when i ad

#block-block-3 {
padding: 5;
border-bottom: 1px solid grey ;
}

it ads a border at the bottom. Border at the top is still there though. Is there soming i can add in this css code to get rid of it, or do you think something else is adding that?

Once again, thanks so much :D

desm0n’s picture

desm0n commented

Just reverse what your present CSS is doing.

So if your present css is adding

border-top: 1px solid grey ;

just null it by adding

border-top: 0px;

in your new CSS statement.

ekul08’s picture

ekul08 commented

Thanks again. I tried that, and no luck.

When i add border: 1px solid gray (so, a border all the way around) it goes above that line that's already there. I've printscreened and tried to find the color of that line in my CSS code, no luck.

I get the feeling something else is adding that line -- when I delete my CSS file alltogether, the site displays quite differently -- but its STILL there. :/

Thanks :)

desm0n’s picture

desm0n commented

Check your block.tpl.php file for a <hr>. Its likely to come before the <?php print $block->subject; ?> subject line or be a part of it.

desm0n’s picture

desm0n commented

Actually its your H2 title putting a bottom border on. So you'll need to include another style to counteract that. Something like

#block-block-3 h2 {
border-bottom: 0px;
}

Insert that into your style sheet and now any h2 elements inside this block will not have a bottom border defined.

bushhog’s picture

bushhog commented
ekul08’s picture

ekul08 commented

Ah thanks. Its the top border thats getting in the way though :)

I added that, with 0px border for top/bottom and played with a few more variations. No luck with any of them though :/

Im sorry, you probably answered this post thinking it would be an one-answer fix! :/

desm0n’s picture

desm0n commented

you need to hard refresh your browser as the border had gone.

Now its back :) so just put that bottom border back on :)

ekul08’s picture

ekul08 commented

Ahhhhh! Silly me! Thank you SO much :)

I get why its border-bottom now too, ;)

Cheers

desm0n’s picture

desm0n commented

No problems at all, glad i could help :)

nevets’s picture

nevets commented

If you place the region in a div with a class or id as they started out with it is useful. You can use it to control the look of all blocks in the region without needed to using individual block ids. So given the output region has an id of 'topbit'

#topbit.block {
what ever you want here;
}

will allow you to style all regions in the block. If you want to style an element within the block like the h2 title you can use things like #topbit.block h2.

desm0n’s picture

desm0n commented

Yes thats actually a very good point.

ekul08’s picture

ekul08 commented

Ah thanks! Ill keep that in mind if i have to add more blocks to that region.

Cheers

Willdex’s picture

Willdex commented

Would you happen to know how to make the Adsense align along the left/right side? I've added float: left; to the <div style="border: 1px solid ; width: 125px; height: 125px;">AdSense</div> in FireBug. Everything works the way I want it to. How to save this addition to the div layer? In which file?
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.