feat: add navigation style selection (#136)

pull/155/head
Seaton Jiang 2020-02-23 22:00:05 +08:00
parent 6c56cf0979
commit 6112d46a41
12 changed files with 90 additions and 21 deletions

View File

@ -3,11 +3,11 @@
* 404 模板 * 404 模板
* @author Seaton Jiang <seaton@vtrois.com> * @author Seaton Jiang <seaton@vtrois.com>
* @license MIT License * @license MIT License
* @version 2020.02.15 * @version 2020.02.23
*/ */
get_header(); ?> get_header(); ?>
<div class="k-main" style="background:#ffffff"> <div class="k-main <?php echo kratos_option('top_select', 'banner'); ?>" style="background:#ffffff">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 page404"> <div class="col-12 page404">

View File

@ -136,6 +136,22 @@ button:focus {
padding: 23px 0; padding: 23px 0;
} }
.k-main.color {
padding-top: 103px;
}
@media only screen and (max-width: 992px) {
.k-main.color {
padding-top: 92px;
}
}
@media only screen and (max-width: 768px) {
.k-main.color {
padding-top: 83px;
}
}
/*-------------------------------------------------------------- /*--------------------------------------------------------------
2. 2.
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@ -1517,12 +1533,12 @@ button:focus {
.k-main .sidebar .w-tags .item a { .k-main .sidebar .w-tags .item a {
display: inline-block; display: inline-block;
list-style: none;
margin: 0 2px 4px 0; margin: 0 2px 4px 0;
padding: 2px 0; padding: 2px 0;
width: 140px; width: 140px;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;
color: #333; color: #333;
list-style: none;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 14px;
@ -1530,18 +1546,18 @@ button:focus {
.k-main .sidebar .widget_links ul li { .k-main .sidebar .widget_links ul li {
display: inline-block; display: inline-block;
list-style: none;
margin: 0 2px 4px 0; margin: 0 2px 4px 0;
padding: 2px 0; padding: 2px 0;
width: 140px; width: 140px;
color: #333; color: #333;
list-style: none;
font-size: 15px; font-size: 15px;
} }
.k-main .sidebar .widget_links ul li img { .k-main .sidebar .widget_links ul li img {
margin-top: -3px;
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-top: -3px;
border-radius: 50%; border-radius: 50%;
} }
@ -1587,9 +1603,9 @@ button:focus {
} }
.k-main .sidebar tbody tr { .k-main .sidebar tbody tr {
font-family: arial;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
font-family: arial;
} }
.k-main .sidebar tbody a { .k-main .sidebar tbody a {

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
/*! /*!
* Kratos v3.0.0 * Kratos v3.0.1
* Seaton Jiang <seaton@vtrois.com> * Seaton Jiang <seaton@vtrois.com>
*/ */
;(function() { ;(function() {

File diff suppressed because one or more lines are too long

View File

@ -3,7 +3,7 @@
* 主题页眉 * 主题页眉
* @author Seaton Jiang <seaton@vtrois.com> * @author Seaton Jiang <seaton@vtrois.com>
* @license MIT License * @license MIT License
* @version 2020.02.15 * @version 2020.02.23
*/ */
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
@ -24,7 +24,7 @@
<?php flush(); ?> <?php flush(); ?>
<body> <body>
<div class="k-header"> <div class="k-header">
<nav class="k-nav navbar navbar-expand-lg navbar-light fixed-top"> <nav class="k-nav navbar navbar-expand-lg navbar-light fixed-top" <?php if(kratos_option('top_select', 'banner') !== 'banner'){ echo 'style="background:' . kratos_option('top_color', '#24292e') .'"';} ?>>
<div class="container"> <div class="container">
<a class="navbar-brand" href="<?php echo get_option('home'); ?>"> <a class="navbar-brand" href="<?php echo get_option('home'); ?>">
<?php <?php
@ -54,6 +54,7 @@
?> ?>
</div> </div>
</nav><!-- .k-nav --> </nav><!-- .k-nav -->
<?php if(kratos_option('top_select', 'banner') == 'banner'){ ?>
<div class="banner"> <div class="banner">
<div class="overlay"></div> <div class="overlay"></div>
<div class="content text-center" style="background-image: url(<?php <div class="content text-center" style="background-image: url(<?php
@ -76,4 +77,5 @@
</div> </div>
</div> </div>
</div><!-- .banner --> </div><!-- .banner -->
<?php } ?>
</div><!-- .k-header --> </div><!-- .k-header -->

View File

@ -44,6 +44,32 @@ jQuery(document).ready(function($) {
jQuery('#section-m_sendmail').show(); jQuery('#section-m_sendmail').show();
} }
jQuery('#top_select').change(function() {
if (jQuery("#top_select").val() == 'color'){
jQuery('#section-top_color').fadeIn(400);
jQuery('#section-top_img').fadeOut(400);
jQuery('#section-top_title').fadeOut(400);
jQuery('#section-top_describe').fadeOut(400);
}else{
jQuery('#section-top_color').fadeOut(400);
jQuery('#section-top_img').fadeIn(400);
jQuery('#section-top_title').fadeIn(400);
jQuery('#section-top_describe').fadeIn(400);
}
});
if (jQuery('#top_select').val() == 'color') {
jQuery('#section-top_color').show();
jQuery('#section-top_img').hide();
jQuery('#section-top_title').hide();
jQuery('#section-top_describe').hide();
}else{
jQuery('#section-top_color').hide();
jQuery('#section-top_img').show();
jQuery('#section-top_title').show();
jQuery('#section-top_describe').show();
}
// Loads the color pickers // Loads the color pickers
$('.of-color').wpColorPicker(); $('.of-color').wpColorPicker();

View File

@ -36,6 +36,11 @@ function kratos_options()
'six' => __('知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议', 'kratos'), 'six' => __('知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议', 'kratos'),
); );
$top_array = array(
'banner' => __( '图片导航', 'kratos' ),
'color' => __( '颜色导航', 'kratos' ),
);
$options = array(); $options = array();
$options[] = array( $options[] = array(
@ -98,7 +103,7 @@ function kratos_options()
); );
$options[] = array( $options[] = array(
'name' => __('导航栏颜色', 'kratos'), 'name' => __('Chrome 导航栏颜色', 'kratos'),
'desc' => __('Chrome 移动端浏览器导航栏的颜色', 'kratos'), 'desc' => __('Chrome 移动端浏览器导航栏的颜色', 'kratos'),
'id' => 'g_chrome', 'id' => 'g_chrome',
'std' => '#282a2c', 'std' => '#282a2c',
@ -345,10 +350,28 @@ function kratos_options()
'type' => 'heading', 'type' => 'heading',
); );
$options[] = array(
'name' => __( '顶部样式', 'kratos' ),
'desc' => __('请选择顶部样式(颜色导航或图片导航)', 'kratos'),
'id' => 'top_select',
'std' => 'banner',
'type' => 'select',
'options' => $top_array
);
$options[] = array( $options[] = array(
'name' => __('顶部图片', 'kratos'), 'name' => __('颜色导航', 'kratos'),
'id' => 'top_color',
'std' => '#24292e',
'class' => 'hidden',
'type' => 'color',
);
$options[] = array(
'name' => __('图片导航', 'kratos'),
'id' => 'top_img', 'id' => 'top_img',
'std' => get_template_directory_uri() . '/assets/img/background.png', 'std' => get_template_directory_uri() . '/assets/img/background.png',
'class' => 'hidden',
'type' => 'upload', 'type' => 'upload',
); );
@ -356,6 +379,7 @@ function kratos_options()
'name' => __('副标题', 'kratos'), 'name' => __('副标题', 'kratos'),
'id' => 'top_title', 'id' => 'top_title',
'std' => 'Kratos', 'std' => 'Kratos',
'class' => 'hidden',
'type' => 'text', 'type' => 'text',
); );
@ -363,6 +387,7 @@ function kratos_options()
'name' => __('标题描述', 'kratos'), 'name' => __('标题描述', 'kratos'),
'std' => __('一款专注于用户阅读体验的响应式博客主题', 'kratos'), 'std' => __('一款专注于用户阅读体验的响应式博客主题', 'kratos'),
'id' => 'top_describe', 'id' => 'top_describe',
'class' => 'hidden',
'type' => 'text', 'type' => 'text',
); );

View File

@ -3,11 +3,11 @@
* 首页模板 * 首页模板
* @author Seaton Jiang <seaton@vtrois.com> * @author Seaton Jiang <seaton@vtrois.com>
* @license MIT License * @license MIT License
* @version 2020.02.15 * @version 2020.02.23
*/ */
get_header(); ?> get_header(); ?>
<div class="k-main" style="background:<?php echo kratos_option('g_background', '#f5f5f5'); ?>"> <div class="k-main <?php echo kratos_option('top_select', 'banner'); ?>" style="background:<?php echo kratos_option('g_background', '#f5f5f5'); ?>">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8 board"> <div class="col-lg-8 board">

View File

@ -3,11 +3,11 @@
* 页面模板 * 页面模板
* @author Seaton Jiang <seaton@vtrois.com> * @author Seaton Jiang <seaton@vtrois.com>
* @license MIT License * @license MIT License
* @version 2020.02.15 * @version 2020.02.23
*/ */
get_header(); ?> get_header(); ?>
<div class="k-main" style="background:<?php echo kratos_option('g_background', '#f5f5f5'); ?>"> <div class="k-main <?php echo kratos_option('top_select', 'banner'); ?>" style="background:<?php echo kratos_option('g_background', '#f5f5f5'); ?>">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8 details"> <div class="col-lg-8 details">

View File

@ -3,11 +3,11 @@
* 文章内容 * 文章内容
* @author Seaton Jiang <seaton@vtrois.com> * @author Seaton Jiang <seaton@vtrois.com>
* @license MIT License * @license MIT License
* @version 2020.02.15 * @version 2020.02.23
*/ */
get_header(); ?> get_header(); ?>
<div class="k-main" style="background:<?php echo kratos_option('g_background', '#f5f5f5'); ?>"> <div class="k-main <?php echo kratos_option('top_select', 'banner'); ?>" style="background:<?php echo kratos_option('g_background', '#f5f5f5'); ?>">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8 details"> <div class="col-lg-8 details">

View File

@ -1,7 +1,7 @@
/* /*
Theme Name: Kratos Theme Name: Kratos
Text Domain: kratos Text Domain: kratos
Version: 3.0.0 Version: 3.0.1
Requires PHP: 7.0 Requires PHP: 7.0
Description: Description:
Tags: , , , , , , , , , , , , , Tags: , , , , , , , , , , , , ,