Robin theme style modification CSS

The Robin theme has complete functions in all aspects, and the interface is also beautiful, but there will always be some small needs for the style. Here are some CSS style modifications that have been explored.

More classified articles:

Website Construction | Python | Linux | Big Data | Database | Git | Nodejs | Golang | Computer Skills | Computer Technology

About the content modification of the icon

Hide the WeChat icon in the sidebar

/* 选择器：id为feed_widget的class为.weixin的所有后代*/
#feed_widget .weixin{
	display:none;
}

Hide the Weibo icon in the sidebar

#feed_widget .tsina{
	display:none;
}

Center the remaining two icons

#feed_widget .feed-t {
	float:left;
	width:50%;
	height:40px;
	line-height:38px;
}

note

The modification in "Custom Style" will overwrite the style in style.css in the theme directory

Multi-color beautification of navigation bar

#site-nav .down-menu>#menu-item-30>a:hover .font-text,#site-nav .down-menu>#menu-item-30>li.sfHover>a .font-text{background:#992e1e !important}#site-nav .down-menu a{color:#444;margin:0}#site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0 solid #3690cf;transition-duration:.6s}#site-nav .down-menu>.current-menu-item>a{height:88px;line-height:88px;border-bottom:2px solid #3690cf}#site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid #333d46}#site-nav .down-menu>

Slide thumbnail corner beautification

#slideshow #slider img{border-radius:5px;border:0}
.thumbnail{border-radius:5px;border:0}

widget selected low light effects

.widget{background:#fff;margin:0 0 10px 0;border:1px solid #eaeaea;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,0.04);-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}.widget:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2}

Article title click to pan

.list-title a,.widget.like_most_img ul li a,.widget.hot_post_img ul li a,.widget.new_cat ul li a,.widget.recent_comments ul li a,.widget.hot_comment ul li a,.widget.related_post ul li a,.widget.same_post ul li a,.widget.recently_viewed ul li a{position:relative;}

Add an arrow before the article title to beautify

.widget.new_cat ul li a:before,.widget.related_post ul li a:before,.widget.same_post ul li a:before,.widget.recently_viewed ul li a:before{
    content: "\e77a";
    font-family: be;
    font-size: 16px;
    padding: 0 5px 0 0;
}

Note

This code has been compressed and moved to style.css

Force images in the article to be displayed in the center

.single-content p img{
    margin: 0 auto;
}

Modify the font size

.single-content {
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 2;
}

Remove the title text on the slide

.slider-caption {display: none; }

Add text after the title

#post-75 h2 a:after {
    content: "推荐";
    font-size: 14px;
    background: #c40000;
    color: #fff;
    margin: 0 0 0 5px;
    padding: 1px 3px;
    border-radius: 2px;
}

---

Original link: Robin theme style modification CSS