This time i will keep things related to CSS much more simpler (almost non-existent) as i will make use of default classes. Instead of using an ad block that fits in relatively neat i will give an example of using a table. The visual effect will be almost the same. So feel free to play with some CSS and HTML code (why not even with some PHP as you might want to implement a post counter or other useful queries) to obtain a seamless integration of what i will try to cover here. Practically all the spots where ads will be placed will remain the same as for a prosilver based theme so this time i won’t post screenshots. If you want to make an ideea of how things look check out the other post. So with no further delays here comes the actual guide.

Displaying ads one the index page

1. Open index_body.html and find <!– INCLUDE forumlist_body.html –>
2. BEFORE it add the following code (this will create an ad block just before the forum list starts):

   <table width="100%" cellspacing="0"><tr><td class="cat"><h4>Ads</h4></td></tr></table>
   <table class="tablebg" width="100%" cellspacing="0">
   <tr>
    <td>
      <center>
   <script type="text/javascript"><!--
   google_ad_client = "pub-xxxx";
   /* 200x90 */
   google_ad_slot = "xxxxx";
   google_ad_width = 200;
   google_ad_height = 90;
   google_color_border = "A9B8C2";
   google_color_bg = "A9B8C2";
   google_color_link = "000000";
   google_color_url = "000000";
   google_color_text = "000000";
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>
   </center>
   </td>
    <td>
     <center>
      <script type="text/javascript"><!--
   google_ad_client = "pub-xxxx";
   /* 728x90 */
   google_ad_slot = "xxxx";
   google_ad_width = 728;
   google_ad_height = 90;
   google_color_border = "A9B8C2";
   google_color_bg = "A9B8C2";
   google_color_link = "000000";
   google_color_url = "000000";
   google_color_text = "000000";
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>
   </center>
   </td>
   </tr>
   </table>

3. If you want to display the ad block just after the forum list ends paste the same code AFTER <!– INCLUDE forumlist_body.html –>

Displaying ads one the viewforum page

1. Open viewforum_body.html and find <!– IF not S_DISPLAY_ACTIVE and (S_IS_POSTABLE or .topicrow) –>
2. Before it add the SAME code as for the index page.
3. If you want to display the ad block just after the forum list ends paste the same code BEFORE <!– IF S_DISPLAY_POST_INFO or TOTAL_TOPICS –>

Displaying ads one the viewtopic page

1. Open viewtopic_body.html and find the first appearance of the following code

   <table class="tablebg" width="100%" cellspacing="1">

2. Before it add the SAME code as for the index page.
3. If you want to display the ad block just after the topic list ends past the same code BEFORE the second appearance of the following code (it only appears three times)

   <table width="100%" cellspacing="1">

4. If you want to display ads before the content of the first post find the following code

   <div class="postbody">{postrow.MESSAGE}</div>

   and BEFORE it add the following

   <!-- IF postrow.S_FIRST_ROW -->
   <script type="text/javascript"><!--
   google_ad_client = "pub-xxxx";
   /* 728x15 */
   google_ad_slot = "xxxx";
   google_ad_width = 728;
   google_ad_height = 15;
   google_color_border = "ECECEC";
   google_color_bg = "ECECEC";
   google_color_link = "FFFFFF";
   google_color_url = "006699";
   google_color_text = "000000";
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>
   <br><br>
   <!-- ENDIF -->

5. If you want to display an ad block after the content of the first post AFTER

   <div class="postbody">{postrow.MESSAGE}</div>

   add the following code

   <!-- IF postrow.S_FIRST_ROW -->
   <br><br>
   <script type="text/javascript"><!--
   google_ad_client = "pub-xxxx";
   /* 728x90 */
   google_ad_slot = "xxxx";
   google_ad_width = 728;
   google_ad_height = 90;
   google_color_border = "ECECEC";
   google_color_bg = "ECECEC";
   google_color_link = "FFFFFF";
   google_color_url = "006699";
   google_color_text = "000000";
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>
   <br><br>
   <!-- ENDIF -->

Displaying ads one the search results page

1. Open search_results.html and find <!– IF S_SHOW_TOPICS –>
2. Before it add the SAME code as for the index page.
3. If you want to add the ad block just after the search block ends add the SAME code BEFORE the following code

   <div class="gensmall" style="float: {S_CONTENT_FLOW_BEGIN};">

