malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add header style text_center

Browse Source
This commit is contained in:
Tetrakern 2024-06-27 13:37:17 +02:00
parent 3d887878c7
commit 995e5f8878
6 changed files with 109 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
config.codekit3
View File

@ -3512,6 +3512,21 @@
"pg" : 0,
"sct" : 0
},
"\/src\/scss\/customize\/header-style-text-center.scss" : {
"aP" : 0,
"bl" : 0,
"co" : 0,
"dP" : 10,
"ec" : 0,
"ft" : 4,
"ma" : 0,
"oA" : 0,
"oAP" : "\/css\/customize\/header-style-text-center.css",
"oF" : 2,
"oS" : 3,
"pg" : 0,
"sct" : 0
},
"\/src\/scss\/customize\/header-style-top-split.scss" : {
"aP" : 0,
"bl" : 0,

1
css/customize/header-style-text-center.css Normal file
View File

@ -0,0 +1 @@
.text-center-header{display:flex;flex-direction:column;align-items:center;justify-content:center;height:var(--header-height)}.text-center-header__content{text-align:center;margin:1rem 0 2rem;max-width:var(--site-width)}.text-center-header__content:not(._no-text-shadow){text-shadow:var(--site-title-text-shadow)}.text-center-header__title{color:var(--site-title-heading-color);font:900 var(--site-title-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.text-center-header__tagline{color:var(--site-title-tagline-color);font:500 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0}

1
includes/functions/_customizer-settings.php
View File

@ -1430,6 +1430,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'overlay' => _x( 'Overlay (Image)', 'Customizer header style option.', 'fictioneer' ),
'top' => _x( 'Top', 'Customizer header style option.', 'fictioneer' ),
'wide' => _x( 'Wide', 'Customizer header style option.', 'fictioneer' ),
'text_center' => _x( 'Text (Center)', 'Customizer header style option.', 'fictioneer' ),
'none' => _x( 'None', 'Customizer header style option.', 'fictioneer' )
);

4
includes/functions/_customizer.php
View File

@ -956,6 +956,10 @@ function fictioneer_build_customize_css( $context = null ) {
$css .= fictioneer_get_customizer_css_snippet( 'header-style-wide' );
}
if ( $header_style === 'text_center' ) {
$css .= fictioneer_get_customizer_css_snippet( 'header-style-text-center' );
}
// --- Page styles -----------------------------------------------------------
if ( $page_style === 'polygon-mask-image-battered-ringbook' || $page_style === 'polygon-battered' ) {

59
includes/functions/hooks/_general_hooks.php
View File

@ -360,6 +360,65 @@ function fictioneer_inner_header( $args ) {
}
add_action( 'fictioneer_site', 'fictioneer_inner_header', 20 );
// =============================================================================
// OUTPUT TEXT CENTER HEADER
// =============================================================================
/**
* Outputs the HTML for the text (center) header
*
* @since 5.21.0
*
* @param int|null $args['post_id'] Optional. Current post ID.
* @param int|null $args['story_id'] Optional. Current story ID (if chapter).
* @param string|boolean $args['header_image_url'] URL of the filtered header image or false.
* @param array $args['header_args'] Arguments passed to the header.php partial.
*/
function fictioneer_text_center_header( $args ) {
// Return early if...
if ( ( $args['header_args']['blank'] ?? 0 ) || ! display_header_text() ) {
return;
}
// Setup
$theme_mod = get_theme_mod( 'header_style', 'default' );
// Abort if...
if ( $theme_mod !== 'text_center' || ( $args['header_args']['no_header'] ?? 0 ) ) {
return;
}
// Render Elementor or theme template
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) {
// Start HTML ---> ?>
<header class="text-center-header hide-on-fullscreen"><?php
// Add header content as action
add_action(
'fictioneer_text_center_header',
function ( $args ) {
$title_tag = is_front_page() ? 'h1' : 'div';
$text_shadow = get_theme_mod( 'title_text_shadow', false ) ? '' : '_no-text-shadow';
printf(
"<div class='text-center-header__content {$text_shadow}'><{$title_tag} class='text-center-header__title'><a href='%s' class='text-center-header__link' rel='home'>%s</a></{$title_tag}>%s</div>",
esc_url( home_url() ),
get_bloginfo( 'name' ),
get_bloginfo( 'description' ) ?
'<div class="text-center-header__tagline">' . get_bloginfo( 'description' ) . '</div>' : ''
);
}
);
// Render everything via action
do_action( 'fictioneer_text_center_header', $args );
?>
</header>
<?php // <--- End HTML
}
}
add_action( 'fictioneer_site', 'fictioneer_text_center_header', 20 );
// =============================================================================
// OUTPUT HEADER BACKGROUND
// =============================================================================

29
src/scss/customize/header-style-text-center.scss Normal file
View File

@ -0,0 +1,29 @@
.text-center-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: var(--header-height);
&__content {
text-align: center;
margin: 1rem 0 2rem; // Put a bit higher so it does not appear to "fall off"
max-width: var(--site-width);
&:not(._no-text-shadow) {
text-shadow: var(--site-title-text-shadow);
}
}
&__title {
color: var(--site-title-heading-color);
font: 900 var(--site-title-font-size)/1.3 var(--ff-site-title);
letter-spacing: 0;
}
&__tagline {
color: var(--site-title-tagline-color);
font: 500 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);
letter-spacing: 0;
}
}