- Updating and fixing docs

- Adding Zooey theme docs

Author: webmandesign

0app/includes/_vars.pug

@@ -87,7 +87,7 @@ else
 		}
 
 if config.imageNote && 'core' === config.imageNote
-	- config.imageNote = '<svg class="svg-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256"><path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 8 8m-32-92a12 12 0 1 1 12 12a12 12 0 0 1-12-12"/></svg> Illustrative image. May not display this actual theme.';
+	- config.imageNote = '<svg class="svg-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256"><path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 8 8m-32-92a12 12 0 1 1 12 12a12 12 0 0 1-12-12"/></svg> Illustrative image. May not represent this actual theme.';
 
 -
 	var image_notes = {

0app/includes/content/editor/about.pug

@@ -1,10 +1,13 @@
 block editor/about
 	p <strong>#{config.name}</strong> theme is compatible with WordPress block editor and supports wide alignment, color palettes, font sizes, and others. Using block editor allows you to create beautiful and performant websites with intriguing page layouts without a page builder plugin. Have a look at <a href="#{config.url.demo}">theme demo website</a> for inspiration.
 
-	+video( 'https://wordpress.tv/2021/10/12/how-to-create-a-post-or-page-with-the-wordpress-block-editor/' ) How to use block editor
+	+video( 'https://www.youtube.com/watch?v=jA6AbrVwd3o' ) How to use block editor
+
+	+video( 'https://wordpress.tv/2021/10/12/how-to-create-a-post-or-page-with-the-wordpress-block-editor/' ) Alternative, older video about how to use block editor
 
 	+info( 'Available blocks', 'h3' )
 		p Visit <a href="https://wordpress.org/documentation/article/blocks-list/">WordPress blocks list</a> for information on available blocks and how to set them up.
 
-	+warning( 'Incompatibility', 'h3' )
-		p Please note that WordPress editors are not compatible with each other. Editing content built in one editor will not work when using a different editor. <a href="https://support.webmandesign.eu/demo-content-editor/">Read knowledge base article</a> for further information.
+	if true !== config.compatibility.no_demo
+		+warning( 'Incompatibility', 'h3' )
+			p Please note that WordPress editors are not compatible with each other. Editing content built in one editor will not work when using a different editor. <a href="https://support.webmandesign.eu/demo-content-editor/">Read knowledge base article</a> for further information.

0app/includes/content/faq/answer/font.pug

@@ -1,7 +1,8 @@
 block faq/answer/font
 
-	+tip( 'WordPress fonts library', 'h4' )
+	+tip( 'Use WordPress fonts library', 'h4' )
 		p When using a block theme, you can upload your custom fonts using WordPress native <a href="#site-editor-styles-typography">fonts library</a>.
+		p In such case, <strong>steps #1 and #2 in the procedure below are obsolete</strong>.
 
 	p By default, the theme supports any <a href="https://fonts.google.com/">Google Fonts</a> font out of the box. So, if you want to use a font family from Google Fonts, simply set it up in font family option fields in <strong>Appearance → Customize → Theme Options → Typography</strong>.
 

0app/includes/content/plugins/others.pug

@@ -1,5 +1,5 @@
 +sub_section( 'Useful Plugins', 'plugins-others' )
-	p With this theme you can use whatever plugins you like (check out <a href="#plugins">compatibility info</a> above). Here is a selection of additional useful plugins:
+	p With this theme you can use whatever plugins you like (check out <a href="#plugins">compatibility info</a> above). Here is a selection of some useful plugins:
 
 	dl.list-default.has-quoted-terms
 		block plugins/others/list

0app/includes/content/site-editor/styles.pug

@@ -54,6 +54,11 @@ block site-editor/styles
 					p Theme applies a palette of colors throughout the site elements. You can modify each individual color in palette, modify WordPress default color palette, and add your own custom colors.
 					+important( 'Use solid colors', 'h4' )
 						p As the theme automatically calculates additional colors from its palette, it is recommended to use solid colors, not a semi-transparent ones.
+					if true === config.compatibility.fse_colors_elements
+						+info( 'Link & element colors', 'h4' )
+							p Editing global styles Colors section also allows you to set colors for "Text", "Background", "Link", "Captions", "Button" and "Heading" elements.
+							p Please note this is <strong><em>not advisable</em></strong> for this theme. Instead, change the theme color palette accordingly - check the colors information below.
+							p Actually, the only "safe", usable option from elements colors setup group is the "<strong>Link</strong>" color setup. If needed, you can tweak that one to your needs.
 					block site-editor/styles/colors/bottom
 					+image( 'core/fse/styles-colors.png', 'Editing theme colors' )
 					+tip( 'Editing tips', 'h4' )

0app/includes/footer.pug

@@ -6,7 +6,7 @@ p.has-small-font-size.has-small-line-height
 	| Please note that images used in this documentation are illustrative only.
 	| <br>
 	| They might not represent the actual theme or WordPress user interface 100%. They were created to provide help visualizing certain procedures.
-	| Although the interface may look a bit different in your website, the steps shown in the images are the same.
+	| Although the interface may look a bit different in your website, the steps shown in the images should be the same.
 
 p Once again, <strong>thank you for using #{config.name}</strong> WordPress theme!
 

angelica/index.html

@@ -1,12 +1,12 @@
 :root {
   /* Theme color palette: */
-  --color_base: $color_base;
-  --color_contrast: $color_contrast;
-  --color_contrast_alt: $color_contrast_alt;
-  --color_primary: $color_primary;
-  --color_primary_mixed: mix( $color_primary, $color_base, 12.50% );
-  --color_secondary: $color_secondary;
-  --color_secondary_mixed: mix( $color_secondary, $color_base, 38.20% );
+  --color_base: #f7fff7;
+  --color_contrast: #474f47;
+  --color_contrast_alt: #171f17;
+  --color_primary: #5f1a37;
+  --color_primary_mixed: #e4e2df;
+  --color_secondary: #ff6b6b;
+  --color_secondary_mixed: #fac6c2;
   --color_black: #000000;
   --color_white: #ffffff;
   --color_gradient_primary: var(--color_secondary);
@@ -23,11 +23,11 @@
   --color_nav_text: var(--color_black);
   --color_nav_background_active: var(--color_primary);
   --color_nav_text_active: var(--color_white);
-  --color_nav_background_hover: var(--color_primary_mixed);
+  --color_nav_background_hover: var(--color_secondary_mixed);
   --color_nav_text_hover: var(--color_nav_text);
   --color_nav_border: rgba(0, 0, 0, var(--border_opacity));
-  --color_nav_prefix_content: var(--color_primary);
-  --color_nav_prefix_customizing: #0660e5;
+  --color_nav_prefix_content: #1a375f;
+  --color_nav_prefix_customizing: #375f1a;
   --color_intro_background: var(--color_primary);
   --color_intro_text: var(--color_white);
   --color_content_background: var(--color_base);
@@ -47,7 +47,7 @@
   content: "";
   position: absolute;
   inset: 0;
-  background: url("assets/images/pexels-amina-filkins-5410071.webp");
+  background: url("assets/images/intro.webp");
   background-position: 50% 50%;
   background-size: cover;
   opacity: 0.1;

auberge/index.html

@@ -1,20 +1,20 @@
-$color_base         : #fffae6;
-$color_base_alt     : #efead6;
-$color_contrast     : #3f3a36;
-$color_contrast_alt : #0f0a06;
-$color_primary      : #30533f;
-$color_secondary    : #437358;
+$color_base         : #f7fff7;
+$color_base_alt     : #e7efe7;
+$color_contrast     : #474f47;
+$color_contrast_alt : #171f17;
+$color_primary      : #5f1a37;
+$color_secondary    : #ff6b6b;
 
 :root {
 
 	/* Theme color palette: */
-	--color_base:            $color_base;
-	--color_contrast:        $color_contrast;
-	--color_contrast_alt:    $color_contrast_alt;
-	--color_primary:         $color_primary;
-	--color_primary_mixed:   mix( $color_primary, $color_base, 12.50% );
-	--color_secondary:       $color_secondary;
-	--color_secondary_mixed: mix( $color_secondary, $color_base, 38.20% );
+	--color_base:            #{ $color_base };
+	--color_contrast:        #{ $color_contrast };
+	--color_contrast_alt:    #{ $color_contrast_alt };
+	--color_primary:         #{ $color_primary };
+	--color_primary_mixed:   #{ mix( $color_primary, $color_base, 12.50% ) };
+	--color_secondary:       #{ $color_secondary };
+	--color_secondary_mixed: #{ mix( $color_secondary, $color_base, 38.20% ) };
 	--color_black:           #000000;
 	--color_white:           #ffffff;
 
@@ -36,11 +36,12 @@ $color_secondary    : #437358;
 	--color_nav_text: var(--color_black);
 	--color_nav_background_active: var(--color_primary);
 	--color_nav_text_active: var(--color_white);
-	--color_nav_background_hover: var(--color_primary_mixed);
+	--color_nav_background_hover: var(--color_secondary_mixed);
 	--color_nav_text_hover: var(--color_nav_text);
 	--color_nav_border: #{ rgba( #000, var(--border_opacity) ) };
-	--color_nav_prefix_content: var(--color_primary);
-	--color_nav_prefix_customizing: #0660e5; // Split complementary, https://www.colorhexa.com/e51c06
+	// Triadic colors, https://www.colorhexa.com/5f1a37 (from primary color)
+	--color_nav_prefix_content: #1a375f;
+	--color_nav_prefix_customizing: #375f1a;
 
 	--color_intro_background: var(--color_primary);
 	--color_intro_text: var(--color_white);
@@ -64,7 +65,7 @@ $color_secondary    : #437358;
 		content: '';
 		position: absolute;
 		inset: 0;
-		background: url('assets/images/pexels-amina-filkins-5410071.webp');
+		background: url('assets/images/intro.webp');
 		background-position: 50% 50%;
 		background-size: cover;
 		opacity: .1;

bjork/index.html

@@ -14,7 +14,6 @@ block prepend pages/templates/about
 block pages/templates/list
 	include template-content-only.pug
 	include template-no-intro.pug
-	include template-overlaid-header.pug
 	include template-with-sidebar.pug
 
 block append menu/fse
@@ -27,29 +26,18 @@ block prepend customizer/fse/theme-options
 block append site-editor/styles/colors/bottom
 	include colors.pug
 
-block append plugins/recommended/woocommerce
-	include plugin-wc.pug
-
 block faq/answer/page-builder
 	include faq-answer-page-builder.pug
 block append faq/questions/list
 	include faq-question-custom-header.pug
-	include faq-question-mobile-header.pug
 	include faq-question-sticky-header.pug
 	include faq-question-progress-bar.pug
 	include faq-question-space.pug
-	include faq-question-wc-cart-checkout.pug
-	include faq-question-wc-layout-product.pug
-	include faq-question-wc-shop-page.pug
 block append faq/answers/list
 	include faq-answer-custom-header.pug
-	include faq-answer-mobile-header.pug
 	include faq-answer-sticky-header.pug
 	include faq-answer-progress-bar.pug
 	include faq-answer-space.pug
-	include faq-answer-wc-cart-checkout.pug
-	include faq-answer-wc-layout-product.pug
-	include faq-answer-wc-shop-page.pug
 
 block append sidebars/fse/display
 	include sidebar-block.pug

cindy/index.html

@@ -9,11 +9,11 @@ ul
 
 	li "<strong>Contrast alternative</strong>" color is used for <em>headings</em>. Set this for an appropriate contrast against "Base" color.
 
-	li "<strong>Primary</strong>" color is an accent color <em>used on links and buttons</em>. Set this for an appropriate contrast against "Base" color.
+	li "<strong>Primary</strong>" color is an accent color <em>used on links and buttons</em>. Set this for an appropriate contrast against "Base" color. This color is also used in theme's default <a href="#custom-header">decorative images</a>.
 
 	li "<strong>Primary mixed</strong>" color is a subtle or contrasting version of "Primary" color. By default it was set as a blend of "Base" and "Primary" color. It is used by the theme only in predefined patterns. It is helpful as a subtle background for various sections and elements.
 
-	li "<strong>Secondary</strong>" color is another accent color. It is used by the theme in predefined patterns and template parts. Set this according your preference.
+	li "<strong>Secondary</strong>" color is another accent color. It is used by the theme in predefined patterns and template parts. Set this according your preference. This color is also used in theme's default <a href="#custom-header">decorative images</a>.
 
 	li "<strong>Secondary mixed</strong>" color is a subtle or contrasting version of "Secondary" color. By default it was set as a blend of "Base" and "Secondary" color. It is used by the theme predefined patterns and template parts. It is helpful as a subtle background for various sections and elements.
 

deborah/index.html

@@ -3,9 +3,9 @@
 	+mark( 'nav', 'Appearance', 'Customize', 'Header Image' ).is-path-featured
 	+mark( 'nav', 'Appearance', 'Header' ).is-path-featured
 
-	p The theme displays a decorative image in page intro section and in footer. It is also used in <a href="#block-patterns">block patterns</a>. By default this image is set to "Flowers" image. You can change it to custom image or choose from the theme predefined images.
+	p The theme displays a decorative image in site header and footer. It is also used in <a href="#block-patterns">block patterns</a>. By default this image is set to theme's "Fingers" dynamic colors SVG image. You can change it to custom image or choose from other theme predefined images (check out <a href="https://themedemos.webmandesign.eu/zooey/?layout=decoration">theme demo example</a>).
 
-	+image( 'decorative-image.jpg', 'Preview of decorative image - flowers' )
+	+image( 'decorative-image.jpg', 'Preview of decorative image' )
 
 	+tip( 'Remove header images' )
 		p To disable the header image go to #[+mark( 'nav', 'Appearance', 'Customize', 'Header Image', '"Current header"', '"Hide image" button' )].

eimear/index.html

@@ -1,12 +1,12 @@
 li
 	+answer( 'How to set decorative image', 'decorative-image' )
 
-		p The theme displays a decorative image in page intro section and in footer. It is also used in <a href="#block-patterns">block patterns</a>.
+		p The theme displays a decorative image in site header and footer. It is also used in <a href="#block-patterns">block patterns</a>.
 
-		p By default this image is set to "Flowers" image. You can change it to custom image or choose from the theme predefined images.
+		p By default this image is set to theme's "Fingers" dynamic colors SVG image. You can change it to custom image or choose from other theme predefined images (check out <a href="https://themedemos.webmandesign.eu/zooey/?layout=decoration">theme demo example</a>).
 
 		p The image is taken from <a href="#custom-header"><strong>custom header</strong></a> images.
 
-		+image( 'decorative-image.jpg', 'Preview of decorative image - flowers' )
+		+image( 'decorative-image.jpg', 'Preview of decorative image' )
 
 		p Alternatively, you can simply change it in <a href="#site-editor-template-parts">template parts</a> where it is used. (As this would be more tedious work, we recommend setting up <a href="#custom-header">custom header</a> instead.)

forstron/index.html

@@ -5,13 +5,13 @@ li
 
 		h4 Set position option on "Header" template part
 
+		+important( 'Only works in full site editing mode', 'h5' ).has-regular-margin-bottom
+			p This solution only works when <a href="#site-editor">Site Editor</a> is enabled so you can edit <a href="#site-editor-templates">templates</a>.
+
 		p Set "Sticky" position to all "Header" <a href="https://wordpress.org/documentation/article/template-part-block/">Template Part blocks</a> in <a href="#site-editor-templates">templates</a>. This is a tedious task as you need to edit all (most) of the templates.
 
 		+image( 'sticky-header.jpg', 'Setting sticky header position in Site Editor' )
 
-		+important( 'Only works in full site editing mode', 'h5' ).has-regular-margin-bottom
-			p This solution only works when <a href="#site-editor">Site Editor</a> is enabled so you can edit <a href="#site-editor-templates">templates</a>.
-
 
 		h4 Use a plugin