Cách tạo Footer 4 cột dùng trong các Themes của Genesis Framework

Fri, Aug 13, 2021

Nam Bá

Đọc trong 1 phút

Một Tips rất hữu ích dành cho người chuyên sử dụng các Themes của Genesis Framework

Cách tạo Footer 4 cột dùng trong các Themes của Genesis Framework

Mời Nam 1 ly cafe...

Hoặc click quảng cáo ủng hộ Nam nhé ^^!

Hãy đưa phần này vào file Functions.php

 

<?php
//* Do NOT include the opening php tag

// Add support for 4-column footer widgets
add_theme_support( 'genesis-footer-widgets', 4 ); 

Tiếp đó, hãy Style lại các khối Widget Footer vừa được định nghĩa với dòng Code sau (Gắn vào Custom Css hoặc gắn trực tiếp vào file Style.css trong Themes

 
/* 4-Column Footer (Overrides default 3-column setup in Genesis, so that code must remain in place)
---------------------------------------------------------------------------*/

.footer-widgets-1, 
.footer-widgets-2, 
.footer-widgets-3, 
.footer-widgets-4 {
	width: 21.875%; /* 252px / 1152px */
}

.footer-widgets-1, 
.footer-widgets-2, 
.footer-widgets-3 {
	float: left;
	margin-right: 4.166666666%; /* 48px / 1152px */
}
.footer-widgets-4 {
	float: right;
}

@media only screen and (max-width: 768px) {

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.footer-widgets-4 {
		width: 47.9166666666%; /* 552px / 1152px */
	}
	
	.footer-widgets-2 {
		float: right;
		margin: 0;
	}

}

@media only screen and (max-width: 480px) {

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.footer-widgets-4 {
		width: 100%;
	}
	
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		margin: 0;
	}
}