Một số code&css hay dùng trong theme Flatsome

Dưới đây là một số đoạn code và css hay dùng trong theme Flatsome, mình lưu lại theo danh mục để tiện tra cứu sử dụng

1. CSS cho khung search

.form-flat input:not([type="submit"]) {
    border-radius: 4px;
    font-size: 15px;
    background-color:white;
}

.form-flat input:not([type="submit"]) {

border-radius: 4px;

font-size: 15px;

background-color:white;

}

2. Dùng icon trên menu Flatsome

2.1 Menu Flatsome đã hỗ trợ thêm icon vào menu, như hình bên dưới

2.2 Css để chỉnh icon giữa và canh lề các menu item

.header-nav.nav > li > a{
	padding-top:10px;
	min-height: 70px!important;
	padding-left:25px;
	padding-right:25px;
}
.header-nav.nav > li > a:hover{
color:white;
	background-color:white;
}

.header-nav-main{
	padding-right:30px;
}

.header-main .nav > li > a{
    display: inline-block;
}
.menu-item img._before{
	display: block;
  margin-left: auto;
  margin-right: auto;
}

.header-nav.nav > li > a{

padding-top:10px;

min-height: 70px!important;

padding-left:25px;

padding-right:25px;

}

.header-nav.nav > li > a:hover{

color:white;

background-color:white;

}

.header-nav-main{

padding-right:30px;

}

.header-main .nav > li > a{

display: inline-block;

}

.menu-item img._before{

display: block;

margin-left: auto;

margin-right: auto;

}

Css ẩn trên mobile

/** mobile menu css **/
.menu-item img._before{
	display:none;
}

/** mobile menu css **/

.menu-item img._before{

display:none;

}

Kết quả được như sau

3. Rút gọn tiêu đề

/**rut gon tieu de**/
.post-title {
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/**rut gon tieu de**/

.post-title {

text-overflow: ellipsis;

overflow: hidden;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

}

CSS, Flatsome, Tin tức

Một số code&css hay dùng trong theme Flatsome