SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
How to Create a Basic Template 
 
You've installed Joomla!, installed all of the components, modules, and mambots you need, and you've 
created your content and menus. Now you want to create a custom look for your Joomla! site, but you 
don't know how to create a template. This article will step through the creation of a very basic template 
in Joomla! Hopefully, by the end of this article, you will have a basic understanding of what goes into a 
Joomla!  template.  (Note:  This  information  only  applies  to  Joomla!  1.0.X.  It  does  not  apply  to  version 
1.5.) 
 
Template File Structure 
A basic Joomla! template will have the following file structure: 
 
/templatename  
         /css  
                 /template_css.css 
                 /index.html (blank file) 
          
         /images  
                 /index.html (blank file) 
                 /... (all of your template images) 
          
         /index.php 
         /templateDetails.xml 
         /template_thumbnail.png 
          
  1. /templatename 
      Your template will reside in a folder with the same name as your template. 
  2. /css 
      The CSS folder contains your template CSS file, "template_css.css", and any other CSS file you feel is 
      necessary for your template. 
  3. /images 
      The images folder should contain all (if any) of your template images. The images could be stored 
      anywhere, but storing them in the images folder keeps a consistent structure for your template. 
     • /index.php 
         The index is the file that Joomla! looks for when rendering your template. I will discuss this in 
         more detail later. 
  4. /templateDetails.xml 
      The  templateDetails  xml  file  contains  details  about  your  template,  which  Joomla!  uses  to  install 
      your template from your installation ZIP file. I will discuss this in more detail later. 
 
5. /inde
           ex.html ‐ blan
                        nk files 
       The b
           blank "index.html" files are
                                      e there to pre
                                                   event direct a
                                                                access to the default Apac
                                                                                         che index pag
                                                                                                     ge. 
 
 
Step 1
     1: Design 
 
The  first  thing  you  should  do  when  creating a  template is  to  desig the  layou grid,  graphics, 
                        s             w           g           e            gn          ut, 
typograph hy, etc. for yo
                        our site. I like
                                       e to use Mac
                                                  cromedia Fire
                                                              eworks to design my site  before I writ
                                                                                                    te any 
code. Her re is what my design looks like: 




                                                                                                    
 
 
Step 2
     2: HTML M
             Markup 
 
Now that  you have de  esigned the lo  ook of your te emplate, it is  time to write some XHTM ML markup in n your 
         p' file. Becaus
'index.php              se this is a sim
                                       mple 2‐column design with    h no headers and no foote ers, I am only using 
2 DIV elem
         menets for my site's layout. Here is the XHTML mark        kup: 
 
                
               <?xml  version="1.0"  encoding="i
                       v                              iso‐8859‐1"?> ><!DOCTYPE  html  PUBLIC  "‐
               //W3C// /DTD                 XHTML                1.0
                                                                   0              T
                                                                                  Transitional//
                                                                                               /EN" 
               "http://w
                       www.w3.org/     /TR/xhtml1/D DTD/xhtml1‐t ransitional.dt   td"> 
               <html xmmlns="http://   /www.w3.org   g/1999/xhtml "> 
               <head> 
                 
               <title>Re
                       edSpheresRul     le.com</title>> 
                 
               <link hre
                       ef="css/templ    late_css.css" rel="stylesheeet" type="tex xt/css" /> 
  
              </head>
                
              <body id d="bodybg"> 
                
              <div id=" "sidebar"> 
                
                <h1 id="sitetitle"><a
                                    a href="index.php">RedSp pheresRule.co
                                                                         om</a></h1>
                                                                                   > 
                <h2 id="siteslogan">>Your source for red spher
                                                             res</h2> 
                
                <!‐‐ side
                        ebar moduless go here ‐‐>
                
              </div><!‐‐ end sidebar ‐‐> 
                
              <div id=" "mainbar"> 
                
                <!‐‐ mainBody goes hhere ‐‐> 
                
              </div><!‐‐ end mainbar ‐‐> 
                
              </body> 
              </html> 
               
 
Notice tha
         at I have put comments as s placeholders for where I  will load the modules and  d the mainBody for 
the  template.  Because we  have  no written  an of  the  CSS code,  this  is what  the  re
                      e            ot          ny           S               s             esulting  html  page 