Well, that covers pretty much the basics of an AdSense integration in a subilsver2 based theme for phpbb3. If you have any questions feel free to leave me a comment.

Don’t forget to fill in your Google AdSense ID. Also you can place any kind of ads not just AdSense ads, so it’s up to you how your forum will look as there are no limits on customizing.

I suggest that you create file backups before you proceed, just in case.

Setting up the styling aspects.

1. Navigate to your style files /styles/stylename/theme/ and open stylesheet.css.
2. At the end, add the following code

   @import url("adsense.css");

3. Create a CSS file and add the following code to it:

a body {
max-width: 1024px;
margin: 0px auto;
}
ul.forums1 {
background-color: #cddeee;
}
li.row1 {
border-top: 1px solid #FFFFFF;
}
dd.mali span {
display: block;
padding-left: 10px;
}
dd.veliki span {
display: block;
padding-left: 10px;
}

4. Name the CSS file adsense.css and save it to /styles/stylename/theme

Displaying ads one the index page.
AdSense on the index page-top

1. Open index_body.html and find <!– INCLUDE forumlist_body.html –>
2. BEFORE it add the following code (this will create an ad block just before the forum list starts):

   <div class="forabg">
   <div class="inner"><span class="corners-top"><span></span></span>
   <ul class="topiclist">
   <li class="header">
   <dl class="icon">
   <dt>Ads</dt>
   </dl>
   </li>
   </ul>
   <ul class="topiclist forums1">
   <li class="row1">
   <dl class="icon1">
   <dd class="mali"><span>
   <script type="text/javascript"><!--
   google_ad_client = "pub-XXX";
   google_ad_width = 200;
   google_ad_height = 90;
   google_ad_format = "200x90_0ads_al";
   google_ad_channel = "";
   google_color_border = "cddeee";
   google_color_bg = "cddeee";
   google_color_link = "10508b";
   google_color_text = "4a5d73";
   google_color_url = "ac0000";
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>
   </span></dd>
   <dd class="veliki"><span>
   <script type="text/javascript"><!--
   google_ad_client = "pub-XXX";
   google_ad_width = 728;
   google_ad_height = 90;
   google_ad_format = "728x90_as";
   google_ad_type = "text_image";
   google_ad_channel = "";
   google_color_border = "cddeee";
   google_color_bg = "cddeee";
   google_color_link = "10508b";
   google_color_text = "4a5d73";
   google_color_url = "ac0000";
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>
   </span></dd>
   </dl>
   </li>
   </ul>
   <span class="corners-bottom"><span></span></span></div></div>

3. If you want to display the ad block just after the forum list ends paste the same code AFTER <!– INCLUDE forumlist_body.html –>

Displaying ads one the viewforum page.
AdSense on the viewforum page

1. Open viewforum_body.html and find <!– INCLUDE forumlist_body.html –>
2. Before it add the SAME code as for the index page.
3. If you want to display the ad block just after the forum list ends paste the same code AFTER <!– INCLUDE forumlist_body.html –>
If you want to display the ad block after every forum block (though i don’t really recommend it if you have small forum blocks) find <!– IF topicrow.S_FIRST_ROW or not topicrow.S_TOPIC_TYPE_SWITCH –> and AFTER it copy the SAME code.
Find <!– IF topicrow.S_LAST_ROW –> and after (just before <!– ENDIF –>)

</ul>
 <span class="corners-bottom"><span></span></span></div>
</div>

paste the same code.

Displaying ads one the viewtopic page.
AdSense on the viewtopic page

1. Open viewtopic_body.html and find <!– BEGIN postrow –>
2. Before it add the SAME code as for the index page.
3. If you want to display the ad block just after the topic list ends past the same code AFTER <!– BEGIN postrow –>
4. If you want to display ads in the first post find

   <div class="content">{postrow.MESSAGE}</div>

   and BEFORE it add the following code

   <script type="text/javascript"><!--
   google_ad_client = "pub-xxx";
   /* 728x15 */
   google_ad_slot = "xxxx";
   google_ad_width = 728;
   google_ad_height = 15;
   google_color_border = "E1EBF2";
   google_color_bg = "E1EBF2";
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>

5. If you want to display an ad block after the content of the first post AFTER

   <div class="content">{postrow.MESSAGE}</div>

   add the following code

   <script type="text/javascript"><!--
   google_ad_client = "pub-xxx";
   /* 728x90 */
   google_ad_slot = "3092398785";
   google_ad_width = 728;
   google_ad_height = 90;
   google_color_border = "E1EBF2";
   google_color_bg = "E1EBF2";
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>

Displaying ads one the search results page.
AdSense on the search page

1. Open search_results.html and find <!– ENDIF –>
   <!– IF S_SHOW_TOPICS –>
2. Before it add the SAME code as for the index page.
3. If you want to add the ad block just after the search block ends add the SAME code AFTER it.

If you encounter problems with this method please give me a notice.
Also, if you want to see a live example check out this forum.

Instead of overwriting the declarations in the js generated by MyBlogLog i advise you to strip the code by deleting the variables related to colors:

• c_color_bottom_bg
• c_color_link
• c_color_link_bg
• c_color_heading
• c_color_heading_bg

I’m not going to explain which variable does what because that’s irrelevant and anyway we will remove them from the js. It’s not a secret that you can do very little customization with them. Below you can see the original code and the stripped one:

1

<script src="http://pub.mybloglog.com/comm2.php?mblID=HereGoesYourID&amp;c_width=270&amp;c_sn_opt=n&amp;c_rows=10&amp;c_img_size=h&amp;c_heading_text=&amp;c_color_heading_bg=000000&amp;c_color_heading=FFFFFF&amp;c_color_link_bg=FFFFFF&amp;c_color_link=FFFFFF&amp;c_color_bottom_bg=000000" type="text/javascript"></script>

1

<script src="http://pub.mybloglog.com/comm2.php?mblID=HereGoesYourID&amp;c_width=270&amp;c_sn_opt=n&amp;c_rows=10&amp;c_img_size=h&amp;c_heading_text=&amp;" type="text/javascript"></script>

You can see that my c_heading_text variable is empty as i don’t have a header text for my widget. Now here comes the actual customization process. I tried to make it as simple to understand as i possibly could and made a few comments on the code so that you can figure out which class is for what. There are a few declarations that i left out because they don’t really help much as their properties are inherited from the really important declarations that are listed below. The following code must be added in your style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

/* start images related  */
body table#MBL_COMM img
{
border:1px solid black;
float:left;
height:24px;
padding:0px;
position:relative;
width:24px;
z-index:999;
}
body table#MBL_COMM td.mbl_join_img
{
background-color:black;
cursor:pointer;
margin:0pt;
padding:2px;
width:26px;
}
/* stop images related  */
 
/* start of "You!" link */
body table#MBL_COMM td.mbl_join 
{
background-color:BLACK;
border-bottom:0pt none;
color:white;
cursor:pointer;
font-size:11px;
margin:0pt;
padding:2px;
text-align:left;
}
/* stop of "You!" link */
 
/* start the whole widget */
body table#MBL_COMM
{
background-color:black;
border:1px solid black;
font-family:Verdana,Arial,Sans-Serif;
font-style:normal;
font-weight:normal;
line-height:12px;
width:270px;
}
/* stop the whole widget */
 
/* start of the tds wrapping the images */
body table#MBL_COMM td.mbl_img
{
background-color:black;
border-top:0pt none;
cursor:pointer;
margin:0pt;
padding:2px;
width:26px;
}
/* stop of the tds wrapping the images */
 
/* start of the three trs wrapping the bottom links */
body table#MBL_COMM td.mbl_fo_hidden 
{
background-color: black;
color:white;
cursor:pointer;
font-size:10px;
padding:2px;
text-align:center;
}
/* stop of the three table rows wrapping the three bottom links */
 
/* start of "Join My Community" link */
 body table#MBL_COMM td.mbl_join a
{
	color: white;
}
body table#MBL_COMM td.mbl_join a:hover
{
	color:#6C6C6C;
}
/* end of "Join My Community" link */ 
 
/* start of "Join This Commnunity" link */
body table#MBL_COMM td.mbl_fo_hidden a
  {
   color:white;
	}
body table#MBL_COMM td.mbl_fo_hidden a:hover
 {
	color:#6C6C6C;
}
/* end of "Join This Commnunity" link */
 
/* start of "View Reader Commnunity" and "Provided by MyBlogLog" links*/
body table#MBL_COMM td.mbl_fo_hidden a:visited
{
	color: white;
}
body table#MBL_COMM td.mbl_fo_hidden a:visited:hover
{
	color: #6C6C6C;
}
/* end of "View Reader Commnunity" and "Provided by MyBlogLog" links*/

That all. Refresh the page and voila ! You can see the outcome in my footer. Of course i used colors to best fit my blog design but feel free to play with the code until you get what you want.

One of the posible solutions to get right with Gmail (and not only) is to disable Firebug for the websites you don’t want it to stick it’s nose into. Here comes the real issue: after a while you get sick and tired of disabling Firebug for every website you visit (at least if you could save the “black list” somewhere to import it whenever you need it or something like that). Firebug lacks an option that should say “Disable Firebug for all sites except…”, that way things would get a lot more easy. Ok, this is the short way but not necessary the best way of getting things right without compromising your developer activity. You can choose to apply it and analyse the outcome, or not.

If you want to take things further and take advantage of the oportunity of organizing your work, this is your chance. So another possible way of correcting the problem (if we care to take things really personal) is to create another browser profile (it’s just like having two or more Windows user accounts). In this example i will use just two basic profiles: one profile would be for normal browsing and the other one for web developing purposes. The first thing you’ll need to do is to close Firefox and open the “Run” dialog and execute the following line:

firefox -ProfileManager

just like in the following picture:

After executing the command a window like the one below will appear allowing you to create multiple profiles:

The first step you might want to do after the small window loads is to rename your default profile’s name to something like “Developer” (because this will be the profile that will have all the web dev related addons and settings). Of course you may want to keep this profile only for pure browsing purposes so then you can rename it to “Browsing” instead of “Developer” as mentioned early above. Either way you will have to install + uninstall some addons (extensions, plugins if you like) in order to customize your profiles to best suit your purposes.

After you rename your profile as mentioned above you need to create a second profile. Make sure you leave the box that’s followed by “Don’t ask at startup” checked. I suggest that you create another shortcut to Firefox. So now we should have two different Firefox shortcuts on our desktop and the differences between them shoud consist only in their “Target” field content as shown in the pictures:

The next step is to customise your browser profiles. I suggest you keep the profile you’ll be using exclusively for browsing as “addons clean” as possible to make sure your experience with Firefox is as fast as it can get. When it comes to installing addons for your web developing profile i’d say to have a brief look over the addons i’m using:

• CollorZilla (”advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies”)
• DownloadHelper (”download videos and images from many sites”)
• Dummy Lipsum (generate “Lorem Ipsum” dummy text)
• Firebug (”web development evolved”)
• Greasemonkey (”a user script manager”)
• IE Tab (”enables you to use the embedded IE engine within Firefox”)
• OperaView (”open pages in Opera from Firefox, Mozilla, Flock and Netscape 8 context menus”)
• Screen grab! (”saves a web-page as an image”)
• Tab Mix Plus (”tab browsing with an added boost”)
• Web Developer (”adds a menu and a toolbar with various web developer tools”)

The given descriptions will just have to do for the moment as i will write a separate article for every addon listed above. Now, related to the fact that you might want some things to be syncronized between the two browser profiles such as bookmars, passwords, cookies, history, etc., this might be a possible solution but i recommend backing up your data before you decide to go any further. To have your bookmarks syncronized you can do one of the following. For example go in one of your profile directories and delete bookmarks.html and instead put a shortcut to the other bookmarks.html file located in your other profile folder; or you can use FoxMarks addon to keep your bookmarks syncronized (but then you install an auxiliary addon for this and for that and you find yourself again from where you left: a Firefox browser that moves slower than your granny so i recommend the firest option). This was for the bookmars, now regarding your other shared stuff also delete the original file and create a shortcut for history.dat, history.dat and cookies.txt.

I’m sure that many of you think that this method is the same as you scratch your left ear with your right hand but it’s a possible solution if you like to take things further.

You might also want to know that i can’t be held reponsible if something goes wrong. I tested this workaround on Windows XP SP2 with Firefox 2.0.0.12 but this might also work with other versions.

Now, back to the fact that Google says Firebug slows Gmail down, that’s a fact but i pose myself the question why Google didn’t show some benchmarking charts or some kind of statistical information related to this matter. However i do not approve with Google’s solution because disabling Firebug’s network monitoring tool would mean a great loss for it’s benchmarking features.

The bottom line as i already said earlier, would consist in an option within Firebug that will help you disable it for all other websites except the ones you choose to have it enabled on.