1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[Docs] Steps to Making a Custom Theme

Discussion in 'Design and Layout' started by Nick, Aug 21, 2009.

  1. Nick

    Nick Well-Known Member

    Designing your own Hotaru theme can be as easy or complicated as you want it to be, but you'll be glad to know there are only six template files in a Hotaru theme:

    404error, footer, header, index, navigation and sidebar.

    Plugins add further templates, but you only have to customize the ones you want to. Here are the steps to making your own theme:

    Beginner
    - Use the same structure as the default template, but change colors and fonts.

    1. Copy the default theme folder and rename it, e.g. mycustom (or name of your choice)
    2. Open mycustom/css/style.css and edit

    Novice - As above, but edit CSS files for plugins.

    1. Copy the default theme folder and rename it, e.g. mycustom
    2. Open mycustom/css/style.css and edit
    3. Move or copy the CSS files from plugin folders into mycustom/css/ and edit each file

    Note: When Hotaru runs, it merges all those files into a single CSS file. The main style.css file is then read after that merged file.

    Intermediate - Start with the default template then change the layout.

    1. Copy the default theme folder and rename it, e.g. mycustom
    2. Open header.php and index.php, re-label the divs and move them around
    3. Open mycustom/css/style.css (you might want to remove the default theme's reset-fonts-grids.css file)
    4. Move or copy the CSS files from plugin folders into mycustom/css/ and edit each file

    Advanced - Edit plugin template files.

    1. Copy the default theme folder and rename it, e.g. mycustom
    2. Open header.php and index.php, re-label the divs and move them around
    3. Open mycustom/css/style.css (you might want to remove the default theme's reset-fonts-grids.css file)
    4. Move or copy the CSS files from plugin folders into mycustom/css/ and edit each file
    5. Move or copy the template files from plugin folders into mycustom and edit each file (More on that here: customizing plugin templates)

    Note: When Hotaru runs, it checks your theme folder for CSS, JavaScript and template files, and if it can't find them, it uses the ones in the plugin folders.
     
    Last edited: Nov 8, 2009
  2. JonH

    JonH Admin & Design

    Say I add a widget or something to a site by manually editing the code and put the new widget.css file in mycustom/css/ . Will hotaru merge it with the rest or does this work for plugin CSS only?
     
  3. Nick

    Nick Well-Known Member

    Hotaru only merges CSS files from plugins. If you manually add something to a template that needs a separate stylesheet, you'll need to add it to your theme's <HEAD> section in your header.php template, or copy and paste the CSS into your main style.css file.
     

Share This Page