would loook like: 




                                                                                         
Step 3
     3: CSS 
 
         here we start to see the de
This is wh                                                  e shape. At the end of this  step, we will
                                   esign elements really take                                        l have 
our basic framework inn place. Here is the CSS code: 
 
               
              * { 
                margin:
                      : 0; 
                padding
                      g: 0; 
              } 
                
body { 
  background‐color: #fff; 
  color: #666; 
  font‐family: Arial, Helvetica, sans‐serif; 
  font‐size: 12px; 
} 
  
a, a:link, a:visited { 
  color: #900; 
  text‐decoration: none; 
} 
a:hover { 
  text‐decoration: underline; 
  color: #000; 
} 
  
h1#sitetitle { 
  padding: 100px 0 0; 
  background: #fff url('../images/logo.png') center top no‐repeat; 
  font‐size: 20px; 
  font‐weight: bold; 
  text‐align: center; 
  color: #000; 
} 
h1#sitetitle a, h1#sitetitle a:link, h1#sitetitle a:visited { 
  text‐decoration: none; 
  color: #000; 
} 
h1#sitetitle a:hover { 
  text‐decoration: none; 
  color: #000; 
} 
h2#siteslogan { 
  font‐size: 14px; 
  font‐weight: bold; 
  margin: 0 0 10px; 
  text‐align: center; 
  color: #000; 
} 
  
#sidebar { 
  width: 215px; 
  margin: 10px 0 10px 10px;  
  float: left; 
  color: #000; 
} 
  
#mainbar { 
  margin: 10px 10px 10px 235px; 
             } 
               
             /* 
               
             Joomla Elements Will be added in Step 4: Joomlafy 
               
             */ 
              
 
 
Step 4: Joomlafy 
 
The next step is to "Joomlafy" our 'index.php' and 'template_css.css' files. Here is the XHTML markup, 
Joomlafied: 
 
XHTML Markup 
 
              
             <?php 
             defined( '_VALID_MOS' ) or die( 'Restricted access' ); 
             // needed to seperate the ISO number from the language file constant _ISO 
             $iso = explode( '=', _ISO ); 
             // xml prolog 
             echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; 
             ?> 
             <!DOCTYPE  html  PUBLIC  "‐//W3C//DTD  XHTML  1.0  Transitional//EN" 
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 
             <html xmlns="http://www.w3.org/1999/xhtml"> 
             <head> 
             <?php mosShowHead(); ?> 
             <?php 
             if ( $my‐>id ) { 
               initEditor(); 
             } 
             ?> 
             <meta  http‐equiv="Content‐Type"  content="text/html;  <?php  echo  _ISO; 
             ?>" /> 
             <link             href="<?php           echo              $mosConfig_live_site; 
             ?>/templates/redspheres/css/template_css.css"                 rel="stylesheet" 
             type="text/css" /> 
               
             </head> 
               
             <body id="bodybg"> 
               
<div id="sidebar"> 
               
               <h1 id="sitetitle"><a href="index.php"><?php echo $mosConfig_sitename; 
             ?></a></h1> 
               <h2 id="siteslogan">Your source for red spheres</h2> 
               
             <?php 
               if( mosCountModules( 'left' ) > 0 ) { 
                 mosLoadModules( 'left', ‐2 ); 
               } 
             ?> 
               
             </div><!‐‐ end sidebar ‐‐> 
               
             <div id="mainbar"> 
               
               <?php mosMainBody(); ?> 
               
             </div><!‐‐ end mainbar ‐‐> 
               
             </body> 
             </html> 
              
 
Now that we have our "Joomlafied" XHTML markup, let's take a look at what's different. In the header, I 
have added the following code: 
 
              
             <?php 
             defined( '_VALID_MOS' ) or die( 'Restricted access' ); 
             // needed to seperate the ISO number from the language file constant _ISO 
             $iso = explode( '=', _ISO ); 
             // xml prolog 
             echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; 
             ?> 
             <!DOCTYPE  html  PUBLIC  "‐//W3C//DTD  XHTML  1.0  Transitional//EN" 
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 
             <html xmlns="http://www.w3.org/1999/xhtml"> 
             <head> 
             <?php mosShowHead(); ?> 
             <?php 
             if ( $my‐>id ) { 
               initEditor(); 
             } 
             ?> 
             <meta  http‐equiv="Content‐Type"  content="text/html;  <?php  echo  _ISO; 
             ?>" /> 
