How to manually patch Blogger template to use Disqus

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Posted by user317944 on Stack Overflow See other posts from Stack Overflow or by user317944
Published on 2010-04-15T20:19:26Z Indexed on 2010/04/15 20:23 UTC
Read the original article Hit count: 701

Filed under:
|
|

I'm trying to add disqus to my blog and I tried following this guide to do so:

http://disqus.com/docs/patch-blogger/

However their instructions are completely off with what I have on my custom template.

Here is the template:

<b:skin><![CDATA[/*-----------------------------------------------

Blogger Template Style Name: Picture Window Designer: Josh Peterson URL: www.noaesthetic.com ----------------------------------------------- */

/* Variable definitions ====================

*/

/* Content ----------------------------------------------- */ body { font: $(body.font); color: $(body.text.color); }

html body .region-inner { min-width: 0; max-width: 100%; width: auto; }

.content-outer { font-size: 90%; }

a:link { text-decoration:none; color: $(link.color); }

a:visited { text-decoration:none; color: $(link.visited.color); }

a:hover { text-decoration:underline; color: $(link.hover.color); }

.body-fauxcolumn-outer { background: $(body.background); }

.content-outer { background: $(content.background);

-moz-border-radius: $(content.border.radius); -webkit-border-radius: $(content.border.radius); -goog-ms-border-radius: $(content.border.radius); border-radius: $(content.border.radius);

-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15); box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin: $(content.margin) auto; }

.content-inner { padding: $(content.padding); }

/* Header ----------------------------------------------- */ .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left; _background-image: none;

color: $(header.text.color);

-moz-border-radius: $(header.border.radius); -webkit-border-radius: $(header.border.radius); -goog-ms-border-radius: $(header.border.radius); border-radius: $(header.border.radius); }

.Header img, .Header #header-inner { -moz-border-radius: $(header.border.radius); -webkit-border-radius: $(header.border.radius); -goog-ms-border-radius: $(header.border.radius); border-radius: $(header.border.radius); }

.header-inner .Header .titlewrapper, .header-inner .Header .descriptionwrapper { padding-left: $(header.padding); padding-right: $(header.padding); }

.Header h1 { font: $(header.font); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }

.Header h1 a { color: $(header.text.color); }

.Header .description { font-size: 130%; }

/* Tabs ----------------------------------------------- */ .tabs-inner { margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom); padding: 0; }

.tabs-inner .section { margin: 0; }

.tabs-inner .widget ul { padding: 0;

background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

-moz-border-radius: $(tabs.border.radius); -webkit-border-radius: $(tabs.border.radius); -goog-ms-border-radius: $(tabs.border.radius); border-radius: $(tabs.border.radius); }

.tabs-inner .widget li { border: none; }

.tabs-inner .widget li a { display: block;

padding: .5em 1em; margin-$endSide: $(tabs.spacing);

color: $(tabs.text.color); font: $(tabs.font);

-moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0; -webkit-border-top-left-radius: $(tab.border.radius); -webkit-border-top-right-radius: $(tab.border.radius); -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0; border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

background: $(tab.background);

border-$endSide: 1px solid $(tabs.separator.color); }

.tabs-inner .widget li:first-child a { padding-$startSide: 1.25em;

-moz-border-radius-top$startSide: $(tab.first.border.radius); -moz-border-radius-bottom$startSide: $(tabs.border.radius); -webkit-border-top-$startSide-radius: $(tab.first.border.radius); -webkit-border-bottom-$startSide-radius: $(tabs.border.radius); -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius); -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius); border-top-$startSide-radius: $(tab.first.border.radius); border-bottom-$startSide-radius: $(tabs.border.radius); }

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { position: relative; z-index: 1;

background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom; color: $(tabs.selected.text.color);

-moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15); box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15); }

/* Headings ----------------------------------------------- */ h2 { font: $(widget.title.font); text-transform: $(widget.title.text.transform); color: $(widget.title.text.color); margin: .5em 0; }

/* Main ----------------------------------------------- */ .main-outer { background: $(main.background);

-moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0; -webkit-border-top-left-radius: $(main.border.radius.top); -webkit-border-top-right-radius: $(main.border.radius.top); -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0; border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); }

.main-inner { padding: 15px $(main.padding.sides) 20px; }

.main-inner .column-center-inner { padding: 0 0; }

.main-inner .column-left-inner { padding-left: 0; }

.main-inner .column-right-inner { padding-right: 0; }

/* Posts ----------------------------------------------- */ h3.post-title { margin: 0; font: $(post.title.font); }

.comments h4 { margin: 1em 0 0; font: $(post.title.font); }

.post-outer { background-color: $(post.background.color); border: solid 1px $(post.border.color);

-moz-border-radius: $(post.border.radius); -webkit-border-radius: $(post.border.radius); border-radius: $(post.border.radius); -goog-ms-border-radius: $(post.border.radius);

padding: 15px 20px; margin: 0 $(post.margin.sides) 20px; }

.post-body { line-height: 1.4; font-size: 110%; }

.post-header { margin: 0 0 1.5em;

color: $(post.footer.text.color); line-height: 1.6; }

.post-footer { margin: .5em 0 0;

color: $(post.footer.text.color); line-height: 1.6; }

