自己动手新增日志信纸

UH的日志信纸功能很不错，可惜默认的信纸太少。
虽然后台没有提供增加信纸的功能，但是只要懂一点基础的HTML和CSS，就可以自己动手增加信纸。


一、信纸背景图片
默认的保存目录是：image/magic/paper/
官方默认提供了8套信纸。
新建信纸背景图片文件的名称可以自己随意命名，为便于区分建议以数字开头，例如：9.bg.gif、9.top.gif、9.bottom.gif、9.left.gif等等。第一个数字表示是第几套信纸，后边的名字表示该图片的位置和用途。

另外，用于选择信纸界面的示例图片可以统一命名为：x.preview.gif，其中x是数字，例如：9.preview.gif

准备好背景素材图片以后，就可以开始动手改文件了。

二、增加选择样式列表
为了用户能够选择使用新增的信纸，需要在这里把新信纸列出来：


需要修改这个文件：template/default/magic_bgimage.htm（如果使用的不是默认模板，则这个文件有可能在你所使用的模板目录中。）

找到这个位置：

1. <li style="float:left; width:60px; text-align:center; margin:4px; cursor:pointer;" onclick="$('blog_article').className = 'article magicpaper8';$('paper8').click();" >
   
2. <div for="paper8"><img src="image/magic/paper/8.preview.gif" alt=""/></div>
   
3. <input id="paper8" type="radio" name="paper" value="8" /> 选择
   
4. </li>

复制代码

把这段代码复制下来并粘贴到下边，然后把新粘贴的代码中所有的“8”改为“9”。如下：

1. <li style="float:left; width:60px; text-align:center; margin:4px; cursor:pointer;" onclick="$('blog_article').className = 'article magicpaper8';$('paper8').click();" >
   
2. <div for="paper8"><img src="image/magic/paper/8.preview.gif" alt=""/></div>
   
3. <input id="paper8" type="radio" name="paper" value="8" />选择
   
4. </li>
   
5. <li style="float:left; width:60px; text-align:center; margin:4px;
   
6. cursor:pointer;" onclick="$('blog_article').className = 'article
   
7. magicpaper9';$('paper9').click();" >
   
8. <div for="paper9"><img src="image/magic/paper/9.preview.gif" alt=""/></div>
   
9. <input id="paper9" type="radio" name="paper" value="9" />选择
   
10. </li>
    

复制代码

如果还要增加新的信纸，按照这个方法继续复制、粘贴、改数字就可以了。


三、为新的信纸增加CSS定义
为了使新增加的信纸能够真正被使用，就需要为信纸写一点CSS代码。
日志信纸的CSS代码保存在这个文件中：template/default/blog.css（如果使用的不是默认模板，则这个文件有可能在你所使用的模板目录中。）

打开这个文件并找到文件末尾，会发现最后一段代码如下：

1. .entry .magicpaper1{ padding: 0 0 0 90px; width: 710px; background:#F7F5E9 url(../../image/magic/paper/1.bg.gif) repeat-y; }
   
2. .entry .magicpaper2{ background: url(../../image/magic/paper/2.top.gif) repeat-x; }
   
3.         .entry .magicpaper2 .resizeimg{ padding: 50px 0 0;background: url(../../image/magic/paper/2.gif) no-repeat 0 0; }
   
4.                 .entry .magicpaper2 .resizeimg2{ padding: 10px; }
   
5. .entry .magicpaper3{ background: url(../../image/magic/paper/3.bg.gif) repeat ; }
   
6.         .entry .magicpaper3 .resizeimg{ padding: 0; background: url(../../image/magic/paper/3.topbg.gif) repeat-x 0 0; }
   
7.                 .entry .magicpaper3 .resizeimg2{ padding: 50px 10px 10px; background: url(../../image/magic/paper/3.logo.gif) no-repeat 100% 0; }
   
8. .entry .magicpaper4{ padding: 30px; width: 750px; background: #F0E9DA; }
   
9.         .entry .magicpaper4 .resizeimg{ padding: 20px; background: #fff url(../../image/magic/paper/4.bottom.gif) no-repeat 100% 100%; border: 1px solid #EDD8CD; }
   
10.                 .entry .magicpaper4 .resizeimg2{ padding: 50px 0 0; background: url(../../image/magic/paper/4.top.gif) no-repeat; }        
    
11. .entry .magicpaper5{ padding: 30px; width: 750px; background: url(../../image/magic/paper/5.bg.gif); }
    
12.         .entry .magicpaper5 .resizeimg{ padding: 20px; background: #FCFFEA; border: 1px dashed #DDDDCC; }        
    
13. .entry .magicpaper6{ padding: 0; background: #F1FCFE url(../../image/magic/paper/6.bg.gif) repeat-x; }
    
14.         .entry .magicpaper6 .resizeimg{ padding: 100px 20px 20px; background: url(../../image/magic/paper/6.topbg.gif) no-repeat;}
    
15. .entry .magicpaper7{ padding: 0; background: #FBF7ED url(../../image/magic/paper/7.bg.gif) repeat-x; }
    
16.         .entry .magicpaper7 .resizeimg{ padding: 100px 20px 20px; background: url(../../image/magic/paper/7.toplogo.gif) no-repeat;}        
    
17. .entry .magicpaper8{ padding: 30px; width: 750px; background: #F9F9F9; line-height:31px; }
    
18.         .entry .magicpaper8 .resizeimg{ padding: 9px 20px 9px 40px; background: #FFF url(../../image/magic/paper/8.bg.gif) repeat-y; border: 1px solid #E9E9E9; }
    
19.         

复制代码

这段代码就是用来控制默认的8套信纸的显示的。
默认的每套信纸对两个页面元素进行了定义，分别是：.entry .magicpaper8、.entry .magicpaper8 .resizeimg

大家可以根据自己新建信纸的需求决定需要对一个或多个元素进行定义。

这里就需要对日志阅读页面中相关层的嵌套结构有个了解。

四、日志内容DIV的结构

在日志阅读页面中，日志内容部分的DIV是这样套在一起的：

1. <div class="entry">
   
2.         <div class="title">这里是日志的标题</div>
   
3.     <div id="blog_article" class="article">
   
4.             <div class="resizeimg" >
   
5.                 <div class="resizeimg2">
   
6.                     <div class="resizeimg3">
   
7.                         <div class="resizeimg4">这里是日志的正文内容</div>
   
8.                 </div>
   
9.             </div>
   
10.         </div>
    
11.     </div>
    
12. </div>

复制代码

信纸部分用到的DIV通常是这几个：resizeimg、resizeimg2、resizeimg3、resizeimg4

了解了这个结构，就可以完全按照自己的需求来订制新的信纸了。

最简单的信纸就是设置一个背景图片或颜色，只需要给resizeimg层定义一个background就可以了。

如果你的信纸比较复杂，比如顶部背景、底部背景、侧边背景、主体背景各不相同，那么就要对resizeimg、resizeimg2、resizeimg3、resizeimg4这几个层进行分别设置。

另外，为了获得更好的效果，还可以对层的内边距、文字行高、阴影甚至颜色等进行设置。

大家不妨动手试试，给自己的用户增加更多的信纸选择。

顶一下..   谢谢分享!!

www.ssclt.cn

谢谢分享

谢谢lllrrrlll 呵呵！

谢谢lllrrrlll 呵呵！

UCHOME 2.0 原创信纸安装下载包
https://discuz.dismall.com/forum. ... =2000408&extra=

分享好东西！支持是必须滴~