Skip to content

Instantly share code, notes, and snippets.

@manhleo93 manhleo93/photo grid
Created Jun 25, 2019

Embed
What would you like to do?
/* Affiliate disclosure note
------------------------------------------------------ */
.photo-grid {
padding-top: 40px;
clear: both;
}
.photo-grid .wrap {
background: #fff;
border-radius: 2px;
}
.photo-grid .wrap .widget {
margin-bottom: 1px;
word-wrap: break-word;
}
.guideicons {
margin: 2px;
padding: 2px;
text-align: center;
}
.photo-grid a.guideicon {
text-align: center;
display: inline-block;
width: 10%;
color: #666;
margin: 25px 0;
}
.photo-grid a.pc:before {
content: "\f26c";
font-family: FontAwesome;
font-size: 36px;
color: #5d1408;
text-align: center;
display: block;
padding: 0 0 15px 5px;
line-height: 20px;
}
.photo-grid a.laptop:before {
content: "\f109";
font-family: FontAwesome;
font-size: 36px;
color: #5d1408;
text-align: center;
display: block;
padding: 0 0 15px 5px;
line-height: 20px;
}
.photo-grid a.tablet:before {
content: "\f10a";
font-family: FontAwesome;
font-size: 36px;
color: #5d1408;
text-align: center;
display: block;
padding: 0 0 15px 5px;
line-height: 20px;
}
.photo-grid a.mobile:before {
content: "\f10b";
font-family: FontAwesome;
font-size: 36px;
color: #5d1408;
text-align: center;
display: block;
padding: 0 0 15px 5px;
line-height: 20px;
}
.photo-grid a.camera:before {
content: "\f030";
font-family: FontAwesome;
font-size: 36px;
color: #5d1408;
text-align: center;
display: block;
padding: 0 0 15px 5px;
line-height: 20px;
}
.photo-grid a.video:before {
content: "\f03d";
font-family: FontAwesome;
font-size: 36px;
color: #5d1408;
text-align: center;
display: block;
padding: 0 0 15px 5px;
line-height: 20px;
}
.photo-grid a.tulanh:before {
content: "\f2ce";
font-family: FontAwesome;
font-size: 36px;
color: #5d1408;
text-align: center;
display: block;
padding: 0 0 15px 5px;
line-height: 20px;
}
.photo-grid a.maygiat:before {
content: "\f001";
font-family: FontAwesome;
font-size: 36px;
color: #5d1408;
text-align: center;
display: block;
padding: 0 0 15px 5px;
line-height: 20px;
}
.photo-grid a.dieuhoa:before {
content: "\f11b";
font-family: FontAwesome;
font-size: 36px;
color: #5d1408;
text-align: center;
display: block;
padding: 0 0 15px 5px;
line-height: 20px;
}
@media only screen and (max-width: 960px) {
.photo-grid {
padding-top: 12px;
clear: both;
}
.photo-grid a.guideicon {
text-align: center;
display: inline-block;
width: 30%;
color: #666;
margin: 25px 0;
}}
/////////// html
<div class="guideicons">
<a href="https://digitrends.com.vn/may-tinh-ban-tot-nhat.html" class="guideicon pc">PC</a>
<a href="https://digitrends.com.vn/laptop-tot-nhat.html" class="guideicon laptop">Laptop</a>
<a href="https://digitrends.com.vn/may-tinh-bang-tot-nhat.html" class="guideicon tablet">Tablet</a>
<a href="https://digitrends.com.vn/dien-thoai-tot-nhat.html" class="guideicon mobile">Điện thoại</a>
<a href="https://digitrends.com.vn/may-anh-tot-nhat.html" class="guideicon camera">Máy ảnh</a>
<a href="https://digitrends.com.vn/may-quay-phim-tot-nhat.html" class="guideicon video">Quay phim</a>
<a href="https://digitrends.com.vn/tu-lanh-tot-nhat.html" class="guideicon tulanh">Tủ lạnh</a>
<a href="https://digitrends.com.vn/may-giat-tot-nhat.html" class="guideicon maygiat">Máy giặt</a>
<a href="https://digitrends.com.vn/dieu-hoa-tot-nhat.html" class="guideicon dieuhoa">Điều hòa</a>
</div>
//// functions
// Tạo widget mới
genesis_register_sidebar( array(
'id' => 'photo-grid',
'name' => __( 'Category Grid', 'theme-name' ),
'description' => __( 'This is the photo grid widget area.', 'theme-name' ),
) );
// Add photo grid widget area after header.
add_action( 'genesis_after_header', 'sp_photo_grid_widget' );
function sp_photo_grid_widget() {
genesis_widget_area( 'photo-grid', array(
'before' => '<div class="photo-grid"><div class="wrap">',
'after' => '</div></div>',
) );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.