How I do e107 theme
I wanted to create video tutorial how to make e107 theme from good HTML theme long time ago. Problem was that I always spent more time on editing video (adding titles and description) than on theme itself. This way I lost the interest very soon and many of my themes left unfinished.
While cleaning my repositories I found theme Relive (HTML version) to what I have developer licence so I can give it for free download. It is good opportunity to show power of e107. Or its limits. I don't know yet.
So now I decided for different approach.
I record my work, but I don't do explanation. If you have ask why I did something, just ask on forum. Don't ask me on gitter, it's for urgent questions, not for discussion.
See WP version
00:00 Introduction of Relive theme (both, WP and HTML version)
01:17 Using Starter theme as base theme for new e107 theme and customizing theme.xml (basic)
02:40 Applied HTML code to headers anc footer - temporary solution
05:56 css and js assets with e107
09:00 main navigation template
13:01 custom theme shortcode - search in header
Time spent on developing itself for now: 30 minutes (with installation).
00.00 - fix missing assets
00:16 - fix missing js file
00:45 - footer navigation template
02:52 - adding data for sitelinks
04:15 - adding footer navigation to theme
04:52 - changing order of links
00:00 Copyright in footer - shortcode
00:33 Adding in preferences
01:42 Footer social links - adding template
02:25 Footer social links - adding shortcode
03:08 you can skip - my own mistake
04:28 Footer social links - templating shortcode
05:57 Testing social pages in core
00.00 Analyzing html files, shortened
00:40 Taking notes, shortened
01:33 Changing header solution
04:32 Back to layouts - theme.xml
06:01 Switch to Voux and back
06:32 Fixing missing key error
07:18 Contact layout
08:58 Cingle page layout
10:15 Full layout
11:30 Sidebar layout
12:42 Homepage layout
Time spent on developing 2-4: one hour (total 1,5 hour).
00:00 Setting correct Frontpage
00:37 Adddig news grid to layout
01:58 Just playing with homepage layout
02:55 Different solution for welcome message
03:39 Just playing with homepage layout, shortened
04:10 Adding more demo news
04:40 Limit for news grid
05:16 Creating custom menu button to replace Load more
06:08 Adding custom menu to menuarea
07:50 Checking if shortcode can handle e107 constants
08:19 Checking what constants can be used
09:00 Using browser debugger to check values
Part 6: TagCloud
Part 7: Homepage News Grid
Part 8: Homepage News Carousel
Part 9: Menu button templated
Part 10: Subscribe shortcode added
Part 11: News list layout
Part 12: Sidebar basics and news category menu
Part 13: Latest news menu
Time spent on developing 5-13: 1,5 hours (total 3,5 hour)
Part 14: Pagination
Part 15: News extended - 1.part
Part 16: News extended - 2.part
Time spent on developing 15-16: 2,5 hours (total 6 hour)
Part 17: Details - sitelogo
Part 18: Details - fixed styling for newsletter and dates on homepage
Part 19: News tags and advanced sidebar
Part 20 : Related news
Time spent on developing 17-20: 0,5 hours (total 6,5 hour)
Part 21: Comments
Time spent on developing 21: 3 hours (total 9,5 hour)
- this is for now end. I fixed all details maybe in next 2-3 hours, added demo import and theme is prepared.
There are 2 ways how to create e107 theme.
You are excellent designer, you know e107 very well, so you are able to create unique themes.
This type of theme developer is Fizi. Check his unique themes for e107. They are really the best. I use his theme too.
Or you are like me. You know a bit from each area, but you are not perfect in them. So you take good html theme (it needs the practice to know what is the good theme) and you use e107 features to make a new theme. But those themes never be fully e107 themes, because they are focused on one purpose - with blog theme you can't wait to have forum styled out of box.
If html theme is really boostrap based (it used bootstrap classes) then it is done by e107 templates. But I haven't find so theme yet, they always use their own classes, so change html markup is needed.