Creating an e107 theme

This web site requires that javascript be enabled. Click here for instructions..

Theme Overview

  • e107 v2.x is designed for Bootstrap styling. It is therefore encouraged for developers to use bootstrap as their guide for their HTML markup.
  • A default Bootstrap 3 is provided with e107. For html markup and examples, please refer to the Bootstrap documentation and for snippets: bootsnipp.com.
  • If you find markup in the core templates of e107 which does not work well with bootstrap, please let us know in the Github issue tracker, so that we may correct it.

Contribute

theme.xml

This file contains information about the subject. It is used during initiation and besides during shape of the composition.
To create a modern theme.xml file or deduce one from an existing v1.x theme.php file use the conversion instrument here : yoursite.com/e107_admin/theme.php?mode=convert
exemplar from the bootstrap composition :

Reading: Theme Basics

		

    @

” url=”http://e107.org” />

Bootstrap e107 admin theme

Bootstrap e107 admin theme
generic

bootstrap
clean


preview.jpg
fullpreview.jpg






FRONTPAGE





Tip: If you are developing a commercial theme, you’ll want to add a few extra attributes so that it displays correctly in the admin area under “Find Themes”. .

price="25.00" currency="EUR" url="http://direct-path-to-my-theme-purchase-page.com" >

Just package your theme’s zip file with only the theme.xml and any images (including screenshots), excluding .php, .css files etc. before
When the user clicks to download the theme, it will display the url you have provided. If you are developing a commercial subject, you ‘ll want to add a few extra attributes so that it displays correctly in the admin area under “ Find Themes ”. .Just package your subject ‘s zip code file with entirely the theme.xml and any images ( including screenshots ), excluding .php, .css files etc. before sharing it When the drug user clicks to download the theme, it will display theyou have provided .Contribute

theme.php

Contains the main HTML template for your theme.

A very basic theme.php file might look like this example below. the {—} is replaced automatically with the main page’s content.

MY HEADER
&lbrace---&rbrace
My Footer
"; function tablestyle($caption, $text, $mode='') &lbrace echo "

".$caption."

"; echo $text; &rbrace ?>

e107 will take this data and render the dynamic content of the page into it. The output of the above might look something like this:



 // Auto generated title, script, meta and link tags are added here. 


    
MY HEADER

Caption of the current page

Text of the current page
My Footer

Including JS, CSS and Meta in the head

See the section on including

Including a language file

You should use core language terms and avoid using a theme language file if possible.
Refer to e107_languages/English/English.php for available terms.

e107::lan('theme'); // loads e107_themes/CURRENT_THEME/languages/English.php (when English is selected)

Contribute Contains the independent HTML template for your root. A identical basic theme.php file might look like this exemplar below. the { — – } is replaced automatically with the independent page ‘s content.e107 will take this datum and render the dynamic contented of the page into it. The output signal of the above might look something like this : See the section on including Javscripts, Stylesheets and Meta information.You should use congress of racial equality terminology terms andif possible. Refer tofor available terms.

Core Shortcodes

normally used core theme shortcodes are listed below.

Name Description
{---} Renders the main content of the current page.
{CMENU=xxxxxx} Renders a specific custom menu item as defined in admin -> Pages/Menus. xxxxxx = menu name.
{LOGO} The site’s logo as defined in the admin preferences.
{MENU=1} Menu Area as allocated using the media-manager in admin. Add multiple areas by incrementing the numeric value.
{MENU: type=xxxxxx} When xxxxxx is NOT a number, it will attempt to render a specific menu with the name xxxxxx. eg. {MENU=contact} will render e107_plugins/contact/contact_menu.php
{NAVIGATION=xxxxx} Bootstrap-style navigation. Where xxxxx is one of: main, side, footer, alt, alt5, alt6 eg. {NAVIGATION=footer}
{SETSTYLE=xxxxxx} A special shortcode which is used to dynamically change the value of $style as used inside tablerender() to the value of xxxxxx.
{SETIMAGE: w=x} A special shortcode which is used to dynamically change the size of avatars and other images. x= numerical value. eg. {SETIMAGE: w=100&h=200&crop=1}
{SITEDESCRIPTION} The description of the website as defined in the admin preferences.
{SITEDISCLAIMER} The site disclaimer as defined in the admin preferences. Typically used in the footer of the site.
{SITENAME} The name of the website as defined in the admin preferences.
{WMESSAGE} Renders the welcome message as defined in admin-> Welcome Message.