<link          href="<?php          echo                      $mosConfig_live_site; 
               ?>/templates/redspheres/css/template_css.css"                     rel="stylesheet" 
               type="text/css" /> 
                 
               </head> 
                
 
 
"defined( '_VALID_MOS' )..." 
 
The first line, "defined( '_VALID_MOS')...", prevents direct access to the 'index.php' file. 
 
mosShowHead 
Another  important  part  to  note  is  the  line  that  says  "mosShowHead".  I  have  used  this  in  place  of  my 
"title"  and  "meta"  tags  because  Joomla!  uses  this  function  to  automatically  show  the  site's  title  along 
with important meta tags. 
initEditor 
 
The third part I would like to point out is "initEditor". This function initializes the WYSIWYG editor for the 
front end of your site. It is inside a conditional statement that tests whether or not the user is logged in. 
The  conditional  statement  improves  load  time  for  users  who  are  not  logged  in,  because  it  prevents 
Joomla! from executing the initEditor function when it is not necessary. 
echo $mosConfig_live_site 
 
You should also note that the link element has been changed to use an absolute href for the template's 
CSS file. Using $mosConfig_live_site along with the path to the template (templates/redspheres...), your 
template now knows exactly where its corresponding CSS file is. 
 
Now let's take a look at what else we've added to "Joomlafy" our 'index.php' file. 
Left Module Position 
 
The  following  code  is  used  to  1)  determine  whether  or  not  there  are  modules  published  to  the  "left" 
module  position,  and  2)  load  those  modules  in  the  "left"  module  position  with  a  style  of  ‐2.  (see 
"mosLoadModules ‐ An Explanation") 
 
                 
                <?php 
                  if( mosCountModules( 'left' ) > 0 ) { 
                    mosLoadModules( 'left', ‐2 ); 
                  } 
                ?> 
                 
 
Main Body 
 
The following code is used to load the Main Body  of your Joomla! template. This is where all  content 
items and components are loaded for your Joomla! site. 
 
              
               <?php mosMainBody(); ?> 
              
 
 
CSS Code 
 
              
             * { 
               margin: 0; 
               padding: 0; 
             } 
               
             body { 
               background‐color: #fff; 
               color: #666; 
               font‐family: Arial, Helvetica, sans‐serif; 
               font‐size: 12px; 
             } 
               
             a, a:link, a:visited { 
               color: #900; 
               text‐decoration: none; 
             } 
             a:hover { 
               text‐decoration: underline; 
               color: #000; 
             } 
               
             h1#sitetitle { 
               padding: 100px 0 0; 
               background: #fff url('../images/logo.png') center top no‐repeat; 
               font‐size: 20px; 
               font‐weight: bold; 
               text‐align: center; 
               color: #000; 
             } 
             h1#sitetitle a, h1#sitetitle a:link, h1#sitetitle a:visited { 
               text‐decoration: none; 
               color: #000; 
             } 
h1#sitetitle a:hover { 
  text‐decoration: none; 
  color: #000; 
} 
h2#siteslogan { 
  font‐size: 14px; 
  font‐weight: bold; 
  margin: 0 0 10px; 
  text‐align: center; 
  color: #000; 
} 
  
#sidebar { 
  width: 215px; 
  margin: 10px 0 10px 10px;  
  float: left; 
  color: #000; 
} 
  
#mainbar { 
  margin: 10px 10px 10px 235px; 
} 
  
/* Joomla Elements */ 
  
/* Moduletable DIV's */ 
#sidebar .moduletable { 
  margin: 10px 0; 
} 
#sidebar .moduletable h3 { 
  border‐bottom: 1px solid #ccc; 
  font‐size: 18px; 
  font‐weight: bold; 
  margin: 0 0 10px; 
  padding: 0 0 0 5px; 
} 
  
/* Main Menu */ 
ul { 
  padding: 0 0 0 5px; 
} 
li { 
  list‐style‐type: none; 
  padding: 3px 0 3px 18px; 
  background: #fff url('../images/bullet.gif') 0 5px no‐repeat; 
} 
ul#mainlevel a, ul#mainlevel a:link, ul#mainlevel a:visited { 
  text‐decoration: none; 
  color: #900; 
} 
ul#mainlevel a:hover { 
  text‐decoration: underline; 
  color: #000; 
} 
  
/* Login Form */ 
#mod_login_username { 
  width: 205px; 
  margin: 0 5px 5px; 
  border: 1px solid #ccc; 
} 
#mod_login_password { 
  width: 205px; 
  margin: 0 5px 5px; 
  border: 1px solid #ccc; 
} 
#mod_login_remember { 
  margin: 0 0 0 5px; 
} 
input.button { 
  border: 1px solid #ccc; 
  background‐color: #eee; 
  color: #666; 
  padding: 3px; 
  margin: 5px; 
  font‐size: 10px; 
} 
label { 
  margin: 0 0 0 5px; 
} 
  
/* Search Form */ 
#mod_search_searchword { 
  width: 205px; 
  margin: 0 5px 5px; 
  border: 1px solid #ccc; 
} 
  
/* Main Content Area */ 
.componentheading { 
  display: block; 
  font‐size: 20px; 
  color: #666; 
  font‐weight: bold; 
  border‐bottom: 1px solid #ccc; 
  margin: 0 0 10px; 
} 
                
              .contentheading { 
                font‐size: 20px; 
                color: #900; 
                font‐weight: bold; 
                margin: 0 0 2px; 
              } 
                
              .small, .createdate, .modifydate { 
                font‐size: 10px;  
                font‐weight: normal; 
              } 
                
              a.readon { 
                display: block; 
                padding: 3px 0 3px 18px; 
                background: #fff url('../images/bullet.gif') left center no‐repeat; 
                margin: 5px 0 0; 
              } 
                
              .article_seperator { 
                display: block; 
                height: 10px; 
              } 
               
 
We  also  Joomlafied  our  CSS  code.  Everything  below  "Joomla  Elements"  was  added  to  the  CSS  for 
Joomla!‐specific elements. I will not take time to discuss the Joomla!‐specific CSS elements, but rather I 
will just give you a link to "A Blank Template CSS file for Joomla" from CompassDesign. 
 
 
 
Step 5: Create a Thumbnail 
 
This step is not entirely necessary. Your template will load and run properly with or without a thumbnail. 
This just gives you a quick look at the template from the template manager. 
 
The dimensions of a thumbnail do not have to meet specific requirements, but they should be around 
225 pixels wide by 150 pixels high. Give your thumbnail the name 'template_thumbnail.png'. 
 
Here is my thumbnail: 
 
                                                           
                                                           
                                                           
Step 6
     6: Create "templa
                     ateDetail
                             ls.xml"
 
The next  step is to cre  eate the 'templateDetails.x   xml' file. Her e is the XML  markup thatt goes into th
                                                                                                             his file 
for our template: 
 
                 
                <mosinst   tall type="temmplate" version="1.0.x">
                  <name>   >redspheres< </name> 
                  <creatio onDate>09/26/2006</crea      ationDate> 
                  <author>Cory Webb     b</author> 
                  <copyright>Copyrigh    ht  2006  ‐  Cory  Webb,  Released  under 
                GNU/GPL</copyright> 
                  <authorEmail>your e    email here</a  authorEmail> > 
                  <authorUrl>www.ho      owtojoomla.n  net</authorU  Url> 
                  <version>1.0</versio   on> 
                  <description>RedSpheres is a sam      mple Joomla ! template fo  or the purposse of 
                instructio on. I hope we e all learn som
                                                       mething.</de scription> 
                  <files> 
                    <filena
                          ame>index.ht   tml</filename  e> 
                    <filena
                          ame>index.ph   hp</filename  e> 
                    <filena
                          ame>templat    te_thumbnail.png</filenam   me> 
                    <filena
                          ame>templat    teDetails.xml< </filename>
                    <filena
                          ame>css/inde   ex.html</filenname> 
                    <filena
                          ame>css/template_css.css     s</filename>
                    <filena
                          ame>images/    /index.html</ /filename> 
                    <filena
                          ame>images/    /logo.png</filename> 
                    <filena
                          ame>images/    /bullet.gif</fil
                                                        lename> 
                  </files>> 
                </mosins   stall> 
                 
 
