Customizing Your VisioList

Discussion in 'Tutorials' started by Mark, Sep 7, 2013.

  1. Mark
    • Staff

    Mark Administrator Staff Member

    VisioList aims to separate user customizations from the core skins files to allow for easier upgrades and maintenance. To this end, VisioList employs a few simple techniques to allow complete customization without hacking the core files.

    3 simple rules
    Any template edits you make ensure its in a child template (admin edits automatically do this)
    Any CSS edits should be made in skins/parabola/user.css
    Any PHP edits should be handled via a plugin

    For these examples we assume your working with parabola skin.

    Template Edits:Login to your admin panel, hover over settings tab, click on skins and categories.

    Click "Edit Child" and click the template you want to customize from the list on the left. This will make a copy of the template file in parabola/child/ that you can edit. Child templates are never overwritten during an update, this again allows your customizations to be preserved after an update. You should still compare the new templates to your child templates to ensure you are not missing any new tags added to the core.

    CSS edits: if you open skins/parabola/user.css you will see many classes and ID's empty and ready for your customization. You can add any CSS rules you like to this file to override the default styles. You can also add yoru own custom classes and ID's to this file. user.css is never overwritten during upgrades so your customizations are safe in this file.

    PHP edits: You should never need to edit core files, all php edits must be handled via a plugin. If you cant figure out how to do it with a plugin, please start a topic in the forum and we will help you, we can add hook locations where needed in the core.
    cajkan likes this.
  2. Anna

    Anna Member

    What kind of different changes is needed to be done with Edit Child that I cant do with CSS edits?
  3. Basti
    • Staff

    Basti Administrator Staff Member

    Html. Child folder is for editing templates files to ensure smooth possible skin upgrades. If you only edit css, sure user.css is enough. But as soon as you maybe want to edit information text to lets say join_form.html, or change/add html id/class names -> child folder is the way to go
  4. Mark
    • Staff

    Mark Administrator Staff Member

    Yup, HTML edits as basti says.

    You might want to add tags or statistics to ranking tables, or stats page. Or you might want to add another sidebar or other edits to the footer or header sections, you might want reposition ad zones. These would all be handled with template edits using child templates. CSS and HTML have very different functions, though they are codependent.
  5. panzerdude

    panzerdude Member

    Just wanted to say thanks for the helpful info. I never did my edits correctly until now. Today I've managed to get my VL updated from 0.9 to 1.3 with no problem following the installation guidelines. Cheers :D
    Basti and cajkan like this.
  6. marquisk2

    marquisk2 New Member


    I'm new to Visiolist and I tried to follow these steps and when I try and edit any file in the child I see this error at the top:

    The file is not writable or does not exist

    I tried setting my skins directory to 775 in attempt to see if it's a permission issue but it still shows that error. When I edit the main template (not the child) I can make any modifications I want without that error message.
  7. Mark
    • Staff

    Mark Administrator Staff Member

    Hello, your server does meet our requirements, you will have many other issues along the way.

    suPHP or FastCGI PHP Handlers Recommended
    If you plan on making use of the admin plugin upload, language system and skin editing features, we recommend you configure your server to use suPHP as your PHP handler. If your configuration runs as the apache user (often something like "nobody", or "www") then you may experience file ownership and group problems when attempting to create, edit or delete these files.

Share This Page