Usage case :

		$LAYOUT['default'] = "
    
{SITENAME}
{NAVIGATION=main}
{SETSTYLE=menu}
{MENU=1} {MENU=contact}
{SETSTYLE=default} {---}
{SITEDISCLAIMER}
"; function tablestyle($caption, $text, $mode='') { global $style; // value defined by {SETSTYLE} shortcode. switch($style) { case 'menu': echo "
".$caption."
"; echo $text; break; default: echo "

".$caption."

"; echo $text; break; } }

News

Shortcode Description Optional Parameters
{NEWS_ID} Unique ID for the current news item (news_id)
{NEWS_TITLE} News Title
{NEWS_SUMMARY} News item summary
{NEWS_DATE} News Date
{NEWS_BODY} News Body (main content)
{NEWS_TAGS} New Keywords/Meta-Keywords
{NEWS_URL} News URL (current URL)
{NEWS_AUTHOR} Name of the Author of the news item
{NEWS_AUTHOR_AVATAR} Avatar of the Author of the news item
{NEWS_AUTHOR_SIGNATURE} Signature text of the Author of the news item. eg. a short bio about the user.
{NEWS_AUTHOR_ITEMS_URL} Link to a News page listing all items by the same author.
{NEWS_CATEGORY_NAME} News Category Name
{NEWS_CATEGORY_DESCRIPTION} News Category Description
{NEWS_CATEGORY_ICON} News Category Icon
{NEWS_RELATED} Related news items based on keyword matches types: news | page
limit: (integer) (default is 5)

Page/Menu

Shortcode Description Optional Parameters
{CPAGEANCHOR}
{CPAGETITLE} Title of the page
{CPAGEBODY} Main text body of the page
{CPAGEAUTHOR} Author of the page
{CPAGEDATE} Creation date of the page {CPAGEDATE=x} default: long. ‘short’ and ‘relative’
{CPAGEMETADIZ} Meta description of the page.
{CPAGEBUTTON}
{BOOK_ANCHOR}
{BOOK_DESCRIPTION}
{BOOK_ICON}
{BOOK_ID}
{BOOK_NAME}
{BOOK_URL}
{CHAPTER_ANCHOR}
{CHAPTER_BREADCRUMB}
{CHAPTER_BUTTON}
{CHAPTER_DESCRIPTION}
{CHAPTER_ICON}
{CHAPTER_ID}
{CHAPTER_NAME}
{CHAPTER_URL}

Contribute

style.css

This file should contain the primary css for your theme.
Keep in mind that e107 v2.x uses

Contribute This file should contain the primary cesium for your theme.Keep in thinker that e107 v2.x uses bootstrap naming conventions

theme_shortcodes.php

OPTIONAL e107 v2.x removes the need for separate xxxxxx.sc files inside your theme ‘s booklet. You can now include all your theme-specific shortcodes in a single file. These shortcodes may be used in the $LAYOUT of your theme.php file. eg. Using the exemplar below : {MY_SHORTCODE} and {MY_OTHER_SHORTCODE}

		class theme_shortcodes extends e_shortcode
{
	
    function sc_my_shortcode()
    {
        return "Something";
    }

    function sc_my_other_shortcode()
    {
        return "Something else";
    }

}

Contribute

theme_config.php

OPTIONAL Adds data and user-selectable options to the root ‘s shape page .

		class theme_mytheme implements e_theme_config
{
    function process() // Save posted values from config() fields. 
    {
        $pref = e107::getConfig();
		
        $theme_pref 					= array();
        $theme_pref['example']			= $_POST['_blank_example'];
        $theme_pref['example2'] 	= intval($_POST['_blank_example2']);

        $pref->set('sitetheme_pref', $theme_pref);
        return $pref->dataHasChanged();
    }

