本视频主要讲解如何对特定的WordPress网站模板进行细调,如何快速地发布新产品,如何通过调整CSS来美化产品及分类页的排版。 对于很多WordPress模板,要精细化调整其分类页或者产品页的排版时,经常会调整到它的CSS,前期对CSS还不是很熟悉的学员可以跟着视频的操作,用现成的CSS 对网站的产品或者分类页进行排版,练习多了自然会熟悉并掌握CSS的用法。 视频里的, 产品浏览图尺寸: 600*500px; 产品特色图尺寸: 400*300px;
视频中用到的 CSS代码: (这些代码只适用于视频中的网站模板,对其他模板不适用)
/*调整特色图的尺寸与背景色*/
#tm_builder_outer_content .tm_pb_slider.tm_pb_slider_full_height{height:70vh}; #tm_builder_outer_content .tm_pb_text_align_left{background-color:rgb(200,200,200)}
/*隐藏调用特色图*/
.single .hentry .post-thumbnail__img{display:none;}
/*隐藏调用标题*/
.site-content .breadcrumbs .container .row .breadcrumbs__title .page-title{display:none;}
/*标题居中*/ .entry-header .entry-title{text-align:center;}
/*移动面包屑*/
.breadcrumbs__wrap{position:relative; left:-120%;} .category .breadcrumbs__items { padding-left: 1.5625rem; padding-right: 1.5625rem; float: left !important; display: flex; position: relative; left: -64vw !important;}
/*隐藏发布时间及作者*/
.single .hentry .entry-meta{display:none;}
/*修改导航菜单样式*/
.main-navigation .menu > li > a, .invert .main-navigation.vertical-menu .menu > li > a, .invert .main-navigation .menu.isStuck > li > a, .invert .main-navigation.mobile-menu .menu > li > a {font-size:12pt; font-weight:500; color:white;} .main-navigation:not(.vertical-menu) .menu{position:relative;left:-20%;}
/*隐藏分类日期与作者*/
.post-list__item-content .entry-meta{display:none;}
/*隐藏Read More*/
.entry-footer .link{display:none;}
/*隐藏页面作者简介*/
.post-author-bio{display:none;}
/*留言左对齐*/
.comment-respond{text-align:left;} .comments-area .comment-respond {margin-left:10px;}
/*设置社交分享*/
.single .hentry .entry-footer > *:first-child {margin-top:0px; text-align:left;margin-left:10px;}
/*特色图加边框*/
.post-list__item-content {border:solid 2px #717070} .entry-header .entry-title { margin-bottom:-5px;}
/*分类页左右侧间隔*/
.card-deck{margin-left:-1rem; margin-right:-1rem;}