ska-theme
Changing 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 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. List appearance 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…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 moreSticky
ska-theme includes an Alpine.js component for creating a sticky header. For creating a sticky header, add the x-data=”skaSticky” attribute to the element that should stick. That element will receive the .is-sticky class when it is sticky. Arguments can be specified like this: x-data=”skaSticky({offset: 128})”, x-data=”skaSticky({trigger: ‘.ska-menu’, offset: -10})” When making a sticky header, it’s a…Read more