Theme Font Settings

Add the following code in theme settings extra css.

Global Font Size

/*banner title font size*/
 .banner-title {
     font-size: 2.5em;
 }
 .banner-subtitle {
     font-size: 27px;
 }
 /*post title font size*/
 .post-title {
     font-size: 25px
 }
 /*post content font size*/
 .post-content p {
     font-size: 1.25rem;
 }
 li {
     font-size: 1.2rem;
 }
 /*shuoshuo page title*/
 .shuoshuo-title {
     font-size: 25px;
     /* color: rgba(var(--themecolor-rgbstr)); */
 }
 /*endnote content*/
 .additional-content-after-post {
     font-size: 1.2rem
 }
 /* announcement title */
 .leftbar-announcement-title {
     font-size: 20px;
     text-align: center;
 }
 .leftbar-announcement-content {
     font-size: 15px;
     line-height: 1.8;
     padding-top: 8px;
     opacity: 0.9;
     text-align: center;
 }
 /* hitokoto title */
 .leftbar-banner-title {
     font-size: 20px;
     display: block;
     text-align: center;
 }
 /* personalized signature position */
 .leftbar-banner-subtitle {
     margin-top: 15px;
     margin-bottom: 8px;
     font-size: 13px;
     opacity: 0.8;
     display: block;
     text-align: center;
 }

Comment Section Fonts

/*comment section font size*/
 p {
     font-size: 1.2rem
 }
 /*comment section "send" font size*/
 .form-control {
     font-size: 1.2rem
 }
 /*comment checkbox font size*/
 .custom-checkbox .custom-control-input~.custom-control-label {
     font-size: 1.2rem
 }
 /*comment code color*/
 code {
     color: rgba(var(--themecolor-rgbstr));
 }

Theme Transparent Style

Global theme color

/*home article tag background and border color*/
.tag.badge {
  background:rgba(255, 255, 255, 0)!important;
  border: none;
}

Light Mode Transparent effect.

.card {
     background-color: rgba(255, 255, 255, 0.8) !important;
     backdrop-filter:blur(6px);
     -webkit-backdrop-filter: blur(6px);
 }
/* settings panel transparent */
#fabtn_blog_settings_popup {
     background: rgba(255, 255, 255, 0.5) !important;
 /*settings widget background to transparent*/
 /*The small toolbar is a child element of card, if you use the same transparency it will be superimposed on the color change, so it is completely transparent.*/
 .card .widget,
 .darkmode .card .widget,
 #post_content>div>div>div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title {
     background-color: #ffffff00 !important;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
 }
 .emotion-keyboard,
 #fabtn_blog_settings_popup {
     background-color: rgba(255, 255, 255, 0.95) !important;
 }
 /*catagorise background*/
 .bg-gradient-secondary {
     background: rgba(255, 255, 255, 0.1) !important;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }
/* categoies panel transparent  */
.modal.show .modal-dialog .modal-content{
  background-color: rgba(255, 255, 255, 0.9)!important;
}

Dark mode transparent effect.

 html.darkmode.bg-white,
 html.darkmode .card,
 html.darkmode #footer {
     background: rgba(66, 66, 66, 0.5)!important;
 }
/* control panel background transparent */
 html.darkmode #fabtn_blog_settings_popup {
     background: rgba(66, 66, 66, 0.5)!important;
 }
/* categoies panel transparent  */
html.darkmode .modal.show .modal-dialog .modal-content {
  background-color: rgba(66, 66, 66, 0.9)!important;
}

Theme Color Settings

Main Color in Light Mode

/* Main content color in pages or article*/
 body {
     color: #364863!important;
 }
/* navbar website name color */
 .navbar-transparent .navbar-brand {
    color: #000!important;
  }