blog-pager {

font-size: 140% }

comments .comment-author {

padding-top: 1.5em;

border-top: dashed 1px #ccc; border-top: dashed 1px rgba(128, 128, 128, .5);

background-position: 0 1.5em; }

comments .comment-author:first-child {

padding-top: 0;

border-top: none; }

.avatar-image-container { margin: .2em 0 0; }

/* Widgets ----------------------------------------------- */ .widget ul, .widget #ArchiveList ul.flat { padding: 0; list-style: none; }

.widget ul li, .widget #ArchiveList ul.flat li { border-top: dashed 1px #ccc; border-top: dashed 1px rgba(128, 128, 128, .5); }

.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child { border-top: none; }

.widget .post-body ul { list-style: disc; }

.widget .post-body ul li { border: none; }

/* Footer ----------------------------------------------- */ .footer-outer { color:$(footer.text.color); background: $(footer.background);

-moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom); -webkit-border-top-left-radius: $(footer.border.radius.top); -webkit-border-top-right-radius: $(footer.border.radius.top); -webkit-border-bottom-left-radius: $(footer.border.radius.bottom); -webkit-border-bottom-right-radius: $(footer.border.radius.bottom); -goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom); border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); }

.footer-inner { padding: 10px $(main.padding.sides) 20px; }

.footer-outer a { color: $(footer.link.color); }

.footer-outer a:visited { color: $(footer.link.visited.color); }

.footer-outer a:hover { color: $(footer.link.hover.color); }

.footer-outer .widget h2 { color: $(footer.widget.title.text.color); } ]]>

<b:template-skin>
  <b:variable default='930px' name='content.width' type='length' value='930px'/>
  <b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
  <b:variable default='360px' name='main.column.right.width' type='length' value='180px'/>

  <![CDATA[
  body {
    min-width: $(content.width);
  }

  .content-outer, .region-inner {
    min-width: $(content.width);
    max-width: $(content.width);
    _width: $(content.width);
  }

  .main-inner .columns {
    padding-left: $(main.column.left.width);
    padding-right: $(main.column.right.width);
  }

  .main-inner .fauxcolumn-center-outer {
    left: $(main.column.left.width);
    right: $(main.column.right.width);
    /* IE6 does not respect left and right together */
    _width: expression(this.parentNode.offsetWidth -
        parseInt("$(main.column.left.width)") -
        parseInt("$(main.column.right.width)") + 'px');
  }

  .main-inner .fauxcolumn-left-outer {
    width: $(main.column.left.width);
  }

  .main-inner .fauxcolumn-right-outer {
    width: $(main.column.right.width);
  }

  .main-inner .column-left-outer {
    width: $(main.column.left.width);
    right: $(main.column.left.width);
    margin-right: -$(main.column.left.width);
  }

  .main-inner .column-right-outer {
    width: $(main.column.right.width);
    margin-right: -$(main.column.right.width);
  }

  #layout {
    min-width: 0;
  }

  #layout .content-outer {
    min-width: 0;
    width: 800px;
  }

  #layout .region-inner {
    min-width: 0;
    width: auto;
  }
  ]]>
</b:template-skin>


<div class='main-cap-bottom cap-bottom'>
  <div class='cap-left'/>
  <div class='cap-right'/>
</div>
</div>

<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
  <div class='cap-left'/>
  <div class='cap-right'/>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'/>
<div class='region-inner footer-inner'>
  <macro:include id='footer-sections' name='sections'>
    <macro:param default='2' name='num' value='3'/>
    <macro:param default='footer' name='idPrefix'/>
    <macro:param default='foot' name='class'/>
    <macro:param default='false' name='includeBottom'/>
  </macro:include>
  <!-- outside of the include in order to lock Attribution widget -->
  <b:section class='foot' id='footer-3' showaddelement='no'>

document.body.className = document.body.className.replace('loading', ''); 

<macro:if cond='data:col.num &gt;= 2'>
  <table border='0' cellpadding='0' cellspacing='0' mexpr:class='&quot;section-columns columns-&quot; + data:col.num'>
  <tbody>
  <tr>
    <td class='first columns-cell'>
      <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-1&quot;'/>
    </td>

    <td class='columns-cell'>
      <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-2&quot;'/>
    </td>

    <macro:if cond='data:col.num &gt;= 3'>
      <td class='columns-cell'>
        <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-3&quot;'/>
      </td>
    </macro:if>

    <macro:if cond='data:col.num &gt;= 4'>
      <td class='columns-cell'>
        <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-4&quot;'/>
      </td>
    </macro:if>
  </tr>
  </tbody>
  </table>

  <macro:if cond='data:col.includeBottom'>
    <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-3&quot;' showaddelement='no'/>
  </macro:if>
</macro

© Stack Overflow or respective owner

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Related posts about disqus

Related posts about comments

Categories cloud

.NET ASP.NET iphone linux python Windows mysql android sql windows-7 html c ruby-on-rails css objective-c ubuntu networking sql-server wpf asp.net-mvc ruby database Xml apache AJAX osx security regex django Performance 12.04 windows-xp mac web-development iphone-sdk vb.net Silverlight apache2 flash server perl best-practices email installation eclipse visual-studio algorithm windows-server-2008 winforms wcf firefox bash dns /Oracle