Each theme that is released for Publii can potentially have many unique options along with basic settings that should be included with every theme. To reach the theme settings section, click on the Theme option in the left-sidebar.
The first block of options in this section, Basic Settings, covers the general options that apply to all Publii themes.
The basic settings available in Publii's themes are:
- Posts Per Page - Sets the number of posts that should appear on the frontpage and each archive page; if set to 0, no posts are displayed. If set to -1, all posts are displayed.
- Tag Posts Per Page - Like the above option, but sets the number of posts displayed on Tag listing pages.
- Author Posts Per Page - Same as above, but this time for the Author page.
- Excerpt Length - Sets the length in words of the preview snippet of text that is displayed in each post preview on the frontpage/tag pages etc...
- Website Logo - Any image added here will be used as your site's logo; to upload an image, either drag & drop the file into the box, or click on the Choose file button to open the file explorer.
Under the Basic Settings is another block; Custom Settings. This section is reserved for theme-specific settings that can provide a host of theme customization options and quality-of-life improvements. For example, your chosen theme may include color pickers to change theme styles quickly, font and layout settings, or even include a cookie banner that will help you meet European law! Exactly which options are made available in each theme is up to the theme developer, but we'll cover the scope of each tabbed section here, starting with the Layout tab:
This section is pivotal for defining the site's basic visual structure. The range of available settings may vary significantly depending on the theme used. Typically, this section includes:
- Page Width Settings: These settings determine the maximum width of your theme, affecting how content is displayed across different devices.
- Frontpage/Tag Page/Author Page Layout Options: Here, you can configure the number of columns for post previews on specific pages, such as the front page, tag pages, or author pages.
- Theme-Specific Options: Depending on the theme, you may have additional settings related to the front page or post pages, like column width adjustments, slideshow animation speed, and other visual elements.
- Front Page Display: This setting lets you choose how to display content on the front page – displaying the latest posts or a selected post.
If you display a selected post, mark this post as hidden and add a 'noindex' tag to prevent SEO issues related to duplicate content. To avoid generating pagination in the header or sitemap, consider increasing the number of posts per page in the theme settings or deactivating pagination in the site settings.
The "Post list" section provides various options for customizing the appearance and content of the post list on the front page, tag, and author pages. Within this section, you can enable or disable various elements, including avatars, post dates, and other components, allowing you to tailor the look and feel of your post previews to match your site's design and functionality preferences.
The colors section allows users to define the color scheme for their site without diving into the CSS code. The number of possible areas that can be customized will depend on the theme, but generally, you should expect to at least find a Primary Color option, which sets the main color for the key elements in the theme. Beyond this, you are likely to find color options for secondary elements, on-hover text link colors, plus heading text, or link colors.
Selecting a color for each option is easy; each field includes the color hexadecimal code, and a circle with the color displayed, so you don't need to be familiar with hex notation for colors to make a decision! Clicking on any of the color fields will automatically open a color picker. The first slider selects the color, while the larger window sets the intensity of the color; whether it is light, dark, saturated etc...Finally, the second slider controls the transparency of the color; useful for backgrounds or if there are text elements over the colored area.
This section includes options for managing fonts. Since Publii is a content-focused app it pays particular attention to how text content is displayed on your site; theme layouts rely on vertical rhythm to provide an orderly, readable design. Publii themes support Fluid typography, which automatically resizes fonts dynamically to the window or screen size; this feature is combined with a modular scale to perfectly manage the text size to enhance readability across devices and avoids nasty 'jumps' in font size when resizing or adjusting windows on your desktop.
Publii also includes more than 70 locally-loaded variable fonts, allowing you to pick from a huge range of fonts and apply them to your website; the options for doing so will be found in this section. As well as the font selection options, you'll also find settings for defining a minimum and maximum font size to prevent your text from resizing to extreme levels on very small or very large screen sizes!
Here's a detailed overview of the font-related options you can configure in Publii themes:
- Menu Font: Choose the font for the website's menu. Options include the OS default font, the font used for body text, and the font used for headings.
- Logo Font: Select the font for the website's logo, with the same options as the Menu Font.
- Minimum Font Size: Set the minimum font size for the root element in REM units, with a range from 1 to 3, adjustable in 0.05 steps.
- Maximum Font Size: Define the maximum font size for the root element in REM units, also ranging from 1 to 3, with 0.05 step increments.
- Line Height: Configure the default line height for the entire website. This ranges from 1 to 3, adjustable in 0.1 steps.
- Normal Font Weight: Set the weight for normal text, ranging from 100 to 900, adjustable in 1 step increments.
- Bold Font Weight: Choose the weight for bold text with the same range and adjustment options as Normal Font Weight.
- H1-H6 Font Weight: Determine the weight for H1-H6 headings, with options ranging from 100 to 900, adjustable in 1 step increments.
- H1-H6 Text Transform: Select the text transformation for headings (H1-H6), with options including none, capitalize, lowercase, and uppercase.
Each option is designed to give you fine-grained control over how text is presented on your website, ensuring both aesthetic appeal and functional readability.
This section is dedicated to configuring the visual elements of the menu, focusing on aspects beyond the main content. These options may include:
- Navbar Height: Adjusting the height of the navigation bar to suit your site's design and user experience needs.
- Dropdown Menu: Customizing the dropdown menu width, including auto or custom options.
- Mobile Menu Design: Choosing between a sidebar or overlay style for the mobile menu to enhance the user interface on smaller devices.
- Expandable submenus: Deciding whether submenus in the mobile menu should be initially open or closed for better navigation and usability on mobile devices.
These settings provide greater control and customization for your site's navigation, ensuring a seamless and user-friendly menu experience across different devices.
This section focuses on enabling or disabling your site's search feature and managing the "Search" page where search engines like Google display their results. The detailed configuration for search functionality, previously managed through Google Custom Search in this section, has been moved to the plugins. For advanced search settings and integration with search engines, refer to the corresponding plugin documentation.
In this section, you will find controls to configure the display of social media share buttons on your posts. The availability of specific buttons depends on the theme developer, and typically you can expect standard options like Facebook, Twitter, Google+, Pinterest, and others. For a wider range of social media platform icons, explore the Social Sharing plugin, which offers additional options to extend your site's social sharing capabilities.
Follow Buttons refer to buttons a user can click to follow or open links to your social media accounts; if supported by the theme, these may be added in the navbar or on sidebars on post pages. Additionally, for expanded options and customization, consider using the Follow Buttons plugin, which provides enhanced functionality for incorporating follow buttons for various social media platforms on your site.
Here you can set the copyright text that appears in the footer of your theme; depending on the theme there may also be additional controls so as options to enable/disable social media follow buttons.
Most Publii themes support inserting galleries into your content, as the functionality is built into the app. In this section, you'll find controls for gallery behavior, such as item spacing, lightbox styling and animations, zoom, fullscreen and share controls, and preloaders.
This section is purely for elements that do not fit into any of the other categories; in this section you may find controls such as whether Lazy Load is enabled or not, or date formatting options.
The Post Options section allows for management of which elements are enabled in all posts; things such as the social media buttons, author bio, date, and tags can all be enabled and disabled in this section. The settings here will be applied to all posts, however individual posts have their own options accessible via the Edit Post screen, so if you globally enable comments, for example, and you have one new post where you don't want comments, you can control that within the post edit screen.
One particularly-important option in this section is Display Comments; when this option is enabled, a block for comments will be added at the bottom of the post page. This option must be enabled if you are using one of the various commenting plugins available for Publii.
You may also reset the theme settings back to their default values by clicking the Reset Theme Settings button at the bottom of the section; useful if you've made a few mistakes!
So whenever you test-drive a new theme, make sure to check the Custom Settings section and check out what additional options there are to play with!