Nội dung
Phần 1: Giới thiệu về Child Theme và Hướng dẫn lập trình trên Genesis Framework
Genesis Framework của StudioPress đã trở thành một trong những khung (framework) phổ biến nhất trong việc xây dựng các trang web WordPress chất lượng cao. Với sự linh hoạt và khả năng tùy chỉnh mạnh mẽ, Genesis cho phép bạn tạo ra các trang web đẹp và chuyên nghiệp mà không cần phải viết mã nguồn từ đầu.
Một trong những cách tốt nhất để tận dụng sức mạnh của Genesis Framework mà không lo lắng về việc mất đi các thay đổi khi cập nhật, đó chính là sử dụng Child Theme (gọi tắt là theme con). Trong phần này của loạt bài hướng dẫn, chúng ta sẽ tìm hiểu về Child Theme là gì, tại sao nên sử dụng chúng và cách tạo ra một Child Theme trên Genesis Framework.
Child Theme là gì và tại sao cần sử dụng?
Child Theme là một phần mở rộng của một theme cha (parent theme), trong trường hợp này là Genesis Framework. Nó cho phép bạn thực hiện các tùy chỉnh và thay đổi giao diện, chức năng của trang web mà không cần can thiệp trực tiếp vào mã nguồn của theme cha. Điều này có ý nghĩa quan trọng khi bạn muốn thực hiện cập nhật cho theme cha mà không mất đi các thay đổi bạn đã thực hiện.
Lợi ích chính của việc sử dụng Child Theme bao gồm:
- Bảo trì và cập nhật dễ dàng: Bạn có thể cập nhật Genesis Framework mà không lo lắng về việc mất đi tất cả tùy chỉnh bạn đã làm trên giao diện.
- An toàn và ổn định: Can thiệp vào mã nguồn của theme cha có thể dẫn đến lỗi và xung đột. Sử dụng Child Theme giúp tránh những vấn đề này.
- Tùy chỉnh linh hoạt: Bạn có thể thay đổi bất kỳ phần nào của giao diện mà bạn muốn chỉ bằng cách thêm và sửa đổi các tệp trong Child Theme.
Cách tạo một Child Theme trên Genesis Framework
Để bắt đầu, bạn cần tạo ra một thư mục mới cho Child Theme của mình trong thư mục “wp-content/themes/” của trang web WordPress của bạn. Đặt tên cho thư mục theo một tiêu chuẩn nhất định, ví dụ: “my-genesis-child”.
Trong thư mục mới tạo, bạn cần tạo ra ít nhất hai tệp cơ bản: style.css và functions.php (và 1 tệp screenshot.png). Trong các phần tiếp theo của loạt bài này, chúng ta sẽ đi sâu hơn vào từng phần này để hiểu cách tùy chỉnh giao diện và chức năng của Child Theme.
Chúng ta sẽ tập trung vào tệp style.css của Child Theme và cách thiết lập nó để kế thừa từ Genesis Framework.
Functions.php file
Tệp này chứa các chức năng tùy chỉnh mà chúng ta sẽ tạo trong chủ đề con Genesis để sửa đổi chức năng mặc định của Genesis và WordPress.
<?php
/**
* Code Genesis Child.
*
* This file adds functions to the Code Genesis Child Theme.
*
* @package Code Genesis Child
* @author David Ha
* @license GPL-2.0-or-later
* @link https://quicksite.vn/
*/
Đoạn mã này chứa thông tin liên quan đến tên chủ đề, tác giả, liên kết lưu trữ và loại giấy phép của chúng ta. Để khởi động Genesis Framework, chúng ta sẽ gọi nó là hàm Genesis.
// Starts the engine.
require_once get_template_directory() . '/lib/init.php';Liệt kê thông tin chủ đề con
// Child themes info
define( 'CHILD_THEME_HANDLE', sanitize_title_with_dashes( wp_get_theme()->get( 'Name' ) ) );
define( 'CHILD_THEME_VERSION', wp_get_theme()->get( 'Version' ) );Thiết lập miền văn bản
Tạo một thư mục ngôn ngữ trong chủ đề của bạn.
add_action( 'after_setup_theme', 'genesis_child_localization_setup' );
/** * Sets localization (do not remove). * * @since 1.0.0 */function genesis_child_localization_setup() { load_child_theme_textdomain( 'genesis-sample', get_stylesheet_directory() . '/languages' ); }Thêm hỗ trợ cho các chủ đề con cho HTML5, khả năng truy cập, thẻ meta, kích thước hình ảnh, tiện ích thanh bên, menu điều hướng, Gravatar trong hộp tác giả…v.v.
// Add HTML5 markup structure.
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// Add Accessibility support.
add_theme_support( 'genesis-accessibility', array( '404-page', 'drop-down-menu', 'headings', 'rems', 'search-form', 'skip-links' ) );
// Add viewport meta tag for mobile browsers.
add_theme_support( 'genesis-responsive-viewport' );
// Add image sizes.
add_image_size( 'sidebar-thumbnail', 100, 100, true );
// Add support for custom header.
add_theme_support( 'custom-header', array( 'default-text-color' => '000000', 'flex-height' => true, 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 180, 'width' => 760,
) );
// Rename menus.
add_theme_support( 'genesis-menus', array( 'primary' => __( 'Before Header Menu', 'genesis_child' ), 'secondary' => __( 'After Header Menu', 'genesis_child' ) ) );
// Remove skip link for primary navigation.
add_filter( 'genesis_skip_links_output', 'genesis_child_skip_links_output' );
function genesis_child_skip_links_output( $links ) { if ( isset( $links['genesis-nav-primary'] ) ) { unset( $links['genesis-nav-primary'] ); } $new_links = $links; array_splice( $new_links, 1 ); if ( has_nav_menu( 'secondary' ) ) { $new_links['genesis-nav-secondary'] = __( 'Skip to secondary menu', 'genesis_child' ); } return array_merge( $new_links, $links );
}
// Add ID to secondary navigation.
add_filter( 'genesis_attr_nav-secondary', 'genesis_child_add_nav_secondary_id' );
function genesis_child_add_nav_secondary_id( $attributes ) { $attributes['id'] = 'genesis-nav-secondary'; return $attributes;
}
// Reposition the primary navigation menu.
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );
// Remove output of primary navigation right extras.
remove_filter( 'genesis_nav_items', 'genesis_nav_right', 10, 2 );
remove_filter( 'wp_nav_menu_items', 'genesis_nav_right', 10, 2 );
// Remove navigation meta box.
add_action( 'genesis_theme_settings_metaboxes', 'genesis_child_remove_genesis_metaboxes' );
function genesis_child_remove_genesis_metaboxes( $_genesis_theme_settings_pagehook ) { remove_meta_box( 'genesis-theme-settings-nav', $_genesis_theme_settings_pagehook, 'main' );
}
// Add primary-nav class if primary navigation is used.
add_filter( 'body_class', 'genesis_child_no_nav_class' );
function genesis_child_no_nav_class( $classes ) { $menu_locations = get_theme_mod( 'nav_menu_locations' ); if ( ! empty( $menu_locations['primary'] ) ) { $classes[] = 'primary-nav'; } return $classes;
}
// Customize search form input box text.
add_filter( 'genesis_search_text', 'genesis_child_search_text' );
function genesis_child_search_text( $text ) { return esc_attr( __( 'Search the site ...', 'genesis_child' ) );
}
// Remove entry meta in entry footer.
add_action( 'genesis_before_entry', 'genesis_child_remove_entry_meta' );
function genesis_child_remove_entry_meta() { // Remove if not single post. if ( ! is_single() ) { remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 ); remove_action( 'genesis_entry_footer', 'genesis_post_meta' ); remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 ); }
}
// Add support for 3-column footer widgets.
add_theme_support( 'genesis-footer-widgets', 3 );
// Add support for after entry widget.
add_theme_support( 'genesis-after-entry-widget-area' );
// Relocate after entry widget.
remove_action( 'genesis_after_entry', 'genesis_after_entry_widget_area' );
add_action( 'genesis_entry_footer', 'genesis_after_entry_widget_area' );
add_filter( 'genesis_author_box_gravatar_size', 'genesis_child_author_box_gravatar' );
/** * Modifies size of the Gravatar in the author box. * * @since 1.0 * * @param int $size Original icon size. * @return int Modified icon size. */function genesis_child_author_box_gravatar( $size ) { return 90;
}
add_filter( 'genesis_comment_list_args', 'genesis_child_comments_gravatar' );
/** * Modifies size of the Gravatar in the entry comments. * * @since 1.0 * * @param array $args Gravatar settings. * @return array Gravatar settings with modified size. */function genesis_child_comments_gravatar( $args ) { $args['avatar_size'] = 60; return $args;
}Style.css file
Tôi sẽ bắt đầu tạo kiểu cho tệp CSS bằng cách thêm văn bản tiêu đề chứa thông tin về tên chủ đề, tác giả, phiên bản, mô tả, mẫu, v.v.
/*
Theme Name: Quicksite
Theme URI: https://quicksite.vn/
Description: Tạo bở David Ha.
Author: David Ha
Author URI: https://quicksite.vn/
Version: 1.0
Template: genesis
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: genesis-child
*/Bây giờ bạn cần thêm hỗ trợ HTML5 cho các phần tử HTML5 mặc định. HTML5 đặt lại mọi kiểu trình duyệt mặc định và đảm bảo hiển thị các phần tử HTML5 tốt hơn. Xem https://necolas.github.io/normalize.css
CSS của tôi sẽ trông giống như bên dưới; bạn có thể sao chép chúng. Kết quả sẽ có hình ảnh như bên dưới.
/* # HTML5 Reset
---------------------------------------------------------------------------------------------------- *//* ## Baseline Normalize
--------------------------------------------- *//* normalize.css v7.0.0 | MIT License | https://necolas.github.io/normalize.css/ */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
/* ## Box Sizing
--------------------------------------------- */html,
input[type="search"] { box-sizing: border-box;
}
*,
*::before,
*::after { box-sizing: inherit;
}
/* ## Float Clearing
--------------------------------------------- */.author-box::before,
.clearfix::before,
.entry::before,
.entry-content::before,
.nav-primary::before,
.nav-secondary::before,
.pagination::before,
.site-container::before,
.site-footer::before,
.site-header::before,
.site-inner::before,
.widget::before,
.wrap::before { content: " "; display: table;
}
.author-box::after,
.clearfix::after,
.entry::after,
.entry-content::after,
.nav-primary::after,
.nav-secondary::after,
.pagination::after,
.site-container::after,
.site-footer::after,
.site-header::after,
.site-inner::after,
.widget::after,
.wrap::after { clear: both; content: " "; display: table;
}
/* # Defaults
---------------------------------------------------------------------------------------------------- *//* ## Typographical Elements
--------------------------------------------- */html { font-size: 62.5%; /* 10px browser default */}
/* Chrome fix */body > div { font-size: 1.8rem;
}
body { background-color: #fff; color: #333; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; font-size: 1.8rem; font-weight: 400; line-height: 1.625; margin: 0;
}
a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.gallery img { -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
}
a { color: #c3251d; text-decoration: underline;
}
a:hover,
a:focus { color: #333; text-decoration: none;
}
p { margin: 0 0 28px; padding: 0;
}
ol,
ul { margin: 0; padding: 0;
}
li { list-style-type: none;
}
hr { border: 0; border-collapse: collapse; border-top: 1px solid #ddd; clear: both; margin: 1em 0;
}
b,
strong { font-weight: 700;
}
blockquote,
cite,
em,
i { font-style: italic;
}
blockquote { margin: 40px;
}
blockquote::before { content: "\201C"; display: block; font-size: 30px; height: 0; left: -20px; position: relative; top: -10px;
}
/* ## Headings
--------------------------------------------- */h1,
h2,
h3,
h4,
h5,
h6 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 700; line-height: 1.2; margin: 0 0 10px;
}
h1 { font-size: 36px; font-size: 3.6rem;
}
h2 { font-size: 30px; font-size: 3rem;
}
h3 { font-size: 24px; font-size: 2.4rem;
}
h4 { font-size: 20px; font-size: 2rem;
}
h5 { font-size: 18px; font-size: 1.8rem;
}
h6 { font-size: 16px; font-size: 1.6rem;
}
/* ## Objects
--------------------------------------------- */embed,
iframe,
img,
object,
video,
.wp-caption { max-width: 100%;
}
img { height: auto;
}
/* ## Gallery
--------------------------------------------- */.gallery { overflow: hidden;
}
.gallery-item { float: left; margin: 0 0 28px; text-align: center;
}
.gallery-columns-2 .gallery-item { width: 50%;
}
.gallery-columns-3 .gallery-item { width: 33%;
}
.gallery-columns-4 .gallery-item { width: 25%;
}
.gallery-columns-5 .gallery-item { width: 20%;
}
.gallery-columns-6 .gallery-item { width: 16.6666%;
}
.gallery-columns-7 .gallery-item { width: 14.2857%;
}
.gallery-columns-8 .gallery-item { width: 12.5%;
}
.gallery-columns-9 .gallery-item { width: 11.1111%;
}
.gallery img { border: 1px solid #ddd; height: auto; padding: 4px;
}
.gallery img:hover,
.gallery img:focus { border: 1px solid #999;
}
/* ## Forms
--------------------------------------------- */input,
select,
textarea { background-color: #fff; border: 1px solid #ddd; color: #333; font-size: 18px; font-size: 1.8rem; font-weight: 400; padding: 16px; width: 100%;
}
input:focus,
textarea:focus { border: 1px solid #999; outline: none;
}
input[type="checkbox"],
input[type="image"],
input[type="radio"] { width: auto;
}
::-moz-placeholder { color: #333; opacity: 1;
}
::-webkit-input-placeholder { color: #333;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button { background-color: #333; border: 0; color: #fff; cursor: pointer; font-size: 16px; font-size: 1.6rem; font-weight: 700; padding: 16px 24px; width: auto;
}
button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover,
button:focus,
input:focus[type="button"],
input:focus[type="reset"],
input:focus[type="submit"],
.button:focus { background-color: #c3251d; color: #fff;
}
.entry-content .button:hover,
.entry-content .button:focus { color: #fff;
}
.button { display: inline-block;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button { display: none;
}
/* ## Tables
--------------------------------------------- */table { border-collapse: collapse; border-spacing: 0; line-height: 2; margin-bottom: 40px; width: 100%;
}
tbody { border-bottom: 1px solid #ddd;
}
td,
th { text-align: left;
}
td { border-top: 1px solid #ddd; padding: 6px 0;
}
th { font-weight: 400;
}
/* ## Screen Reader Text
--------------------------------------------- */.screen-reader-text,
.screen-reader-text span,
.screen-reader-shortcut { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; word-wrap: normal !important;
}
.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.genesis-nav-menu .search input[type="submit"]:focus,
.widget_search input[type="submit"]:focus { clip: auto !important; height: auto; width: auto; display: block; font-size: 1em; font-weight: bold; padding: 15px 23px 14px; color: #333; background: #fff; z-index: 100000; /* Above WP toolbar. */ text-decoration: none; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}
.more-link { position: relative;
}
/* # Structure and Layout
---------------------------------------------------------------------------------------------------- *//* ## Site Containers
--------------------------------------------- */.site-inner,
.wrap { margin: 0 auto; max-width: 1200px;
}
.site-inner { clear: both; padding-top: 60px;
}
/* ## Column Widths and Positions
--------------------------------------------- *//* ### Wrapping div for .content and .sidebar-primary */.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap { width: 980px;
}
.content-sidebar-sidebar .content-sidebar-wrap { float: left;
}
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap { float: right;
}
/* ### Content */.content { float: right; width: 780px;
}
.content-sidebar .content,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content { float: left;
}
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content { width: 580px;
}
.full-width-content .content { width: 100%;
}
/* ### Primary Sidebar */.sidebar-primary { float: right; width: 360px;
}
.sidebar-content .sidebar-primary,
.sidebar-sidebar-content .sidebar-primary { float: left;
}
/* ### Secondary Sidebar */.sidebar-secondary { float: left; width: 180px;
}
.content-sidebar-sidebar .sidebar-secondary { float: right;
}
/* # Common Classes
---------------------------------------------------------------------------------------------------- *//* ## Avatar
--------------------------------------------- */.avatar { float: left;
}
.alignleft .avatar,
.author-box .avatar { margin-right: 24px;
}
.alignright .avatar { margin-left: 24px;
}
.comment .avatar { margin: 0 16px 24px 0;
}
/* ## Genesis
--------------------------------------------- */.breadcrumb { margin-bottom: 40px;
}
.archive-description,
.author-box { margin-bottom: 60px;
}
.archive-description p:last-child,
.author-box p:last-child { margin-bottom: 0;
}
/* ## Search Form
--------------------------------------------- */.search-form { overflow: hidden;
}
.site-header .search-form { float: right; margin-top: 12px;
}
.entry-content .search-form,
.site-header .search-form { width: 50%;
}
.genesis-nav-menu .search input[type="submit"],
.widget_search input[type="submit"] { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; padding: 0; position: absolute; width: 1px;
}
/* ## Titles
--------------------------------------------- */.author-box-title,
.archive-title { font-size: 20px; font-size: 2rem;
}
.entry-title { font-size: 36px; font-size: 3.6rem;
}
.entry-title a,
.sidebar .widget-title a { color: #333;
}
.entry-title a:hover,
.entry-title a:focus { color: #c3251d;
}
.widget-title { margin-bottom: 20px;
}
/* ## WordPress
--------------------------------------------- */a.aligncenter img { display: block; margin: 0 auto;
}
a.alignnone { display: inline-block;
}
.alignleft { float: left; text-align: left;
}
.alignright { float: right; text-align: right;
}
a.alignleft,
a.alignnone,
a.alignright { max-width: 100%;
}
img.centered,
.aligncenter { display: block; margin: 0 auto 24px;
}
img.alignnone,
.alignnone { margin-bottom: 12px;
}
a.alignleft,
img.alignleft,
.wp-caption.alignleft { margin: 0 24px 24px 0;
}
a.alignright,
img.alignright,
.wp-caption.alignright { margin: 0 0 24px 24px;
}
.wp-caption-text { font-size: 14px; font-size: 1.4rem; font-weight: 700; text-align: center;
}
.entry-content p.wp-caption-text { margin-bottom: 0;
}
.entry-content .wp-audio-shortcode,
.entry-content .wp-playlist,
.entry-content .wp-video { margin: 0 0 28px;
}
/* # Widgets
---------------------------------------------------------------------------------------------------- */.widget { word-wrap: break-word;
}
.widget ol > li { list-style-position: inside; list-style-type: decimal; padding-left: 20px; text-indent: -20px;
}
.widget li li { border: 0; margin: 0 0 0 30px; padding: 0;
}
.widget_calendar table { width: 100%;
}
.widget_calendar td,
.widget_calendar th { text-align: center;
}
/* ## Featured Content
--------------------------------------------- */.featured-content .entry { margin-bottom: 40px;
}
.featured-content .entry:last-child { margin-bottom: 0;
}
.featured-content .entry-title { font-size: 20px; font-size: 2rem;
}
/* # Plugins
---------------------------------------------------------------------------------------------------- *//* ## Genesis eNews Extended
--------------------------------------------- */.enews-widget input { font-size: 16px; font-size: 1.6rem; margin-bottom: 16px;
}
.enews-widget input[type="submit"] { margin: 0; width: 100%;
}
.enews form + p { margin-top: 24px;
}
/* ## Jetpack
--------------------------------------------- */#wpstats { display: none;
}
/* # Skip Links
---------------------------------------------------------------------------------------------------- */.genesis-skip-link { margin: 0;
}
.genesis-skip-link li { height: 0; width: 0; list-style: none;
}
/* Display outline on focus */:focus { color: #333; outline: #ccc solid 1px;
}
/* # Site Header
---------------------------------------------------------------------------------------------------- */.site-header { min-height: 160px; border-bottom: 1px solid #eee;
}
.site-header .wrap { padding: 40px 0;
}
/* ## Title Area
--------------------------------------------- */.title-area { float: left; padding: 10px 0; width: 360px;
}
.header-full-width .title-area { width: 100%;
}
.site-title { font-size: 30px; font-size: 3rem; font-weight: 700; line-height: 1.2;
}
.site-title a,
.site-title a:hover,
.site-title a:focus { color: #333;
}
.header-image .site-title > a { background: url(images/logo.png) no-repeat left; float: left; min-height: 60px; width: 100%;
}
.site-description { font-size: 16px; font-size: 1.6rem; font-weight: 300; line-height: 1.5;
}
.site-description,
.site-title { margin-bottom: 0;
}
.header-image .site-description,
.header-image .site-title a { overflow: hidden; text-indent: 100%; white-space: nowrap;
}
/* ## Widget Area
--------------------------------------------- */.site-header .widget-area { float: right; text-align: right; width: 780px;
}
/* # Site Navigation
---------------------------------------------------------------------------------------------------- */.genesis-nav-menu { clear: both; font-size: 16px; font-size: 1.6rem; font-weight: 700; line-height: 1; width: 100%;
}
.genesis-nav-menu .menu-item { display: inline-block; text-align: left;
}
.genesis-nav-menu a { color: #333; text-decoration: none; display: block; padding: 32px 20px;
}
.genesis-nav-menu a:hover,
.genesis-nav-menu a:focus,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus { color: #c3251d; text-decoration: underline;
}
.genesis-nav-menu .sub-menu { border-top: 1px solid #eee; left: -9999px; opacity: 0; position: absolute; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; width: 210px; z-index: 99;
}
.genesis-nav-menu .sub-menu a { background-color: #fff; border: 1px solid #eee; border-top: 0; font-size: 14px; font-size: 1.4rem; padding: 20px; position: relative; width: 210px; word-wrap: break-word;
}
.genesis-nav-menu .sub-menu .sub-menu { margin: -56px 0 0 209px;
}
.genesis-nav-menu .menu-item:hover { position: static;
}
.genesis-nav-menu .menu-item:hover > .sub-menu { left: auto; opacity: 1;
}
.genesis-nav-menu > .first > a { padding-left: 0;
}
.genesis-nav-menu > .last > a { padding-right: 0;
}
/* ## Accessible Menu
--------------------------------------------- */.menu .menu-item:focus { position: static;
}
.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.sfHover > ul.sub-menu { left: auto; opacity: 1;
}
/* ## Site Header Navigation
--------------------------------------------- */.site-header .genesis-nav-menu li li { margin-left: 0;
}
/* ## Primary and Secondary Navigation
--------------------------------------------- */.nav-primary,
.nav-secondary { border-bottom: 1px solid #eee;
}
/* # Content Area
---------------------------------------------------------------------------------------------------- *//* ## Entries
--------------------------------------------- */.entry { margin-bottom: 60px;
}
.entry-content ol,
.entry-content ul { margin-bottom: 28px; margin-left: 40px;
}
.entry-content ol > li { list-style-type: decimal;
}
.entry-content ul > li { list-style-type: disc;
}
.entry-content ol ol,
.entry-content ul ul { margin-bottom: 0;
}
.entry-content code { background-color: #333; color: #ddd;
}
/* ## Entry Meta
--------------------------------------------- */p.entry-meta { font-size: 16px; font-size: 1.6rem; margin-bottom: 0;
}
.entry-header .entry-meta { margin-bottom: 24px;
}
.entry-categories,
.entry-tags { display: block;
}
.entry-comments-link::before { content: "\2014"; margin: 0 6px 0 2px;
}
/* ## Pagination
--------------------------------------------- */.pagination { clear: both; margin: 40px 0;
}
.pagination li { display: inline;
}
.pagination li a { cursor: pointer; display: inline-block; font-size: 16px; font-size: 1.6rem; padding-right: 10px; text-decoration: none;
}
.pagination .active a { color: #333;
}
/* ## Comments
--------------------------------------------- */.comment-respond,
.entry-comments,
.entry-pings { margin-bottom: 60px;
}
.comment-header { font-size: 16px; font-size: 1.6rem;
}
.comment-content { clear: both; word-wrap: break-word;
}
.comment-list li { padding: 32px 0 0 32px;
}
.comment-list li.depth-1 { padding-left: 0;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] { width: 50%;
}
.comment-respond label { display: block; margin-right: 12px;
}
.entry-comments .comment-author { margin-bottom: 0;
}
.entry-pings .reply { display: none;
}
/* # Sidebars
---------------------------------------------------------------------------------------------------- */.sidebar { font-size: 16px; font-size: 1.6rem;
}
.sidebar li { margin-bottom: 10px; padding-bottom: 10px;
}
.sidebar p:last-child,
.sidebar ul > li:last-child { margin-bottom: 0;
}
.sidebar .widget { margin-bottom: 60px;
}
/* # Site Footer
---------------------------------------------------------------------------------------------------- */.site-footer { border-top: 1px solid #ddd; font-size: 16px; font-size: 1.6rem; line-height: 1; padding: 40px 0;
}
.site-footer p { margin-bottom: 0;
}
/* # Media Queries
---------------------------------------------------------------------------------------------------- */@media only screen and (max-width: 1280px) { .site-inner, .wrap { max-width: 960px; } .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap { width: 720px; } .content, .site-header .widget-area { width: 600px; } .sidebar-content-sidebar .content, .sidebar-sidebar-content .content, .content-sidebar-sidebar .content { width: 360px; } .sidebar-primary, .title-area { width: 300px; }
}
@media only screen and (max-width: 1020px) { .site-inner, .wrap { max-width: 800px; } .content, .content-sidebar-sidebar .content, .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-primary, .sidebar-secondary, .sidebar-sidebar-content .content, .sidebar-sidebar-content .content-sidebar-wrap, .site-header .widget-area, .title-area { width: 100%; } .site-header .wrap { padding: 20px 5%; } .header-image .site-title > a { background-position: center top; } .genesis-nav-menu li, .site-header ul.genesis-nav-menu, .site-header .search-form { float: none; } .genesis-nav-menu, .site-description, .site-header .title-area, .site-header .search-form, .site-title { text-align: center; } .genesis-nav-menu a, .genesis-nav-menu > .first > a, .genesis-nav-menu > .last > a { padding: 20px 16px; } .site-header .search-form { margin: 16px auto; }
}
@media only screen and (max-width: 880px) { .site-inner, .wrap { padding-left: 5%; padding-right: 5%; }
}
/* # Print Styles
---------------------------------------------------------------------------------------------------- */@media print { *, *::before, *::after { background: transparent !important; box-shadow: none !important; color: #000 !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } abbr[title]::after { content: " (" attr(title) ")"; } a[href^="javascript:"]::after, a[href^="#"]::after, .site-title > a::after { content: ""; } thead { display: table-header-group; } img, tr { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 2cm 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } blockquote, pre { border: 1px solid #999; page-break-inside: avoid; } .content, .content-sidebar { width: 100%; } button, input, select, textarea, .breadcrumb, .comment-edit-link, .comment-form, .comment-list .reply a, .comment-reply-title, .edit-link, .entry-comments-link, .entry-footer, .genesis-box, .header-widget-area, .hidden-print, .home-top, .nav-primary, .nav-secondary, .post-edit-link, .sidebar { display: none !important; } .title-area { text-align: center; width: 100%; } .site-title > a { margin: 0; text-decoration: none; text-indent: 0; } .site-inner { padding-top: 0; position: relative; top: -100px; } .author-box { margin-bottom: 0; } h1, h2, h3, h4, h5, h6 { orphans: 3; page-break-after: avoid; page-break-inside: avoid; widows: 3; } img { page-break-after: avoid; page-break-inside: avoid; } blockquote, pre, table { page-break-inside: avoid; } dl, ol, ul { page-break-before: avoid; }
}Như vậy, bạn có thể tạo Genesis Child từ đầu ở cấp độ cơ bản và có chủ đề Genesis Child tùy chỉnh của mình!
Hẹn gặp các bạn ở phần sau!
