原创内容,转载请注明出处:https://www.myzhenai.com.cn/post/3266.html
关键词:wordpress book-rev-lite twentyten style.css css
我喜欢用wordpress来练习PHP和一些相关的知识,所以我的模板也是经常改来改去,虽然说这样对收录不太好,但总是禁不住要去折腾。这是我用我的两个wordpress博客的模板来修改的过程,在这里记录一下,以便以后模板升级和更新的时候还得照着这样去改。
这个教程得到了hostloc社区的 @流河旱树 @Vhc @dd0754 @无神通 等朋友的指点,在这里要感谢他们。因为有些难点是在他们的指点下解决的。我一直觉得图片圆圈化显示的方式比较美观,同时我也觉得默认模板的链接颜色和悬停颜色不是那么美观,所以就想着自己动手来修改。
我是通过右键点击页面相关部位\检查元素的方法得到该位置对应的元素,然后在模板目录下的 style.css 文件里找对应的元素来修改。有一些不懂的地方,我就复制整段元素内容到翻译软件里去翻译,通过这样来理解他们的意思和使用方法。
在这里我将我修改过的内容整理出来,以便自己以后能用得着。 相关链接:https://www.myzhenai.com.cn/post/3253.html
一、myzhenai.com.cn myzhenai.com
演示地址:https://www.myzhenai.com.cn/ https://www.myzhenai.com/
#top-bar-menu ul li a { font-family: "Arvo", sans-serif; font-size: 1em; color: #2cc1a4; #修改这里的颜色值 text-shadow: 0px 2px 2px rgba(0,0,0,0.2); line-height: 3.6; -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; } .search-form input { width: 100%; border: 1px solid #423c37; border-radius: 15px; padding: 5px 15px; font-family: "Titillium Web", sans-serif; font-size: 0.75em; text-transform: uppercase; color: #2cc1a4; #修改这里的颜色值 background: #ffffff; box-shadow: inset 0px 1px 3px rgba(0,0,0,0.4); } .search-form .search-icon i { font-size: 14px; color: #2cc1a4; #修改这里的颜色值 -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; } #inner-header .logo a:hover{ #添加这一段 color: #2cc1a4; } .site-description{ margin-top: 0; color: #2cc1a4; #修改这里的颜色值 } #main-menu nav ul li a { font-family: "Arvo", sans-serif; color: #18bfef; #修改这里的颜色值 font-size: 1em; -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; line-height: 1.7; } #main-menu nav ul li a:hover { color: #2cc1a4; #修改这里的颜色值 } /* Main Content Slide */ #slider { position: relative; overflow: hidden; #添加这一行 } #slider .slide .book-cover { float: left; width: 19%; overflow: hidden; height: 20em; margin-right: 3%; box-shadow: 0px 3px 5px rgba(0,0,0,0.5); height: 230px; #修改这里的值 border-radius: 50%; #添加这一行 background: #000; } #slider .slide .book-cover img { width: 100%; height: 100%; border-radius: 50%; #添加这一行 } #slider .slide .slide-description .inner-sd { border: 1px solid #2cc1a4; #修改这里的颜色值 border-radius: 5px; height: 100%; padding: 20px 30px; } #slider .slide .slide-description .sd-title a { font-family: "Arvo", sans-serif; color: #18bfef; #修改这里的颜色值 font-size: 1.3em; font-weight: normal; -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; } #slider .slide .slide-description .sd-title a:hover { color: #2cc1a4; #修改或添加这一段 } /* Slider Meta */ #slider .sd-meta { border: 1px solid #2cc1a4; #修改这里的颜色值 border-radius: 3px; padding: 10px; margin-top: 15px; } #slider .sd-meta span a, #slider .sd-meta span { color: #18bfef; #修改这里的颜色值 font-family: "Titillium Web", sans-serif; -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; } #slider .sd-meta span a:hover { color: #2cc1a4; #修改或添加这一段 } #slider .sd-meta .read-more { float: right; padding: 0; font-family: "Titillium Web", sans-serif; text-transform: uppercase; font-weight: bold; font-size: 1em; color: #18bfef; #修改这里的颜色值 line-height: 1.5; -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; } #slider .sd-meta .read-more:hover { color: #2cc1a4; #修改这里的颜色值 } #slider .cycle-pager .cycle-pager-active { background: url("img/snav_a.png") no-repeat; position: absolute; #修改或添加这一段 } #slider .cycle-prev, #slider .cycle-next { width: 40px; height: 40px; border-radius: 50%; #修改或添加这一段 position: absolute; top: 50%; z-index: 9999; margin-top: -20px; background: rgba(0,0,0,0.5); font-size: 1.5em; text-align: center; color: #000; opacity: 0.8; line-height: 1.6; -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; } .featured-carousel .slide .article-content header a:hover { color: #2cc1a4; #修改这里的颜色值 } .featured-carousel .slide .feat-img { float: left; height: 190px; overflow: hidden; border-radius: 3px; width: 150px; margin-right: 2.5%; position: relative; } .article-container article .feat-img { #修改或添加这一段 width: 150px; height: 150px; overflow: hidden; border-radius: 50%; position: relative; float: left; margin-right: 20px; background-color: #ddd; } .article-container article .feat-img a img { width: 100%; height: 100%; } .article-container article header .title { color: #18bfef; #修改这里的颜色值 font-family: "Arvo", sans-serif; font-weight: normal; font-size: 1.438em; -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; } .article-container article header .title:hover { #修改或添加这一段 color: #2cc1a4; } .article-container article header .meta .categ a:hover { color: #2cc1a4; } #latest-reviews-block .article-link.active, #latest-reviews-block .article-link:hover { background: #2cc1a4; cursor: pointer; } #latest-reviews-block .article-link.active .article-title a, #latest-reviews-block .article-link:hover .article-title a { color: #2cc1a4; } #latest-reviews-block .article-link .article-title { margin: 0; padding: 0; font-family: "Arvo", sans-serif; color: #2cc1a4; font-size: 1.250em; font-weight: normal; line-height: 1; } #latest-reviews-block .article-link .article-title a { color: #2cc1a4; -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; } #latest-reviews-block .article-link .article-meta .categ a { font-family: "Titillium Web", sans-serif; text-transform: uppercase; display: block; font-size: 0.750em; color: #2cc1a4; font-weight: 600; margin-top: 5px; margin-bottom: -6px; } #latest-reviews-block .article-link .article-meta .date { color: #2cc1a4; font-size: 0.750em; font-family: "Titillium Web", sans-serif; text-transform: uppercase; line-height: 1; } #latest-reviews-block .lrb-navigation .nav-top:hover, #latest-reviews-block .lrb-navigation .nav-bottom:hover { cursor: pointer; color: #2cc1a4; } #latest-reviews-block .article-display .featured-image { height: 190px; border-radius: 3px; overflow: hidden; position: relative; width: 150px; float: left; margin-right: 20px; } #latest-reviews-block .article-display .article-title a:hover { color: #2cc1a4; } #latest-reviews-block .article-display .a-details .category a:hover { color: #2cc1a4; } #highlight-day .title a:hover { color: #2cc1a4; } #highlight-day .meta .categ a:hover { color: #2cc1a4; } nav.navigation .page-numbers { display: inline-block; text-align: center; border-radius: 3px; font-family: "Arvo", sans-serif; margin-right: 5px; background: #2cc1a4; #修改这里的颜色值 color: #fff; line-height: 2; -webkit-transition: all 0.250s ease-in-out; -moz-transition: all 0.250s ease-in-out; -o-transition: all 0.250s ease-in-out; transition: all 0.250s ease-in-out; padding: 0em 0.7em; } nav.navigation .page-numbers:not(.current):hover{ background: #2cc1a4; } .widget ul li a:hover { color: #2cc1a4; } .widget .tagcloud a:hover { color: #2cc1a4; } .topbooks .title a:hover { color: #2cc1a4; } .topbooks .meta .categ a:hover { color: #2cc1a4; ; } .latest-comments .widget h4 a:hover { color: #2cc1a4; ; } #main-footer .widget .comment a:hover, #main-footer .widget .article a { color: #2cc1a4; } #main-footer .widget ul .recentcomments a:hover { color: #2cc1a4; } .widget.latest-articles .article a:hover { color: #2cc1a4 !important; } .article-container.post > header .article-details .categ a:hover { color: #2cc1a4; } .article-container.post #wrap-up .review-header .categories a:hover { color: #2cc1a4; } #author-box .author-details h3 a:hover { color: #2cc1a4; } #comments-section #comments-container .comment .author-name a:hover { color: #2cc1a4; }
二、mybabya.com
演示地址: https://jiayu.mybabya.com/ https://www.mybabya.com/
.entry-title a:link, .entry-title a:visited { color: #18bfef; text-decoration: none; } .entry-title a:active, .entry-title a:hover { color: #2cc1a4; } #site-title a { color: #18bfef; #修改这个颜色值 font-weight: bold; text-decoration: none; } #site-title a:hover { #添加这行 color: #2cc1a4; } #access a { color: #18bfef; #修改这个颜色值 display: block; line-height: 38px; padding: 0 10px; text-decoration: none; } #access a:hover { #添加这行 color: #2cc1a4; } #access li:hover > a, #access ul ul :hover > a { background: #333; color: #2cc1a4; } .format-gallery .size-thumbnail img, .category-gallery .size-thumbnail img { border: 10px solid #f1f1f1; margin-bottom: 0; width: 150px; #添加这行 height: 150px; #添加这行 overflow: hidden; #添加这行 border-radius: 50%; #添加这行 } /* Comments form */ input[type="submit"] { color: #18bfef; #修改这个颜色值 width: 40px; #添加这行 height: 40px; #添加这行 overflow: hidden; #添加这行 border-radius: 50%; #添加这行 border-color:#2cc1a4; #添加这一行 } .widget_search #s {/* This keeps the search inputs in line */ width: 60%; border-color:#2cc1a4; #添加这一行 } .page-link a:active, .page-link a:hover { color: #2cc1a4; } .entry-meta a:hover, .entry-utility a:hover { color: #2cc1a4; }
sicnature ---------------------------------------------------------------------
I P 地 址: 3.23.103.14
区 域 位 置: 美国
系 统 信 息:
Original content, please indicate the source:
同福客栈论坛 | 蟒蛇科普 | 海南乡情论坛 | JiaYu Blog
sicnature ---------------------------------------------------------------------
没有评论