Video about creating e107 theme
Video about creating e107 theme
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
All serie:
https://www.youtube.com/playlist?list=PLf9-jv7vMSo7Z9aqt03n8uhlZI1DkI-Ax
Part 1:
https://www.youtube.com/watch?v=ag61-M74pLk
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).
Part 2:
https://www.youtube.com/watch?v=OlRNkdhJy6A
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
Part 3:
https://www.youtube.com/watch?v=VtqdD5hoieE
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
Part 4:
https://www.youtube.com/watch?v=NlNuGQywfyo
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
13:49 Check
Time spent on developing 2-4: one hour (total 1,5 hour).
Part 5:
https://www.youtube.com/watch?v=7ISHtmxxkzQ
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
Related (problem) issue: #3473 [solved in October 2018]
Correct way how to use related paths in menu fields is now:
{e_BASE}/news
Part 6: TagCloud
https://www.youtube.com/watch?v=_g9KQ7ahozY
00:00 Adding new menu area at the footer
00:20 Adding tagcloud menu to new menu area in Menu manager
01:19 Installing tagcloud plugin
01:38 Adding tagcloud menu (after installing needed plugin)
02:28 Styling of tagcloud menu - general footer style with tablerender()
04:45 Styling of tagcloud menu – theme template
06:41 Styling of tagcloud menu – details
Related (enhancement) issue: #3474
Part 7: Homepage News Grid
https://www.youtube.com/watch?v=-8xNXkxpGMw
00:00 Changing header image
01:19 templating news grid menu – preparing homepage template
04:14 Adding news grid menu via Menu Manager
04:41 templating menu item
Part 8: Homepage News Carousel
https://www.youtube.com/watch?v=D6LaZ8pG0RU
00:01 Adding new menu area in homepage (replacing html code) to have place where to put news slider
02:00 adding news carousel menu to that area – not the best idea
03:35 adding news grid menu to that area – new grid template is needed, the same steps as before with homepage grid template
Part 9: Menu button templated
https://www.youtube.com/watch?v=kUALx4Mf46o
00:01 Adding menu template file to theme folder (it was already there)
00:37 Adding new menu template button-text
02:20 Changing template
02:49 Trying to find shortcode for button text and finishing new template
07:20 Moving to correct menu area
Part 10: Subscribe shortcode added
https://www.youtube.com/watch?v=lodMOiiyLEU
00:01 Analyzing
01:18 Adding new menu area to footer and new theme shortcodes THEME_NEWSLETTER, later THEME_SUBSCRIBE (to avoid any name confusing with newsletter plugin)
01:53 Using example from Landing Zero theme
02:23 Removing menu area
02:50 Correct html markup for theme shortcode
03:30 New style for tablerender
07:04 Problem with class in email input field, created enhancement issue for core
Related (enhancement) issue: #3475
Part 11: News list layout
https://www.youtube.com/watch?v=RZnWr6Zp8V8
00:01 Analyzing
00:35 News list template
01:38 Html markup for list template
02:02 Replacing html markup with e107 stuff, problem with news image
05:13 Looking for solution how to fix newsdate markup, it’s hardcoded
Part 12: Sidebar basics and news category menu
https://www.youtube.com/watch?v=w6iDY0eBPTw
Part 13: Latest news menu
https://www.youtube.com/watch?v=CNDgvdxNOJk
Time spent on developing 5-13: 1,5 hours (total 3,5 hour)
Part 14: Pagination
https://www.youtube.com/watch?v=W12StHiTWjk
Part 15: News extended - 1.part
https://www.youtube.com/watch?v=UCm-2O8JoOs
Part 16: News extended - 2.part
https://www.youtube.com/watch?v=LQo4TjN-_WY
Time spent on developing 15-16: 2,5 hours (total 6 hour)
Part 17: Details - sitelogo
https://www.youtube.com/watch?v=LQo4TjN-_WY
Part 18: Details - fixed styling for newsletter and dates on homepage
https://www.youtube.com/watch?v=7joVpMLD1QE
Part 19: News tags and advanced sidebar
https://www.youtube.com/watch?v=Z68q6CpQymk
Part 20 : Related news
https://www.youtube.com/watch?v=3iY45vYXRIs
Time spent on developing 17-20: 0,5 hours (total 6,5 hour)
Part 21: Comments
https://www.youtube.com/watch?v=Kyw8hyy5Mls
00:10 adding theme custom comment template
00:46 comments layout
03:30 css fixes
04:50 comment form
09:18 comment items
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.