佈景主題Template調整的是主要在兩個地方進行設定
1.網站佈景主題套用的css設定 – style.min.css
2.佈景主題外觀的自訂設定
目前的調整如下：
1.網站佈景主題套用的css設定 – style.min.css
所以要修改的是這個檔案，style.css是有縮排的格式
1) .page-header-title
原本的.page-header-title跟其他類別一起設定
為了提高新增設定的順位，在前面加了ID main
配合圖片將字形顏色設定成白色、調整行高line-height
#main .page-header-title
{
display: block;
font-size: 24px;
font-weight: 400;
margin: 0;
color: #f1f1f1;
line-height: 0.2;
}
後來發現佈景主題更新好像也會洗掉CSS
所以移到自訂設定
2.佈景主題外觀的自訂設定
1) 自訂- General Options
調整->Page Title->BREADCRUMBS 取消勾選 文章標題
2) 自訂-Text Transform
調整Body裡的 font-family-字型類型、 font-size-大小、line-height-行高
3) 自訂- Custom CSS/JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139 | /* 單篇文章內容的超連結取消底線 */
#conten .entry-content a{
text-decoration: inherit;
}
/* 文章行事曆的超連結樣式 */
.wp-calendar-table a {
box-shadow:2px 2px 8px #BEBEBE;padding:3px;
//text-decoration:underline;
border-radius:40%;
}
.wp-calendar-table a:hover{
color:red;
font-size:200%;
box-shadow:inherit;
padding:2px;
}
/* 修改.page-header */
.page-header{
width: 800px;
height: 450px;
margin: auto;
background-size: auto;
background-image: url(/wp-content/uploads/background.jpg);
border-radius:10px;
}
/* google search */
table#gs_id50.gstl_50.gsc-input{
margin-bottom: 0;
}
/*設定選取文字的效果 */
::selection {
background: #4682B4;
color: white;
}
/* 段落文字的字型色定 */
p {
color: #778899;
font-weight: bold;
}
/* 網站標題 */
#site-logo-inner a {
font-family: 'Noto Sans TC', sans-serif;
font-weight: bold;
}
/* 文章分類的子分類往內縮2字元 */
.sidebar-box ul .children {
padding-left:2em;
}
/* 特定文章的表格table樣式 */
#content .post450 {
table-layout: fixed; width: 100%; padding: 5px;
}
#content .post450 tr {
border-bottom:2px #4682B4 dashed;
}
#content .post450 tr:nth-child(1) {
border-top:2px #4682B4 dashed;
}
#content .post450 td:nth-child(2) {
border-left:2px #4682B4 dashed;
}
/* .首頁文章呈現方式 */
#blog-entries .thumbnail {
width:20%;
}
#blog-entries .blog-entry-content {
width:80%;
}
/* 隱藏「關閉文章留言」 */
.blog-entry.thumbnail-entry .blog-entry-comments.clr {
display:none;
}
/* 首頁header標題 */
#main .page-header-title {
display: block;
font-size: 22px;
font-weight: 400;
margin: 0;
color: #f1f1f1;
line-height: 1.5;
}
/* add to any */
.addtoany_share_save_container.addtoany_content.addtoany_content_bottom a{
color: #778899;
font-weight: bold;
font-size: 16px;
text-decoration:none;
}
.addtoany_share_save_container.addtoany_content.addtoany_content_bottom a:hover {
text-decoration:underline;
}
.fb-like {
padding-top:16px;
}
/* 修改手機版的.page-header */
@media only screen and (max-width: 767px){
.page-header {
background-attachment: initial !important;
width: auto;
height:auto;
background-image:none;
}
#main .trail-items a {
color: black;
}
#main .page-header-title {
color:#0a75ad;
font-size:36px;
}
}
@media only screen and (max-width: 480px){
#main .page-header-title {
color:#0a75ad;
font-size:26px;
}
}
|
參考資料
1.[CSS] 改變文字選擇的顏色(反選的顏色)-連結
2.CSS 选择器参考手册-連結
3.RGB颜色值与十六进制颜色码转换工具-連結
4.使用CSS3 :nth-child(n) 選取器教學-連結
5.HTML Table 表格邊框顏色與樣式設計-連結
6.善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度-連結
7. 網頁設計教學百科-CSS-連結
發表文章
