修改Typecho主题的Head各元素

in 建站 with 0 comment

主题head.php文件位置

...\wwwroot\default\usr\themes\pinghsu\header.php       

head.php文件调用的CSS

主题head顶部调用了2个class,一个是div调用的“navbar-container",一个是a标签的文字调用的是"navbar-logo",a标签里嵌入的img调用的是“navbar-logo img”

<div class="navbar-container">
     <a href="<?php $this->options->siteUrl(); ?>" class="navbar-logo" >
        <?php if($this->options->logoUrl): ?>
        <img src="<?php $this->options->logoUrl();?>" alt="<?php $this->options->title() ?>"   >
        <?php else : ?>
        <?php $this->options->title() ?>
        <?php endif; ?>
    </a>

网站名称或标题logo

在“控制台”---“外观”---“设置外观”中设置“页头logo地址”,也就是标题图片
1.jpg

当不设置“页头logo地址”时,在“设置”---“基本”---“站点名称”里填写的网站名称会显示在head栏
2.jpg
注意:以上“页头logo地址”和“站点名称”只会显示其中一个,如果都设置,则会显示图片,因为上面那段PHP代码中的if和else语句做了判断,如果有img则显示图片,如果没有img就显示文字


CSS样式文件位置

 ...\wwwroot\default\usr\themes\pinghsu\style.min.css

修改该CSS文件,查找"navbar-logo"和“navbar-logo img”,以下为这两个class的原始属性。其中,22px的font-size真的很小;图片也是22px的height,真心不大气;一定要改掉。

.navbar-logo{font-size:22px;line-height:22px;position:absolute;top:50%;left:0;display:block;width:auto;max-width:50%;height:22px;margin-top:-10px;margin-left:25px;text-decoration:none}
.navbar-logo img{width:auto;height:22px;outline:0;}

其中“navbar-logo img”样式是控制刚才设置的“页头logo地址”,"navbar-logo"是设置站点名称的样式.


修改CSS

当使用站点名称文字时,修改CSS文件中的"navbar-logo",修改了font-size,增加了font-family和color

.navbar-logo{font-size:36px; font-family:"华文行楷"; color:#F66;line-height:22px;position:absolute;top:50%;left:0;display:block;width:auto;max-width:50%;height:22px;margin-top:-10px;margin-left:25px;text-decoration:none}.

效果如下:
3.jpg


当使用标题图片时,修改CSS文件中的"navbar-logo img",修改了height的大小,增加了margin-top

.navbar-logo img{width:auto;height:50px;outline:0;margin-top:-10px;}

效果如下:
4.jpg


修改head容器的class

最后CSS文件中还一个“navbar-container”,可以用来调节head容器的长、宽等元素。比如width参数默认值为1066px,当改为1300px后,head将变长

.navbar-container{position:relative;width:1300px;max-width:100%;height:70px;margin:0 auto}

效果如下:

5.jpg


吐槽google浏览器

最后需要吐槽一下Google Chrome浏览器,在浏览器里按F12---点击network---勾选Disable cache,依然无法关闭CSS缓存,导致修改CSS样式文件时,页面完全没有任何变化。好在火狐浏览器没有这个问题,直接用火狐调试即可。

评论&留言