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

Part 6: TagCloud

https://www.youtube.com/watch?v=_g9KQ7ahozY

Related (not critical) issue: #3474

Part 7: Homepage News Grid

https://www.youtube.com/watch?v=-8xNXkxpGMw

Part 8: Homepage News Carousel

https://www.youtube.com/watch?v=D6LaZ8pG0RU

Part 9: Menu button templated

https://www.youtube.com/watch?v=kUALx4Mf46o

Part 10: Subscribe shortcode added

https://www.youtube.com/watch?v=lodMOiiyLEU

Related (problem) issue: #3475

Part 11: News list layout

https://www.youtube.com/watch?v=RZnWr6Zp8V8

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

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.