杨泽业:给你的mipmcs网站默认模板添加网站logo详细教程

  • 时间:
  • 浏览:208
  • 来源:网站服务商官网
  • 网址:www.wzfws.com

网站服务商杨泽业:给你的mipmcs网站默认模板添加网站logo详细教程


今天我在我的另一个新的网站上面,感觉还是必须添加logo才更加有意义,但是默认的模板是显示文字的,于是我今天就开始研究怎么把默认的mipcms网站添加logo,而且在电脑和手机上面都能完美的展示。经过我在测试的网站什么操作,已经完美的解决了问题,于是就把研究的成果分享给大家,希望对想添加logo的人有用。


一、关于logo的高度,宽度,格式。


1.1、logo的高度。在默认的网站导航栏里面,默认的高度是60px的,所以我们做的logo的最大高度不应该超过60px,超过的话,就会拉高了默认模板的高度,感觉很难看。logo的高度建议在50-60px之间,网站服务商网设计的宽度是60px。


1.2、logo的宽度。宽度我觉得是不限制的。根据自己的实际需求来做。如果logo上面的字或者图像多的话,就会宽一点,字少就会窄一点,所以说,logo的宽度,每个网站都不应该是一样的,各自设计自己的logo的宽度就行了。网站服务商网设计的宽度是120px。

1.3、logo的格式。我的建议是设计透明背景的png格式的logo,那样可以与网站底色一致,不会感觉看起来怪怪的。

1.4、ftp上传logo。我们把做好的logo.png图片,上传到网站的指定位置,我是建议和网站服务商一样上传到网站的根目录里面即可。


二、修改网站代码

2.1、替换原理。理论上只要把显示文字地方{$mipInfo['siteName']}改成显示图片<mip-img src=""></mip-img>就行了,实际上呢?这样做是不行的,电脑看起来还好,到了手机上面那就把logo全屏显示了。logo缩放得超大,太难看了,所以我们还要添加一个样式表才行。


2.2、图片代码替换文字代码。我们打开头部模板文件,路径/template/default/main/header.html里面的把logo图片加一个样式就行了代码是{$mipInfo['siteName']}改成<div class="logo"><mip-img src="{$domain}/logo.png"></mip-img></div>。


2.3、从第4行起,代码是:

<div class="logo-text">

<a data-type="mip" href="{$domain}" data-title="{$mipInfo['siteName']}">

<div class="logo"><mip-img src="{$domain}/logo.png"></mip-img></div></a>

</div>


2.4、修改好的代码上传到网站里面,替换原来的内容。我们这里的代码是没有指定logo的宽度和高度的,也不需要指定大小,因为每个人是不一样的。


三。修改网站的  css样式表文件。

我们在样式表mipcms.css的文件,路径/public/assets/default/css/mipcms.css最后一行添加下面的代码即可:

.logo img {

  vertical-align: middle;

  width: auto;

  min-width: auto;

  height: auto;

}

上面的 css样式代码也是没有指定宽度和高度的,自动大小就行,设计多大就是多大,最大也是不会超过原来的大小的,这样的话,就不会全屏缩放了,在电脑和手机都能完美展示了。大家可以看看本站网站服务商的效果哦!

猜你喜欢

杨泽业:给你的mipcms网站添加一个首页滚动公告栏

网站服务商杨泽业:给你的mipcms网站添加一个首页滚动公告栏如果你有什么公告或者广告的话,我觉得在首页左侧的位置添加一个滚动的公告栏(广告栏),这样的话,我感觉是比较好的。说

2018-11-20 @mipcms  滚动公告

[公益模版]自定义颜色列表试自适应mipcms独立diy模板优化版2.0

前几天网站服务商推出了《中国蓝》《中国红》的公益模板1.0,从现在起不再按颜色命名了,因为颜色大家随意随意设置,主要重心放在模版的用户体验和模版优化上面来,下面是最新的模版说明

2018-11-02 @网站模板  自定义模板

杨泽业:让mipcms侧边栏的部分栏目文章按标签样式显示(小众需求)

网站服务商杨泽业:让mipcms侧边栏的部分栏目文章按标签样式显示(小众需求)本站添加了一个叫做建站百科的栏目,因为百科是词条,字数肯定不会像普通文章那样长了,如果按照普通的文

2018-10-30 @mipcms  标签

杨泽业:给mipcms网站的文章添加SEO标题

网站服务商杨泽业:mipcms优化教程:给mipcms网站的文章添加SEO标题我在上次做中国红和中国蓝的模板的时候,我就想把文章的seo标题加上去的,苦于不懂得怎么写入数据库,

2018-10-29 @mipcms  mipcms优化mipcms

mipcms

MIPCMS是苏州三三云网络科技有限公司的核心产品之一,基于百度MIP移动加速器而开发的内容管理系统,移动版采用百度MIP标准页面,网站收录后,SEO排名将得到快速的提升。根据

2018-10-29 @建站百科  mipcms