• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Create / Modification of templates for Joomla!  �At Joomla! Day Spain 2012
 

Create / Modification of templates for Joomla! At Joomla! Day Spain 2012

on

  • 4,166 views

Presentation/Workshop on Create / Modification of templates for Joomla!

Presentation/Workshop on Create / Modification of templates for Joomla!

Statistics

Views

Total Views
4,166
Views on SlideShare
4,151
Embed Views
15

Actions

Likes
0
Downloads
13
Comments
1

3 Embeds 15

http://www.linkedin.com 13
http://www.docshut.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I want design site,

    how to?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Create / Modification of templates for Joomla!  �At Joomla! Day Spain 2012 Create / Modification of templates for Joomla! At Joomla! Day Spain 2012 Presentation Transcript

    • Saurabh Shah Front-End Developer @ CloudAccess.net Joomla! Events Team Member / Joomla! Social Network Team Member Create / Modification of templates for Joomla!Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • CloudAccess.net Intro - Official host for Joomla! Demo site http://www.demo.joomla.org/ - Launches more than 22,000 Demo sites per month. - Launch as many Demo sites as you want. - Also offers a. Virtual Private Memory Cloud(VPMC) - You needed a secure enterprise cloud platform, and we built one. Weve bolted together the Joomla! VPMC to give you the worlds fastest dedicated Joomla! server. b. Compliant Cloud Backup & Disaster Recovery - We will backup your server, computer, data center, or business to our data centers as a service.Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Useful Tools Browser Specific: Firebug : https://getfirebug.com/ Colorpicker : Firefox : http://www.colorzilla.com/firefox/ Chrome : http://www.colorzilla.com/chrome/ PageSpeed : https://developers.google.com/speed/pagespeed/ YSlow : http://developer.yahoo.com/yslow/Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Useful Tools (Conti…) Photoshop / Design Tool Specific: Color Theory : http://www.smashingmagazine.com/tag/color-theory/ http://kuler.adobe.com/ http://colorschemedesigner.com/ CSS3PS : http://css3ps.com/ CSSHat : http://csshat.com/ (Commercial)Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Useful Tools (Conti…) Image Optimization : http://www.imageoptimizer.net/Pages/Home.aspx http://imageoptim.com/ (Only Mac) Coding Specific : http://code.google.com/p/zen-coding/ http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf Coda2 / SublimeText2 / Notepad++Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Available Frameworks *All framework status and links are added on 15th Sept. 2012 , It may change in the future. Gantry - RocketTheme - http://www.gantry-framework.org/ Warp - YooTheme - http://www.yootheme.com/themes/warp-framework T3 - JoomlArts - http://t3.joomlart.com/ (Coming soon)/ http://www.joomlart.com/forums/downloads.php?do=cat&id=316 Vertex - Shape5 - http://www.shape5.com/joomla/framework/vertex_framework.html Wright - Joomlashack - http://wright.joomlashack.com/ Zen Grid - Joomlabamboo - http://www.joomlabamboo.com/joomla-templates/zen-grid-frameworkJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Available Frameworks *All framework status and links are added on 15th Sept. 2012 , It may change in the future. Morph – JoomlaJunkie - http://getmorph.org/ JV – Joomlavi - http://www.joomlavi.com/joomla-extensions/jv-framework.html Construct - betweenbrain.com - http://joomlaengineering.com/ Halix - JoomShaper - http://helix.joomshaper.com/ YJ Simple Grid - yoojoomla - http://yjsimplegrid.com/ Motif Cory Webb Media - http://themeables.com/motif/ Expose - Themexpert - http://www.themexpert.com/exposeJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Bootstrap Templates http://hwdmediashare.co.uk/joomla-templates/116-strapped http://blank.vc/blog/19-blank-template-and-twitter-bootstrap-tutorial-for-joomla.html http://bootla.org/ https://github.com/ivanramosnet/H5BPTBJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Create Templates There are 3 Ways to create it. 1. By copying an existing template and modify it 2. Install a theme and modify it. 3. Creating a template from scratch.Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Create Template From Scratch 1. Create index.php & templateDetails.xml 2. Add language files - en-GB.tpl_YOURTEMPLATE.ini & en- GB.tpl_YOURTEMPLATE.sys.ini 3. Add directory & files – Css, Javascript , language etc. And create a Zip file.Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Demo Let’s see it in actionJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Adding/Creating Bootstrap Template 1. Current bootstrap version : 2.1.1 Download the zip files : http://twitter.github.com/bootstrap/ and unzip the package 2. Copy the folders /assets into the /template/yourtemplate folder 3. Enabling responsive features (Add meta , css and icon files etc.) Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If youve compiled Bootstrap from the Customize page, you need only include the meta tag. <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 4. Main body section can be copied from fluid.html 5. Add javascript files 6. Add html overrides to take most advantages of bootstrap (strapped/bootla/ H5BPTB) 7. Add suffix for Dropdown. I use the default Joomla example data and put the Main Menu Module to position top-menu. To match the correct CSS class I need to add " nav- dropdown" in the Menu Class Suffix (Extensions -> Module Manager -> Main Menu -> Edit - > Advanced Options)Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Demo Let’s see it in actionJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Demo Modifying the Gantry Based TemplateJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Conclusion I hope, you are now able to decide whether you want to go more into Joomla templating with the Twitter Bootstrap framework or just choose with a ready made template/ template framework.Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
    • Thank you Twitter : @saurabhshah Email : saurabh.ds16@gmail.com Work : saurabh@cloudaccess.netJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah