Video about creating e107 theme

Video about creating e107 theme


 Jimako    26 Sep 2018 : 22:24
 None    Misc

preview_frontend.jpg

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

Related (bug) #3476

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

Related (bug) #3478

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.