修改 begin 主题“关于本站”小工具的头像为居中显示

2018-08-1116:54:31 发表评论 742 人看过

“关于本站”是 begin 主题独有的一个侧边栏小工具,除了有展示网站 logo 等信息的功能,还包含了几个主流社交媒体的快捷入口,可以说非常实用了。但作为“外貌协会”的资深会员,我一直对它左图右文的排版方式不太满意,一方面是因为侧边栏的宽度较小,决定了它更适合上下结构的排版方式,另一方面,我发现头像和文字总是对不齐,影响美观。所以,当我找到方法之后,我毫不犹豫地将其改成了上图下文的结构,让头像居中对齐。下面将我的 CSS 样式分享给大家。

使用方法:

将下面的代码复制粘贴到网站后台“外观>主题选项>定制风格>自定义样式”。然后将代码中第四行的背景图片链接改为你自己的想要的图片链接即可。

  1. /** 修改关于本站 css**/
  2. .about-img {
  3.     text-aligncenter;
  4.     backgroundurl(https://uioss.oss-cn-shenzhen.aliyuncs.com/2017/05/beijing.jpg) center center no-repeat;
  5.     background-size: cover;
  6.     height156px;
  7.     border-radius:8px;
  8.     margin: -10px -15px 30px;
  9. }
  10. .about-img img {
  11.     floatnone;
  12.     border3px solid #FFF;
  13.     border-radius: 50%;
  14.     padding0px;
  15.     heightauto;
  16.     text-aligncenter;
  17.     width120px;
  18.     margin65px 0 0 0;
  19. }
  20. .about-name {
  21.     text-aligncenter;
  22.     font-size16px;
  23.     positionrelative;
  24.     displayblock;
  25. }
  26. .about-name {
  27.     font-size16px;
  28.     font-weightthick;
  29. }

最后,看一下修改前、修改后的效果对比。

修改 begin 主题“关于本站”小工具的头像为居中显示 修改 begin 主题“关于本站”小工具的头像为居中显示
修改前 修改后

 

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: