Themeisle Docs

Appearance

Jaxon - Settings Reference ​

Jaxon is a contemporary, minimalist WordPress Full-Site Editing block theme suitable for blogs, small businesses, startups, agencies, portfolios, and e-commerce shops. All settings are managed through the WordPress Site Editor (Appearance > Editor), where you can customize Global Styles, edit templates and template parts, insert block patterns, and configure navigation.

Site Editor — Global Styles ​

Global Styles controls the overall visual appearance of the site. Open it by clicking the Styles icon (half-filled circle) in the Site Editor sidebar. Changes here apply site-wide unless overridden at the block level.

Colors ​

The theme defines six palette colors that are used throughout all templates, patterns, and style variations. Changing any of these colors updates the entire site consistently.

  • Background: The main site background color. The default style uses a dark background (#161616), while several style variations switch to light backgrounds.
  • Foreground: The primary text and content color. Contrasts with the background — light (#F4F4F4) on dark styles, dark (#202020) on light styles.
  • Background Alt: A subtle alternative background used for cards, post excerpts, comment areas, and highlighted sections. In the default dark style this is a faint white overlay; in light styles it is white or near-white.
  • Background Dark: A very dark background used for the footer area, inverted sections, and the cover blocks in archive and search headers. In dark styles this is near-black; in some light styles it takes on a deep accent tone.
  • Foreground Alt: A secondary text color used on top of dark backgrounds, such as button text, footer text, and hero section headings. Typically near-white across all variations.
  • Accent: The highlight color used for buttons, the comment reply link, and interactive elements. The default is a vivid red (#F94E41). Style variations change this to blue, violet, indigo, teal, or keep it red-orange.

The theme enables link color controls, allowing you to set a custom color for hyperlinks site-wide.

Gradients are disabled by default — the palette is empty, so the gradient picker shows no presets.

Typography ​

The theme provides five font families, all served locally from the theme's own files (no external requests to Google Fonts):

  • Readex Pro (sans-serif) — The default body font. A clean, geometric sans-serif with weights from 160 to 700.
  • Source Serif Pro (serif) — A traditional serif face with regular and italic styles, weights from 200 to 900. Used for headings in the Sapphire style variation.
  • Figtree (sans-serif) — A friendly, rounded sans-serif with regular and italic styles, weights from 300 to 900. Used as the body font in the Electric Violet, Sapphire, and Sunset Orange variations.
  • Outfit (sans-serif) — A versatile geometric sans-serif with weights from 100 to 900. Used as the body font in the Blue Ribbon variation.
  • Lora (serif) — An elegant, slightly calligraphic serif with regular and italic styles, weights from 400 to 700. Used as the body font in the Sherpa Blue variation.

Six font size presets are available:

  • Small: 14px
  • Normal: 18px (the default body text size)
  • Medium: 24px
  • Large: 28px
  • Extra Large: 32px
  • Huge: 56px

Custom font sizes are enabled, so you can enter any value in addition to the presets.

Line height and letter spacing controls are available on all text blocks.

The theme sets default heading styles:

  • H1 uses the Huge size (56px) with 600 weight and 1.25 line height
  • H2 uses Extra Large (32px) with 600 weight and 1.35 line height
  • H3 uses Large (28px) with 600 weight and 1.35 line height
  • H4 uses Medium (24px) with 600 weight and 1.4 line height
  • H5 uses Normal (18px) with 600 weight and 1.55 line height
  • H6 uses Small (14px) with 600 weight and 1.6 line height

Layout ​

  • Content width: 740px — controls the maximum width of content in constrained layouts (paragraphs, headings, etc.).
  • Wide width: 1140px — controls the maximum width of wide-aligned blocks.

Spacing ​

Margin, padding, and block gap controls are enabled for all blocks. Available spacing units are px, em, rem, vh, vw, and %.

Borders ​

Full border controls are enabled: color, radius, style, and width can be customized on supported blocks.

Per-Block Style Overrides ​

The following blocks have theme-level default styles that differ from WordPress core defaults. You can override any of these in Global Styles under the individual block settings:

  • Button: Red accent background (#F94E41), near-white text, 3px border radius, 16px vertical / 32px horizontal padding, Normal (18px) font size with 600 weight.
  • Comment Content: Background Alt background color, 5px border radius, 24px padding on all sides.
  • Comment Author Name: Normal font size, links have no underline.
  • Comment Date: Uppercase, 12px font, links have no underline.
  • Comment Edit Link: Uppercase, 12px font, links have no underline.
  • Comment Reply Link: Uppercase, Small font, accent color, links have no underline.
  • Navigation: Links have no underline.
  • Post Terms: Links have no underline.
  • Post Title: Links have no underline.
  • Post Excerpt: Links have no underline.
  • Search: 5px border radius.
  • Site Title: Links have no underline.
  • Quote: Large font size (28px).

Site Editor — Style Variations ​

Style variations change the color palette and typography in one click. The theme ships with five variations in addition to the default dark style. Each variation is available in the Styles panel under the "Browse styles" option.

  • Blue Ribbon: A dark theme with a pure black background (#000000), light text (#F4F4F4), and a vivid blue accent (#005DFF). Switches the body font to Outfit. Best suited for bold, high-contrast designs.

  • Electric Violet: A warm light theme with a cream background (#FEFAF1), dark text (#202020), and a rich violet accent (#8247FF). Switches the body font to Figtree. Creates a soft, creative feel suited for portfolios and agencies.

  • Sapphire: A cool light theme with a lavender-gray background (#E8E9F3), dark text (#333333), and a deep indigo accent (#303F9F). Uses Figtree for body text and Source Serif Pro for headings. The serif headings paired with sans-serif body text give it a polished editorial look.

  • Sherpa Blue: A light theme with a cool gray background (#F4F4F6), dark text (#202020), and a deep teal accent (#00574E). The Background Dark color is a deep plum (#3E012F), adding contrast in footer areas. Switches the body font to Lora (serif), giving the entire site an elegant, traditional feel.

  • Sunset Orange: A warm light theme with a beige background (#EEEAE2), dark text (#202020), and the same red-orange accent (#F94E41) as the default. Switches the body font to Figtree. Produces a light, approachable look while keeping the default accent color.

Site Editor — Templates ​

Templates control the layout of specific page types. You can edit any template in the Site Editor to rearrange, add, or remove blocks. Changes to templates are saved as user customizations and can be reverted to the theme default at any time.

  • Front Page: The homepage when a static front page is configured. Includes the header, a hero cover pattern with a title and image, a row of client logos, product categories with descriptions and images, a two-column image-and-text section, the front page content area, a three-column testimonials section, a three-column recent posts grid, and the footer.

  • Index: The default blog listing page. Displays a dark cover banner with the heading "Our awesome blog," followed by a two-column grid of posts (each showing a featured image, title, date, and excerpt with a "Read more" link), pagination controls, and a "no posts found" message when the query returns no results.

  • Single Post: The layout for individual blog posts. Shows a full-width cover block that uses the post's featured image as background (with a dark overlay), the post title centered on top, the date and author below, then the post content, followed by a comments section inside a card with rounded corners.

  • Page: The layout for static pages. Displays a dark cover banner with the page title centered, then the page content below in a constrained layout.

  • Archive: Used for category, tag, author, and date archives. Shows a dark cover banner with the archive title, then a list of posts (each showing the title, category terms, and date inside a card), with pagination.

  • Search: The search results page. Displays a dark cover banner with the heading "Search results" and a search input field, then a list of matching posts (each showing title, category, and date inside a rounded card), with pagination.

  • 404: The page shown when a URL is not found. Displays a large "404" number, the heading "Unfortunately we can't find that page," a short message, and a decorative accent-colored shape with asymmetric rounded corners.

  • Blank: A minimal template that outputs only the post content with no header, footer, or wrapper. Use this for landing pages or page-builder layouts where you want full control over every element on the page.

Site Editor — Template Parts ​

Template parts are reusable sections shared across multiple templates. You can edit them in the Site Editor, and changes propagate everywhere the part is used.

  • Header: Displays a full-width bar with the Background Alt color. Contains the site title (uppercase, Large font) on the left and a horizontal navigation menu on the right with placeholder links (Shop, Home, Patterns, Blog). The navigation collapses into a mobile menu on smaller screens.

  • Footer: A full-width section with the Background Dark color. Contains a centered search field at the top, then a five-column layout with navigation links organized under headings (Company, Limited Offers, Collections, Fashion Tips, Support). Below the columns, a separator line divides the links from the bottom bar, which shows the site name on the left and social media icons (Facebook, YouTube, Twitter) on the right.

Site Editor — Patterns ​

Patterns are pre-designed block layouts you can insert into any page or template. All patterns appear under the "Jaxon Patterns" category in the block inserter.

  • Hero cover with title and button: A full-width hero section with a large heading, subheading, and a call-to-action button overlaid on a background image. Use this as the opening section of a landing page or homepage.

  • Row with logos: A horizontal row of client or partner logo images. Use this to display brand partnerships or social proof.

  • Call to action inverted: A full-width banner with a dark background, a centered heading, descriptive text, and a button. Use this to draw attention to a promotion or key action.

  • Categories with description and images: A section showcasing product or content categories, each with an image, heading, and short description. Use this to guide visitors to different areas of the site.

  • Two columns with images and text: A side-by-side layout pairing images with descriptive text. Use this for feature highlights, about sections, or product showcases.

  • Features with icons: A multi-column layout where each column has an icon, heading, and description on a dark background. Use this to present service offerings or product features.

  • Three columns with testimonials: Three testimonial cards on a dark background, each with a quote, client name, and photo. Use this to showcase customer feedback.

  • Posts in a three column grid: A section heading followed by a three-column grid of recent blog posts, each showing a featured image, title, date, and excerpt. Use this on the homepage or landing pages to highlight blog content.

  • Two columns with testimonials: A two-column layout with testimonial quotes, each including a photo, name, and company. Use this for a compact social proof section.

  • Alternating layout with image and description: A series of rows that alternate between image-left/text-right and image-right/text-left. Use this for detailed product or service descriptions.

  • Call to action boxed: A contained card with a dark background, centered heading, text, and a button inside a bordered box. Use this for a focused call to action within a content area.

  • Three columns with products: Three product-style columns, each with an image, product name, and description. Use this to showcase featured products or services.

Site Editor — Navigation ​

Menus in Jaxon are managed as Navigation blocks inside the Site Editor, not through the classic Menus screen. The theme's templates include two navigation areas by default:

  • Header navigation: A horizontal menu in the header template part, aligned to the right of the site title. By default it contains placeholder links (Shop, Home, Patterns, Blog). To edit, open the header template part in the Site Editor and click the Navigation block to add, remove, or reorder menu items. On mobile devices, this menu collapses into a responsive overlay.

  • Footer navigation columns: The footer template part includes five separate vertical Navigation blocks, each under a heading (Company, Limited Offers, Collections, Fashion Tips, Support). Each can be edited independently to point to real pages on the site.

The theme also registers a Primary Menu menu location for backwards compatibility, though in practice the Navigation blocks in the Site Editor are the primary way to manage menus.