Jimdo自定义模板揭密 - 系统模板Jimdo广告盒的自定义方法

      网上邻居一直以为,自定义Jimdo广告盒必须是自定义的Jimdo模板才行,写完上篇《Jimdo广告盒的自定义方法 - Jimdo广告盒缩小、横放及美化等》一文后,又研究了一下,发现Jimdo系统模板也是可以自定义广告盒的。本文简单介绍一下方法,这个方法对自定义模板也是可行的。

      所以要讨论一下系统模板中Jimdo广告盒的自定义,是因为不少朋友对自定义模板感觉有点难度,而免费的Jimdo系统模板越来越丰富多彩,足可满足需要,只是广告盒有点空旷。更主要的是,普通的 CSS+HTHL 自定义出来的模板,还难以做到系统模板那样(至少我还不会),HEAD部分直接在页面上编辑。

      在Jimdo系统模板中,定义广告盒的CSS文件是系统服务器上的 main.css,完整的代码见《Jimdo广告盒(Jimdobox)官方CSS代码》一文,这里摘录其中定义广告盒整体部分的代码:

div#jimdobox
{
    width:170px;
    height:344px;
    border:1px solid #CCC;
    background:white;
    padding:5px;
    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
    overflow:hidden;
    color:#333;
    text-align:left;
}

      根据以上代码可以推算出来,广告盒的宽度为:170px+5px*2+1px*2=182px,高度为:344px+5px*2+1px*2=356px。而现在的广告盒中,只有那么点内容,还弄那么大一个盒子,确实不好看。那么好,我们来对这个尺寸进行一下修改。

      问题是,对于系统的模板,我们无法进入“自定义模版”,然后对CSS的Jimdobox代码进行修改,否则就会更改整个模板,变成默认的自定义模板了。

      大家知道,浏览器在显示网页内容时,它是按源码的顺序先后执行的,在Jimdo里,“设置”下的“编辑head部分”里添加的代码,正好位于head的尾部,这就为我们自定义模板中的广告盒带来了可能。网上邻居在“编辑head部分”中输入以下代码,期望更改广告盒的高度,结果没有效果。

<style type="text/css">
#jimdobox{height:150px}
</style>

      在DIV+CSS中,使用!important 最主要是为了IE6这个浏览器,因为IE6是目前标准兼容最有问题的浏览器,比如:

#box

{
color:red !important;          /* IE7、IE8、FF 下显示效果为 red */
color:blue;                           /* IE6 下显示效果为 blue */
}

      但这并不是说,IE6就不能识别 !important,在IE6中,!important 同样也能起到提升优先级的作用。网上邻居重新输入以下代码:

<style type="text/css">
#jimdobox{height:150px !important}
</style>

      结果用IE6、IE8、Firefox3.6.18、Opera11.52、Chrome10.0.648.134等浏览器测试,广告盒的高度全部发生了变化。

IE6、IE8、Firefox3.6显示效果
IE6、IE8、Firefox3.6显示效果
Opera、Chrome显示效果
Opera、Chrome显示效果

      接下来的问题就比较简单了,想怎么自定义都是可以的,具体方法请参见《Jimdo广告盒的自定义方法 - Jimdo广告盒缩小、横放及美化等》一文。

相关文章:

Write a comment

Comments: 8
  • #1

    lianzhi (Wednesday, 23 November 2011 18:30)

    谢谢喽~正愁怎么解决这个问题呢~

  • #2

    oidea (Thursday, 01 December 2011 13:45)

    诸葛草帽的jimdo博客怎么没有这个广告了呢,应该是删掉了还是隐藏掉了?

  • #3

    华哥娱乐 (Friday, 18 May 2012 22:54)

    您的友链已经做好!
    申请友链
    <a href="http://yan2wuwenhua.jimdo.com/ " target="_blank">华歌娱乐</a>

  • #4

    Eisen (Sunday, 14 October 2012 10:54)

    我似乎找不到DIV+CSS编辑区域。
    我试图在系统模板的custom里面寻找类似的代码也没有找到。
    不知道能不能给我这种小白详细讲解下步骤呢?

  • #5

    网上邻居 (Sunday, 14 October 2012 12:07)

    Eisen:
    本文所述内容是对Jimdo系统模板的广告盒进行自定义,它不涉及模板custom,也就是说,它跟模板没有关系,不管是系统模板还是自定义模板,只要在头部添加以下代码,广告盒的高度就会发生变化:
    <style type="text/css">
    #jimdobox{height:150px !important}
    </style>
    具体方法是:登录您的网站,点击右上角控制面板中的“设置”,然后找到“编辑head部分”,将以上代码复制进去并保存,就可以了。

  • #6

    要返网 (Friday, 07 December 2012 15:08)

    来学习了,邻居对jimdo的研究来越来越深了!

  • #7

    哈娱网 (Saturday, 02 February 2013 17:22)

    要好好研究一下这个

  • #8

    Chanel iPhone 6 Plus Wallet Cases (Monday, 11 April 2016)

    We got some time with a pre-production model of the phone, and a couple of its Friends. Here’s what we discovered. Bear in mind that, since it was a pre-production model, what ships may not be exactly what we reviewed, and that some of the glitches we found will have been corrected.