Docs
Enabling WordPress appearance controls
Should you wish to restore some of the default WordPress appearance controls that ska-theme disables edit the child theme’s theme.json file to include the following: This setup just enables changing text/background color and font size, but you can toggle things on-off and add values as needed. Because the theme disables a lot of the CSS…Read moreChanging default heading sizes
By default the ska-theme h1-h6 headings use Tailwind 4xl to lg sizes and also include some fluidity for h1-h3 as these elements tend to take up quite a lot of space on mobile devices otherwise. To change the default values you can copy the variables from ska-blocks -> Tailwind -> Theme theme to Tailwind ->…Read moreStyle rich text with Tailwind classes
Most WordPress blocks allow to enter rich text, which means you can make selected text bold, italic, add links or even inline images. This functionality can be leveraged to style parts of the text with Tailwind classes. Select some text and make it italic with the rich text formatting controls which appear on the right…Read moreUnder construction mode
ska-theme -> General -> Under construction option allows to enable “coming soon” mode for the website. When enabled, anyone who visits the site while not logged in will see the Under construction template instead of your front page. The mode is very rudimentary, simply designed to let any human visitors know that the website is…Read moreAccordion
ska-theme includes an Alpine.js component for creating an accordion. For creating an accordion, add the x-data=”skaAccordion” attribute to the root element.All direct children of that element should have the attribute x-bind=”item”.The item elements should have 2 child elements, one with x-bind=”toggle” and another with x-bind=”content”. There is 1 argument available for the skaAccordion component: exclusive.…Read moreTabs
ska-theme includes an Alpine.js component for creating tabs. For creating tabs, add the x-data=”skaTabs” attribute to the root element.The element that contains the buttons that change tabs should have the x-bind=”tablist” attribute and individual buttons that allow to select a tab should have the x-bind=”tabItem(‘tabId’)” attribute with a unique ID that matches the content.Content elements…Read moreDropdown
ska-theme includes an Alpine.js component for creating dropdowns. For creating a dropdown, add the x-data=”skaDropdown” attribute to the root element that contains one or many elements that trigger a dropdown as well as the dropdown elements.The button or another element that triggers a dropdown should have a wrapper with the x-bind=”item(‘dropdownId’)” attribute. The element that…Read moreList
Examples of using WordPress core List block or ska-blocks’ Element & Text blocks as <ul>/<ol> and <li> elements to create lists with various appearances. Default list appearance (<ul> -> <li>) Default list appearance (core/list block) Default ordered list appearance (core/list block) Default list appearance in Prose (blog posts) Default ordered list appearance in Prose (blog…Read morePatterns
ska-theme comes with built-in block patterns. The patterns typically include use of theme variations such as Section and Container, theme presets for buttons, image block for placeholder images, your configured primary/secondary colors, selectors for repeating content etc. Patterns can be inserted from the top left corner block inserter -> Patterns. Most patterns are designed to…Read more