Framework 3.0

Posted on June 12, 2018

This has been a major update to the existing Seja WordPress framework with the goal of creating templates that are easier to update to the latest version with any 3.x template now able to be updated without breaking the theme.

There are also a number of backend improvements, including a redesigned options page, and the ability to change font colours within the template rather than editing the stylesheet.

Changelog

Final structural changes - editable files are in the root or the 'custom' directory
	Moved /css/theme-styles.css to /custom/css/theme-styles.css
	Moved the include_html shortcode directory to /custom/html
full css rebuild of all footer widget sizes
added three classes to the smooth scroll. Fixes the unresponsive WooCommerce tabs
added new colour classes for text and links in dynamic stylesheet
improved WooCommerce multi-column layouts + responsive versions
Full rebuild of the framework settings dashboard including larger icons and visually better form elements 
new option 'Text Colour' in framework settings
new option 'Link Colour' in framework settings
new option 'Hover Colour' in framework settings
	Moved the styles using these options to the dynamic styles.php file
    Moved h tag and title styles to dynamic styles file
    Corrected minor error with pagination style in dynamic styles file
Broke the dynamic styles file into two functions and are now called in wp_head() in two locations, by priority.
new 'scroll page' that creates a one-page-layout using the child pages below it (sort by sort-order)
new slideout shop sidebar (ideal for cart)
new 'site-offline' maintenance mode feature
new 'advertising' feature to insert content (such as adwords) into the content
corrected nesting error in title, on left/right sidebar pages
new 'no-image' svg
added default widgets to all content sidebars if none are set
Full rebuild of the seja template dashboard including larger icons and 
full cleanup of CSS, initial template is now production ready by removing only the background. Coding examples that are redundant are now coded out. Full explanations in the theme-styles.css to explain what is what for editing.
Posted in framework | Comments Off on Framework 3.0

Framework 2.15

Posted on March 28, 2018

Error corrections have been the primary focus of this update.

Posted in framework | Comments Off on Framework 2.15

Framework 2.14

Posted on January 2, 2018

This version has many major structural changes in preparation for version 3.

Some minor errors have been corrected

Font-awesome has been updated to version 5

Posted in framework | Comments Off on Framework 2.14

Framework 2.13

Posted on November 1, 2017

Rebuilding of the CSS % blocks and some new MCE elements have been included.

Facebook Pixel support has been added natively.

Posted in framework | Comments Off on Framework 2.13

Framework 2.12

Posted on January 10, 2017

This update includes a major reshuffle of files within the structure as part of our aim to make the framework easier to update without losing customisation.

Some header elements have been removed, including ones that rely on external plugins. Improvements to the parallax feature have been implemented.

Posted in framework | Comments Off on Framework 2.12

Framework 2.11

Posted on October 12, 2016

This version includes extensive rebuilding of the WooCommerce integration.

Posted in framework | Comments Off on Framework 2.11

Framework 2.10

Posted on August 13, 2016

The latest version of our framework includes the Mosaic Image gallery, allowing text content to show on-hover over images. Individual images can be added using the single click button in the WordPress editor.

Some additional minor template adjustment settings have been added to the Seja Template settings section, along with some improvements to the site rendering.

Posted in framework | Comments Off on Framework 2.10

Framework 2.9

Posted on June 3, 2016

This update brings the main navigation menu up to date. While the original menu worked quite well, it was six years old and lacked some of the CSS3 goodness, such as transitions.

We’ve also made some significant changes to the file structure, cleaned up some of the form elements, improved the custom title and added additional content to the Tips and Help pages.

A new sub-page in the Theme Settings has been added. While this is currently just a blank page, it’s purpose is to provide a home for custom template elements. We’re currently working on a couple of interesting client projects that will require some interesting customisations, which of course will be included in future versions.

Posted in framework | Comments Off on Framework 2.9

Framework 2.8

Posted on April 13, 2016

Framework version 2.8 includes some additional SEO options and improved integration with WooCommerce.

The bullet-points are now using Font Awesome to render and can be colour configured in the Theme Settings section. We’ve also converted the WordPress and Seja Design logos in the footer to SVG images, which also allows for better colour control.

Posted in framework | Comments Off on Framework 2.8

Accordion Pages (Archived Version)

Posted on February 28, 2016

The content on this page has been updated and can now be viewed here –
How to create an Accordion Page using the Seja Framework

How-to Tutorial for the Seja WordPress framework

The Seja Framework supports accordion pages. These pages are great for displaying a large amount of content where sections can be hidden.

A great example of where this is useful is a Frequently Asked Questions list, where readers only want to see the content that is relevant to them.

Demonstrating the Accordion

This tutorial also demonstrates the working accordion. It is not complicated to do but it is very important that the shortcodes are implemented correctly or your site structure will break.


Usage - The Wrap-around

The accordion requires the use of wrap-around shortcode tags in a minimum of two blocks. For each additional accordion section, an extra shortcode block is required.

It is important that the first and last blocks are marked as such to allow the correct formatting. We’ll demonstrate using this page’s markup as an example.

What is ‘wrap-around’ shortcode?

Most shortcode included in the framework is basic. You include the shortcode call and perhaps a few variables and it displays in the page as required. Other shortcode is a little more complex, requiring the shortcode to wrap around the content that it is displaying. An example of this is as follows

[some_shortcode] The content is included after the shortcode, which is then wrapped using a closing tag (similar to a html closing tag). ##some_shortcode]

It is the content between the tags that is hidden from view until the top section is clicked.


Usage - The Shortcode

At bare-minimum you will need two accordion sections that will need to be marked as ‘first’ and ‘last’. For space and ease of reading, the wrapped content has been removed in all examples

[accordion title="Demonstrating the Accordion" class="first"]  content ##accordion]

[accordion title="Not Working?" class="last"] content  ##accordion]

title: The text that sits in the top section
class: default is ‘block’ however it’s important to use ‘first’ for the first block and ‘last’ for the final block. The back-end code that powers this feature requires these two classes to correctly render the html.

Each additional accordion section that sits between these two tags do not require any additional code, and you can generate as many accordion blocks as you require. The accordion shortcode on this page looks like this

[accordion title=\"Demonstrating the Accordion\" class=\"first\"]  content ##accordion]

[accordion title="Usage - The Wrap-around"] content ##accordion]

[accordion title="Usage - The Shortcode"] content ##accordion]

[accordion title="Understanding the HTML"] content ##accordion]

[accordion title="Not Working?" class="last"] content  ##accordion]

An optional ‘titleclass‘ exists if you require custom formatting. This is added to the <dt> tag.

[accordion title="Demonstrating the Accordion" class="first"]  content ##accordion]

[accordion title="Usage - The Wrap-around"] content ##accordion]

[accordion title="Usage - The Shortcode"] content ##accordion]

[accordion title="Understanding the HTML"] content ##accordion]

[accordion title="Not Working?" class="last" titleclass="example-class"] content ##accordion]


Understanding the HTML

While it it not necessary for you to understand the HTML, we have included the markup for your reference. Based on the shortcode from the previous section the outputted HTML would appear as follows;

<dl class="accordion" id="accordion">
  <dt><span>Demonstrating the Accordion</span></dt>
  <dd class="first">Content</dd>

  <dt><span>Usage - The Wrap-around</span></dt>
  <dd class="block">Content</dd>

  <dt><span>Usage - The Shortcode</span></dt>
  <dd class="block">Content</dd>

  <dt><span>Understanding the HTML</span></dt>
  <dd class="block">Content</dd>

  <dt class="example-class"><span>Not Working?</span></dt>
  <dd class="last">Content</dd>
</dl>

The accordion feature uses jQuery to change the state of the object on the page.


Not Working?

Make sure you have correctly implemented the shortcode and enabled the accordion in  Seja Template > Theme Settings > Theme Content

Enable Accordion shortcode - screenshot of version 2x settings

Posted in Archive | Comments Off on Accordion Pages (Archived Version)