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

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

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;
	}
}