    function config()
    {
        $tp = e107::getParser();
		
        $var[0]['caption'] = "Sample configuration field";
        $var[0]['html'] = $tp->text('_blank_example', e107::getThemePref('example', 'default'));

        $var[1]['caption'] = "Sample configuration field";
        $var[1]['html'] = $tp->text('_blank_example2', e107::getThemePref('example2', 'default'));
		
        return $var;
    }

    function help()
    {
        return "
                
Some information about my theme.
"; } }

Contribute

Overriding Core Templates

  • All templates that are used in e107 can be overridden by copying them into specific folders within your current theme folder. 
  • Core themes (located in e107_core/templates/ ) should be copied into e107_themes/YOURTHEME/templates/ 
  • Plugin templates should be copied into e107_themes/YOURTHEME/templates/PLUGIN-FOLDER
    Note: Older plugins may look for templates in the root folder of your theme. ie. e107_theme/YOURTHEME/  

Some examples to illustrate this :
1 ) The gloss template is a core template, as it is located in e107_core/templates/. To override this template, copy the file to e107_themes/your_theme_folder/templates/.

2 ) The newsworthiness template is located in e107_plugins/news/. To override this template, copy the file over to e107_themes/your_theme_folder/templates/news/.

3 ) The lapp for, for exercise, the chatbox menu template. The chatbox_menu template is located in e107_plugins/chatbox_menu. Copy the template over to e107_themes/your_theme_folder/templates/chatbox_menu/

Important:  For overriding plugin templates, the folder name within your_theme_folder/templates/ directory must match the exact plugin booklet name .
Contribute

Upgrading v1.x Themes

Themes developed for v1.x of e107 will continue to work using v2.x. However, to get the most out of v2.x, we suggest the following changes be made to bring your theme up to the new v2.x standards.

Replace $HEADER and $FOOTER with $LAYOUT['default'] combining both of them into a single template. Place a &lbrace---&rbrace between them so e107 knows where to split it into HEADER and FOOTER.

Replace any occurrences of $CUSTOMHEADER and $CUSTOMFOOTER with $LAYOUT['custom'] (see above)

If you have recurring code in your $LAYOUT. eg. Navigation html which should be included as the header and footer of every layout, then use the special layouts: $LAYOUT['_header_'] and $LAYOUT['__footer_'].

If your theme contains links to external social pages such as facebook, twitter, youtube or google+, use the core definitions for them. ie. XURL_FACEBOOK, XURL_TWITTER, XURL_YOUTUBE, XURL_GOOGLE.

Remove any reference to $CUSTOMPAGES and place them inside theme.xml in the layouts section.


    FRONTPAGE
    /forum/

If you have used index.php in your $CUSTOMPAGES list, use FRONTPAGE instead (see above)

The function theme_head() has been deprecated. Instead, use either e107::css() or e107::js() to include what you require in the header. (see bootstrap or other new core theme for examples)

Shortcodes need to be set to UPPERCASE in all occurrences in your theme.php file.

Remove all references to $register_sc['xxxxx'] from theme.php for shortcodes used in the $LAYOUT. Place the contents of all xxxxxx.sc files used by $LAYOUT ($HEADER and $FOOTER) inside theme_shortcodes.php and then remove these xxxxxx.sc files from your theme’s folder.
Contribute Themes developed for v1.x of e107 will continue to work using v2.x. however, to get the most out of v2.x, we suggest the follow changes be made to bring your theme improving to the new v2.x standards. Replaceandwithcombining both of them into a single template. target abetween them indeed e107 knows where to split it into HEADER and FOOTER. Replace any occurrences ofandwith ( see above ) If you have recurring code in your. eg. Navigation html which should be included as the header and pedestrian of every layout, then use the special layouts : and. If your theme contains links to external social pages such as facebook, chirrup, youtube or google+, use the effect definitions for them. ie.. Remove any reference book toand place them inside theme.xml in the layouts section.If you have usedin yourlist, useinstead ( see above ) The functionhas been deprecated. alternatively, use eitherorto include what you require in the header. ( see bootstrap or other new effect theme for examples ) Shortcodes need to be set to UPPERCASE in all occurrences in your theme.php file. Remove all references tofromfor shortcodes used in the. Place the contents of allfiles used byand ) insideand then remove thesefiles from your subject ‘s folder .

Leave a Reply

Your email address will not be published.