1

博客园主题分享-仿FANFOU-小清新主题

 3 years ago
source link: https://www.cnblogs.com/shenmin/p/15136462.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

第二步：勾选模板默认样式

在页面定制css选项下 勾选禁用模板默认css







第三步：设置自定义样式

复制下面 css 代码，粘贴到 “页面定制输入框选项下 ”



.navbar,
#top_nav,
#blogCalendar,
#lnkBlogLogo,
.blogStats,
#under_post_card1,
#cnblogs_c2,
#under_post_card2,
#cnblogs_c1,
#blogTitle h2,
#sidebar_search,
#sidebar_recentcomments,
#sidebar_topcommentedposts,
.buryit,
#EntryTag,
.entrylistDescription {
display: none;
}
*,
* html * {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
}
body {
margin: 0px;
padding: 0px;
background: linear-gradient(40deg, #155263 9%, #155263 43%, #FF6F3C calc(43% + 1px), #FF6F3C 52%, #FF9A3C calc(52% + 1px), #FF9A3C 80%, #FFC93C calc(80% + 1px), #FFC93C 100%);
}
a {
text-decoration: none;
}
#home {
width: 70%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
}
#blogTitle h1 a {
text-decoration: none;
color: rgb(13, 0, 77);
text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12px;
font-size: 30px;
font-family: "幼圆";
letter-spacing: 8px
}
#navigator {
background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
padding: 7px 0;
border-radius: 8px;
text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
}
#navigator ul {
list-style: none;
margin: 0px;
padding: 0px;
margin-right: 15px;
}
#navigator ul li {
text-decoration: none;
float: left;
margin-left: 15px;
}
#navigator ul li a {
text-decoration: none;
color: rgb(13, 0, 77);
text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 1
}
#main {
display: flex;
background: #ffffff;
border-radius: 8px;
text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
}
#mainContent {
width: 70%;
padding: 20px;
}
.dayTitle,
.entrylistTitle,
.PostListTitle {
width: auto;
background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
border-radius: 8px;
padding: 5px;
margin-bottom: 15px;
}
.dayTitle a {
color: #8590a6;
}
.postTitle {
margin-bottom: 15px;
}
.postTitle2 span {
color: black;
font-size: 18px;
}
.postCon,
.entrylistPostSummary {
background: rgba(41, 41, 41, 0.4);
border-radius: 8px;
padding: 12px;
font-size: 13px;
}
.c_b_p_desc {
font-weight: 600;
color: rgb(255, 255, 255);
text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12
}
.c_b_p_desc a {
color: rgb(255, 255, 255);
}
.postDesc,
.entrylistItemPostDesc {
font-size: 12px;
color: rgba(41, 41, 41, 0.4);
margin: 10px 0px 20px 0px;
}
.postDesc a,
.entrylistItemPostDesc a {
font-size: 12px;
color: rgba(41, 41, 41, 0.4);
}
#nav_next_page {
background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
font-size: 12px;
padding: 12px;
border-radius: 8px;
}
#nav_next_page a {
color: rgb(13, 0, 77);
}
#homepage_top_pager .pager a,
.forFlow .pager a {
color: rgb(13, 0, 77);
background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
border: none;
padding: 4px 10px;
border-radius: 8px;
}
#homepage_bottom_pager .pager a {
color: rgb(13, 0, 77);
background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
border: none;
padding: 4px 10px;
border-radius: 8px;
}
.catListTitle {
font-size: 18px;
letter-spacing: 3px;
}
#sideBar {
width: 30%;
background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-left: 1px solid #5EDFFF;
padding: 20px;
}
#footer {
text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
background: #fff;
font-size: 12px;
margin: 1.25em 0;
padding: 10px;
border-radius: 8px;
text-align: center;
}
.notice {
font-size: 12px;
border-radius: 3px;
padding: 13px;
letter-spacing: 3px;
background: #8590a6;
color: rgb(255, 255, 255);
box-shadow: 5px 1px 5px #888888;
}
#profile_block {
margin-top: 15px;
display: flex;
flex-wrap: wrap;
font-size: 11px;
justify-content: center;
background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%);
background-blend-mode: normal, normal, screen, overlay, normal;
color: rgb(255, 255, 255);
text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
padding-top: 80px;
border-radius: 3px;
}
#profile_block br {
display: none;
}
#profile_block a {
margin-right: 10px;
color: rgb(255, 255, 255);
}
.catListLink ul {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 12px;
padding: 10px;
border-radius: 3px;
letter-spacing: 3px;
background: linear-gradient(55deg, #212121 0%, #212121 40%, #323232 calc(40% + 1px), #323232 60%, #008F95 calc(60% + 1px), #008F95 70%, #14FFEC calc(70% + 1px), #14FFEC 100%);
}
.catListLink ul li a {
color: #ffffff;
a
}
#sidebar_categories ul,
#sidebar_toptags ul {
margin: 0px;
padding: 0px;
}
#sidebar_categories ul li,
#sidebar_toptags ul li {
background: rgba(41, 41, 41, 0.4);
padding: 5px;
border-radius: 3px;
text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
margin-bottom: 4px;
list-style-type: none;
}
#sidebar_categories ul li a,
#sidebar_toptags ul li a {
color: #ffffff;
font-size: 12px;
}
.post>.postTitle {
background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
font-size: 12px;
padding: 12px;
border-radius: 8px;
}
#green_channel {
font-size: 12px;
text-align: right;
background: #f1f1f1;
padding: 12px;
border-radius: 8px;
border: 0px;
width: auto;
}
.blogpost-body-html {
letter-spacing: 2px;
}
#green_channel #green_channel_digg,
#green_channel #green_channel_follow,
#green_channel #green_channel_favorite {
background: none;
box-shadow: none;
border: none;
color: #323232;
}
#green_channel a:link,
#green_channel a:visited,
#green_channel a:active {
color: #515879 !important;
border: none !important;
text-shadow: none !important;
font-weight: 400 !important;
}
#BlogPostCategory {
position: relative;
top: 46px;
left: 20px;
width: 200px;
font-size: 13px;
color: #515879;
}
#BlogPostCategory a {
color: #515879;
}
#author_profile {
background: linear-gradient(123deg, #2E99B0 0%, #2E99B0 40%, #FCD77F calc(40% + 1px), #FCD77F 60%, #FF2E4C calc(60% + 1px), #FF2E4C 75%, #1E1548 calc(75% + 1px), #1E1548 100%);
border-radius: 8px;
padding: 12px;
width: auto;
float: none;
}
.author_avatar {
border-radius: 20px;
border: 1px solid #ffffff;
text-shadow: #14FFEC;
}
.author_profile_info a {
color: #fff;
}
#div_digg {
position: relative;
top: -87px;
width: auto;
margin-right: 15px;
margin-bottom: 0px;
}
.diggit {
border-radius: 3px;
text-shadow: #14FFEC;
}
#comment_nav {
background: #f1f1f1;
padding: 12px;
border-radius: 8px;
margin-bottom: 15px;
}
#comment_nav a {
color: #515879;
font-size: 10px;
}
#blog-comments-placeholder {
font-size: 13px;
color: #515879;
margin: 10px 0;
letter-spacing: 2px;
}
#blog-comments-placeholder a {
color: #515879;
}
.blog_comment_body {
background: #f1f1f1;
padding: 5px 20px;
margin: 10px;
border-radius: 8px;
}
.feedbackManage {
margin-bottom: 10px;
margin-left: 0px;
}
.feedback_area_title {
font-size: 18px;
color: #000;
}
.comment_btn {
color: rgb(13, 0, 77);
background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
border: none;
padding: 4px 10px;
border-radius: 8px;
}
.entrylist>.entrylistTitle {
display: none;
}
.entrylistItemTitle span {
color: black;
font-size: 18px;
}
.entrylistPosttitle {
margin-bottom: 20px;
}
#myposts .postTitl2 {
margin-bottom: 15px;
}
#myposts .postTitl2 a {
color: black;
font-size: 18px;
margin-bottom: 15px;
}
#myposts .postDesc2 {
background: #f1f1f1;
padding: 12px;
border-radius: 8px;
margin-bottom: 15px;
}
#TopViewPostsBlock ul,
#TopDiggPostsBlock ul {
margin: 0px;
padding: 0px;
}
#TopViewPostsBlock ul li,
#TopDiggPostsBlock ul li {
list-style-type: none;
background: rgba(41, 41, 41, 0.4);
padding: 6px;
border-radius: 8px;
margin-bottom: 7px;
}
#TopViewPostsBlock ul li a,
#TopDiggPostsBlock ul li a {
font-size: 13px;
color: #fff;
}
.comment_textarea {
width: auto;
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK