Workflow for developing / adjusting templates

Question

Usually I only adjust existing free templates and change colors and fonts. The question is, when I already have my Joomla page online, what is the easiest way to make changes to the template css?

Currently, I'm using the Chrome Development Tools to find and adjust specific styles for a preview. If I like it, I adjust the css file of the template directly in the online editor in the administration area.

When I first started and I didn't had any content, I used a local webserver with Joomla which had the advantage, that I could use a proper IDE for writing css and php code. Since I already have some content now, I would like to see how the changes I make look with the content I have.

I know that this is a basic question, but is there a preferred workflow when someone wants to adjust the design of an existing site?

Answer 1

Clone the livesite with Akeeba, install it locally, then adjust as required. When you're finished SSH / FTP your changed files back to the live site.

There are a whole host of good reasons why it's imprudent to “tweak” on a live site…

Answer 2

You've a few options here, depending on whether your focus is ease of use, automation or cost:

• Do exactly what you did before with your local install, but once installed, change the local Joomla installation to use your live, remote MySQL database in configuration.php, if your host supports remote access. Be careful though - any DB changes will roll over into live...

• Use a component like extplorer and edit the template files directly in the browser, with another tab open displaying the site, still using Chrome's dev tools. extplorer features code colouring and is great for making small changes quickly.

• Use a version control system to push out changes - for example, develop your template in a local Joomla install using your chosen IDE, with the template in a repository. When done, commit changes to your live site. Use a post-commit hook to checkout those changes as a working version. Whilst more complicated to set up, it does mean you can always rollback to old template versions if you make a mistake. Add in remote MySQL to ensure data consistency across local and live.

• Pay for a proper template / template framework - at my company we use YooTheme templates. This template framework has a feature called 'Customizr', which is basically a 2-pane window featuring hundreds of CSS variables (well, LESS variables) on the left and a live preview on the right. These variables control near enough every element of the template, from gutter padding to menu item text shadow, and everything in between. Changes are applied instantly in the preview and multiple 'styles' can be defined so you can play with different variable configurations. This all said, I'm sure other template frameworks have very similar features.

NB: I have no affliation with extplorer nor YooTheme other than as a user.

Answer 3

If it's just CSS changes you are making you may as well continue previewing them in Chrome Development Tools and using an online development environment such as Cloud9 or ShiftEdit you can connect directly to your server via FTP and make tweaks to the live site using a proper IDE similar to how you did when it was hosted locally.

I wouldn't however recommend this for any bigger changes which could break your site (I learned the hard way a few years ago). For these I recommend setting up a local server (or a free VM from koding.com), cloning the site with Akeeba and using Git* to push changes to your live site once they have been tested.

*If you don't want your code to be public on GitHub one good alternative is BitBucket.

Answer 4

Method 1

One method I've used is to add my own css file into the template index.php file. This can be wrapped to only add it if you are the user.

A way of extending this is to write a simple plugin that adds a css file if you are the user. I've used this to make changes to the default admin template, to avoid making changes directly in the template that might be replaced by the next update.

Something like...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

---

Method 2

To preview template changes, you can duplicate the template, and make changes in the duplicate. To view those changes, append "?template=test" to the url, which overrides the template. Replace "test" with whatever name you have decided to use for the duplicate.

Note that you need to duplicate the whole template, and not just a style. Both styles and templates can be duplicated in the admin gui.

I don't believe it's possible to override a style in the url. [PW: I just found out that in J3, you can override a style in the url. See method 3.]

---

Method 3

Similar to method 2 but with styles. Use a "test" style and modify the main template to include the test stylesheet. To override a style in the url, add ?templateStyle=, where is the template identifier (i.e. numerical).