/* leftbar font color */
.text-white {
  color: var(--themecolor) !important;
}
/* leftbar background */
.leftbar-banner {
  background: none!important;
}
/* banner title color */
.banner-title {
  font-size: 1.8em;
  color: #000!important;
}
/* header menu fonts color */
.nav-link-inner--text {
  color: #000;
}
/* post title */
.post-title {
  color: #475068 !important;
}
/* header search icon */
.fa.fa-search{
    color: var(--themecolor)!important;
}
 /*quote block color*/
 blockquote {
     /*add weak theme color as background color*/
     background: rgba(var(--themecolor-rgbstr), 0.1) !important;
     width: 100%
 }
 /*quote content font color,advice use theme color*/
 :root {
     /*or use:--color-border-on-foreground-deeper: #009688;*/
     --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
 }
 /*leftbar menu item color*/
 .leftbar-menu-item>a:hover,
 .leftbar-menu-item.current>a {
     background-color: #f9f9f980;
 }
 /*modify separator color*/
 .site-state-item {
     border-left: 1px solid #aaa;
 }
 .site-friend-links-title {
     border-top: 1px dotted #aaa;
 }
 /*leftbar search background*/
 button#leftbar_search_container {
     background-color: transparent;
 }

Dark Mode Color

/* banner title */
html.darkmode .banner-title {
     color: white!important;
 }
/* header website name */
html.darkmode .navbar-transparent .navbar-brand {
     color: white!important;
 }
/* header menu color */
html.darkmode .nav-link-inner--text {
     color: white!important;
 }
/* post title color */
html.darkmode .post-title {
     color: white!important;
 }
/* header search icon color */
html.darkmode .fa.fa-search {
     color: white!important;
 }

Layout Settings

/*Left sidebar hierarchy placed on top*/
 #leftbar_part1 {
     z-index: 1;
 }
 /*set categories position center */
 #content>div.page-information-card-container>div>div {
     text-align: center;
 }
 /*Submenu Alignment and Styling*/
 .dropdown-menu .dropdown-item>i {
     width: 10px;
 }
 .dropdown-menu>a {
     color: var(--themecolor);
 }
 .dropdown-menu {
     min-width: max-content;
 }
 .dropdown-menu .dropdown-item {
     padding: .5rem 1.5rem 0.5rem 1rem;
 }
 .leftbar-menu-subitem {
     min-width: max-content;
 }
 .leftbar-menu-subitem .leftbar-menu-item>a {
     padding: 0rem 1.5rem 0rem 1rem;
 }
 /*Left column margin */
 .tab-content {
     padding: 10px 0px 0px 0px !important;
 }
 .site-author-links {
     padding: 0px 0px 0px 10px;
 }
 /*Catalog location offset modification*/
 #leftbar_catalog {
     margin-left: 0px;
 }
 /*Catalog entry margin modification*/
 #leftbar_catalog .index-link {
     padding: 4px 4px 4px 4px;
 }
 /*Reduced font size in left sidebar widget*/
 #leftbar_tab_tools {
     font-size: 14px;
 }
 /*Body image margin modification*/
 article figure {
     margin: 0;
 }
 /*Body image centered*/
 .fancybox-wrapper {
     margin: auto;
 }
 /*Styling Changes to Body Tables*/
 article table>tbody>tr>td,
 article table>tbody>tr>th,
 article table>tfoot>tr>td,
 article table>tfoot>tr>th,
 article table>thead>tr>td,
 article table>thead>tr>th {
     padding: 8px 10px;
     border: 1px solid;
 }
 /*table style center */
 .wp-block-table.aligncenter {
     margin: 10px auto;
 }
 /*zoom in setting icon*/
 button#fabtn_back_to_top,
 button#fabtn_go_to_comment,
 button#fabtn_toggle_blog_settings_popup,
 button#fabtn_toggle_sides,
 button#fabtn_open_sidebar {
     font-size: 1.2rem;
 }
 /*zoom in navbar icon*/
 .navbar-nav .nav-link {
     font-size: 1rem;
 }
 .navbar-brand {
     font-size: 1.4rem;
     margin-right: 1rem;
     padding-bottom: .2rem;
 }
 /* header menu size */
 .nav-link-inner--text {
     font-size: 1.2em;
 }
