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

  • 时间:
  • 浏览:425次
  • 来源:网站服务商官网 网址:https://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样式代码也是没有指定宽度和高度的,自动大小就行,设计多大就是多大,最大也是不会超过原来的大小的,这样的话,就不会全屏缩放了,在电脑和手机都能完美展示了。大家可以看看本站网站服务商的效果哦!

本文地址:https://www.wzfws.com/logo.html


网站服务商经典语录
欢迎关注我的微信和微信公众号

猜你喜欢

免费在线智能AI文章伪原创工具源码

免费在线智能AI文章伪原创工具源码出售本工具源码不写入数据库,上传到任意支持php的网站空间即可,部分空间需要开启相关的参数,才能正确使用。伪原创工具的工作原理是:使用谷歌翻译

2019-07-19  分类:小工具  浏览:18次


网站服务商diy模板更新

更新的地方有:1、6月19日增加了两个栏目单页面模板。2、6月22日修改了文章详情页的字体大小和间距。3、6月23日调整了上一篇、下一篇和猜你喜欢的位置。4、6月24日,在上一篇、下一篇的上方,增加一个回到目录的提示与地址。

2019-07-01  分类:本站公告  浏览:45次


杨泽业:mipjz网站的MIP数据提交到神马搜索的实现方法

今天早上研究了一下,怎么把mipjz程序的文章链接和标签链接推送到神马搜索里面。我们的程序是mip的,神马搜索页也支持MIP数据提交。神马搜索里面只是提供了api,没有提交的入

2019-07-01  分类:mipcms  浏览:117次


工信部批复设立中国自己的域名根服务器

6月26日,工信部发布通告《工业和信息化部关于同意中国互联网络信息中心设立域名根服务器(F、I、K、L根镜像服务器)及域名根服务器运行机构的批复》及《工业和信息化部关于同意互联

2019-06-28  分类:行业资讯  浏览:42次


给你的网站添加百度商桥的在线沟通的功能

今天我访问我的一个买了我的mip网站模板的客户的网站,发现了他的网站添加了百度商桥的在线沟通的功能。我认为添加了商桥的代码,肯定就不能通过百度mip的验证了。但是,我错了。我经

2019-06-21  分类:基础知识  浏览:108次


景安虚拟主机免费一键开启https安全访问的方法

今天在杨泽业网站建设交流群(群号:187388018)群友普密斯精密仪器问我:“群主,你网站上有把mipcms加上https的教程吗?”我回答说:“没有,你遇到什么问题了,直接

2019-06-20  分类:基础知识  浏览:81次


网站服务商diy模板618更新:全站删除文章缩略图,让网站访问更加快速

网站服务商讯:网站服务商站长杨泽业基于mipjz官方模版制作的diy模板,在2019年6月18日进行更新:全站删除文章缩略图,让网站访问更加快速。本次删除的缩略图的地方有首页列

2019-06-17  分类:本站公告  浏览:58次


给网站添加网站地图

网站地图,又称站点地图,它就是一个引导页面,让用户或者搜索引擎更加方便的找到自己需要的内容,搜索引擎蜘蛛非常喜欢网站地图。网站地图分为html地图和xml地图。html地图给用

2019-06-10  分类:基础知识  浏览:86次


网站地图

网站地图,又称站点地图,它就是一个引导页面,让用户或者搜索引擎更加方便的找到自己需要的内容,搜索引擎蜘蛛非常喜欢网站地图。网站地图分为html地图和xml地图。html地图给用

2019-06-10  分类:建站百科  浏览:51次


工业和信息化部向中国电信,中国移动,中国联通,中国广电颁发5G牌照

网站服务商讯:中国的5g牌照终于在2019年的6月6日发放了,中国正式进入了5G时代。工业和信息化部向中国电信、中国移动、中国联通、中国广电颁发5G牌照。以下是来自于工信部的官

2019-06-06  分类:行业资讯  浏览:60次