It  is  impo
           ortant  that  every  file  in  your  installation  package has  a  corre
                          e                                          e             esponding  filename  tag  in  the 
'template  eDetails.xml' ffile. 
 
Step 7: Zip It 
 
All  of  your  template  files  should  be  in  a  folder  that  is  named  with  your  template  name.  Use  a  file 
compression  application,  like  WinZip,  to  create  a  ZIP  file  with  your  template  files.  This  ZIP  file  is  your 
installation file. 
 
 
Step 8: Install It 
 
In your template manager, install your new template, and set it as your default template. 
 
 
Step 9: Modify It 
 
Nobody's  perfect.  We  all  make  mistakes.  For  that  reason,  you  should  be  prepared  to  check  your 
template  for  errors,  browser  compatability,  and  overall  quality.  Using  the  Joomla!  template  manager, 
you can modify your template 'index.php' and 'template_css.css' files right from the browser. You can 
make changes, save them, and immediately see the result by previewing your site. 

Weitere ähnliche Inhalte

Was ist angesagt?

Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Emma Jane Hogbin Westby
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikMario Peshev
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESSjsmith92
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate PackageSimon Collison
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogigorgentry
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017Amanda Giles
 
Firefox Extension Development
Firefox Extension DevelopmentFirefox Extension Development
Firefox Extension Developmentphamvanvung
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentSitdhibong Laokok
 
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Laura Scott
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryTodd Zaki Warfel
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme KickstartPeter
 

Was ist angesagt? (20)

Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ Telerik
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESS
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate Package
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blog
 
Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
 
Firefox Extension Development
Firefox Extension DevelopmentFirefox Extension Development
Firefox Extension Development
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme Development
 
Firefox addons
Firefox addonsFirefox addons
Firefox addons
 
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Polymer 1.0
Polymer 1.0Polymer 1.0
Polymer 1.0
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
 
Html5 ux london
Html5 ux londonHtml5 ux london
Html5 ux london
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
 

Ähnlich wie How to create a basic template

Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei Hu
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...LinnAlexandra
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Build your website with awestruct and publish it on the cloud with git
Build your website with awestruct and publish it on the cloud with gitBuild your website with awestruct and publish it on the cloud with git
Build your website with awestruct and publish it on the cloud with gitXavier Coulon
 
Zotero Framework Translators
Zotero Framework TranslatorsZotero Framework Translators
Zotero Framework Translatorsadam3smith
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracketjnewmanux
 
crtical points for customizing Joomla templates
crtical points for customizing Joomla templatescrtical points for customizing Joomla templates
crtical points for customizing Joomla templatesamit das
 
Mojolicious, real-time web framework
Mojolicious, real-time web frameworkMojolicious, real-time web framework
Mojolicious, real-time web frameworktaggg
 
WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4David Bisset
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScriptbensmithett
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress ThemesLaura Hartwig
 
Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Aslam Najeebdeen
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 

Ähnlich wie How to create a basic template (20)

Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Create a landing page
Create a landing pageCreate a landing page
Create a landing page
 
Build your website with awestruct and publish it on the cloud with git
Build your website with awestruct and publish it on the cloud with gitBuild your website with awestruct and publish it on the cloud with git
Build your website with awestruct and publish it on the cloud with git
 
Zotero Framework Translators
Zotero Framework TranslatorsZotero Framework Translators
Zotero Framework Translators
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracket
 
crtical points for customizing Joomla templates
crtical points for customizing Joomla templatescrtical points for customizing Joomla templates
crtical points for customizing Joomla templates
 
Mojolicious, real-time web framework
Mojolicious, real-time web frameworkMojolicious, real-time web framework
Mojolicious, real-time web framework
 
WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
Creating a basic joomla
Creating a basic joomlaCreating a basic joomla
Creating a basic joomla
 
WordPress Theming 101
WordPress Theming 101WordPress Theming 101
WordPress Theming 101
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 

How to create a basic template