/* menu position */
 .navbar-nav .nav-item {
     margin-right: 0;
 }
 .mr-lg-5,
 .mx-lg-5 {
     margin-right: 1rem !important;
 }
 .navbar-toggler-icon {
     width: 1.8rem;
     height: 1.8rem;
 }
 /*menu spacing*/
 .navbar-expand-lg .navbar-nav .nav-link {
     padding-right: 2.1em;
     padding-left: 1.em;
 }

Content Preview Trim Function

The default content preview function does not work in English because the division of each word/phrase into Chinese and English is not strict enough.

Modify template-parts/content-preview.php, replace original code to the following code.

    <?php $trim_words_count = get_option('argon_trim_words_count', 175); ?>
    <?php if ($trim_words_count > 0) { ?>
        <div class="post-content">
            <?php
            if (get_option("argon_hide_shortcode_in_preview") == 'true') {
                $content = strip_shortcodes(get_the_content('...'));
            } else {
                $content = get_the_content('...');
            }
            // remove all html tags
            $content = wp_strip_all_tags($content, true);
            // remove links in articles
            $content = preg_replace('/https?:\/\/[^\s]+/', '', $content);
            if (!empty($post->post_excerpt)) {
                $preview = mb_strimwidth($post->post_excerpt, 0, $trim_words_count, '...');
            } else {
                $preview = mb_strimwidth($content, 0, $trim_words_count, '...');
            }
            if (post_password_required()) {
                $preview = __("这篇文章受密码保护，输入密码才能阅读", 'argon');
            }
            if (empty($preview)) {
                $preview = __("这篇文章没有摘要", 'argon');
            }
            echo $preview;
            ?>
        </div>
    <?php } ?>

Github Card Style

.github-info-card-header a {
     /*Github card header style*/
     color: black !important;
     font-size: 1.5rem;
 }
 .github-info-card {
     /*Github card font color*/
     font-size: 1rem;
     color: black !important;
 }
 .github-info-card.github-info-card-full.card.shadow-sm {
     /*Github card background color*/
     background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;
 }

Author Avatar Animation

Auto zoom, highlight/darken when mouse passes over the avatar.

#leftbar_overview_author_image {
width: 100px;
height: 100px;
margin: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(127, 127, 127, 0.1);
overflow: hidden;
box-shadow: 0 0 5px rgba(116, 8, 204, 0.3);
transition: transform 0.3s ease; /*conversion speed*/
}
#leftbar_overview_author_image:hover {
transform: scale(1.2); /*zoom size */
filter: brightness(150%); /*Adjust Brightness*/
}

Annual Countdown Widget

Add the following code in theme widget shortcode.

<div class="progress-wrapper" style="padding: 0">
    <div class="progress-info">
        <div class="progress-label">
            <span id="yearprogress_yearname" style="color: orange;"></span>
        </div>
        <div id="yearprogress_text_container" class="progress-percentage">
            <span id="yearprogress_progresstext" style="color: orange;"></span>
            <span id="yearprogress_progresstext_full" style="color: orange;"></span>
        </div>
    </div>
    <div class="progress">
        <div id="yearprogress_progressbar" class="progress-bar" style="background-color: orange;"></div>
    </div>
</div>
<script no-pjax="">
    function yearprogress_refresh() {
        let year = new Date().getFullYear();
        $("#yearprogress_yearname").text(year);
        let from = new Date(year, 0, 1, 0, 0, 0);
        let to = new Date(year, 11, 31, 23, 59, 59);
        let now = new Date();
        let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
        let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
        $("#yearprogress_progresstext").text(progressshort + "%");
        $("#yearprogress_progresstext_full").text(progress + "%");
        $("#yearprogress_progressbar").css("width", progress + "%");
    }
    yearprogress_refresh();
    if (typeof yearProgressIntervalHasSet == "undefined") {
        var yearProgressIntervalHasSet = true;
        setInterval(function() {
            yearprogress_refresh();
        }, 500);
    }
</script>
<style>
    #yearprogress_text_container {
        width: 100%;
        height: 22px;
        overflow: hidden;
        user-select: none;
    }
 
    #yearprogress_text_container>span {
        transition: all 0.3s ease;
        display: block;
    }
 
    #yearprogress_text_container:hover>span {
        transform: translateY(-20px);
    }
</style>
© 允许规范转载