WordPress外贸soho建站实战视频教程-goodspace主题

用到主题：goodspace

用到插件：jQuery Vertical Accordion Menu

步骤：

一、搭建整体外观

仿照目标站先把整体外观搭建起来，不修改文字颜色，及字体大小和背景色。

1.logo设置：wp后台–>Goodspace–>Overall Elements–>Logo（注意使用png背景透明图片logo）

2.导航菜单: wp后台–>外观–>菜单

3.底部/侧边栏：wp后台–>外观–>小工具

4.创建新的sidebar：wp后台–>Goodspace–>General–>Sidebar

5.版权说明：wp后台–>Goodspace–>Overall Elements–>Copyright Area

二、修改细节

1.关闭网站背景图片：wordpress后台–>Goodspace–>Overall Elements–>Background Style 设置成none

2.设置网站整体背景色：wordpress后台–>Goodspace–>Elements Color–>Body

3.设置菜单颜色：wordpress后台–>Goodspace–>Elements Color–>Navigation

4.设置首页醒目标题：wordpress后台–>Goodspace–>Elements Color–>Stunning Text

5.设置产品标题及背景：wordpress后台–>Goodspace–>Elements Color–>Blog / Portfolio

6.设置底部：wordpress后台–>Goodspace–>Elements Color–>Footer

7.添加样式代码：wordpress后台–>外观–>主题编辑器–>style.css最下方添加以下代码

8.使用jQuery Vertical Accordion Menu插件 设置产品侧边栏导航效果

/* yongwp.com custom css*/
div.stunning-text-wrapper, div.gdl-portfolio-title-wrapper, div.gdl-page-title-wrapper {
    background-image: none !important;
    background-color:#06a2cb !important;
}
.gdl-page-title-left-bar {width: 3px !important;background-color: #FFD800 !important;}
.gdl-page-title.gdl-title.title-color, .portfolio-header-title.title-color.gdl-title {color: white;font-size: 13pt;}
.stunning-text-corner.top {background-color: #FFD800 !important;}
.stunning-text-corner.bottom {background-color: #FFD800 !important;}
.single-port-date {display: none;}
.single-port-little-bar {display: none !important;}

.single-port-content li {height: auto; line-height: 25px;}
.single-port-content {font-size: 11pt; font-family: arial;}
div.single-content {line-height: 20px;}
div.single-thumbnail-info {display: none;}
#searchsubmit {background-color: #FF6600 !important;}

.gdl-page-title.gdl-title.title-color, .portfolio-header-title.title-color.gdl-title {font-size: 13pt;}
#main-superfish-wrapper ul li{font-weight: bold;font-size: 11pt!important;}
div.right-sidebar-wrapper .custom-sidebar-title {font-size: 11pt;color: #DD1E2F !important;}
#mc_mv_EMAIL {color: #050505;background-color: #ffffff;border-color: #d4d4d4;}

.toggle-box-head.title-color.gdl-title {font-size: 16px;}
#toggle-box-content {font-size: 14px;font-family: arial;color: #FF6600;}
.recent-post-widget-comment-num.post-info-color {font-size: 11px;}
div.footer-widget-wrapper .custom-sidebar-title {font-weight: bold;}
.footer-wrapper .gdl-divider {font-size: 10pt !important;}
div.column-service-content {font-size: 14px !important;}
ul.gdl-toggle-box li {border-bottom: 0px !important;}
#toggle-box-content {font-size:14px;color:#FF6600;}
.footer-wrapper .footer-widget-wrapper{border-top: 2px solid #d1d1d1 !important;}