更改.css文件代码来自定义导航样式

在修改picmemo时的笔记

修改前的原貌

修改要求:1.将菜单的字体颜色改成其它颜色(找到改的位置)2.将高亮效果改变

1.将菜单的字体颜色改成其它颜色

在style.css中的修改代码关键词:nav

位置:

更改导航的字体颜色所在行列,padding

将最后的color改成自己想要的颜色。我改成的是黑色。

after

 

2.将高亮效果改变

原来的高亮效果是深灰色的,不怎么好看,现在准备改成自定义图片的高亮样式,示例是个个粉色的(色调和主站不搭,这里讲究用,嘿嘿!)

我们找到#nav li.current-menu-item a

菜单高亮按钮代码

将background color改成自己喜欢的颜色:background-color:喜欢颜色的代码;

或者自己上传的图片链接:background:url(images/文件名);(将图片放到wp-content\themes\主题名\images\目录下)

after高亮更改后

 

更改后所在页面的高亮就变成了我们现在的边缘虚化的粉红色,而鼠标掠过的高亮还没有变,我们找到hover关键字然后锁定行列

hover更改行列代码

按照上边的更改方式将background中的这一堆改成background:url(images/文件名);

 

  • 有的时候我们做的图片并不完全合适
before字体宽度限定

我们还要给每个菜单按钮限制长度,位置在#nav li a{}

随意位置加入代码width:100px;(px之前的数值可以根据自己的情况进行调整)

 

  • 有的时候我们的高亮图片不能居中显示
before图片剧中

我们在代码后边加入 top center no-repeat;

例:background:url(images/XX.gif) top center no-repeat;

before图片剧中

这样图片就乖乖的居中显示咯!

 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注