Backend Template

nepheus's Avatar

nepheus

24 Oct, 2012 04:08 PM

I know making a template for backend which is intuitive is not an easy work and in some ways it makes a cms-project famous. I've just looked into the code and find out that the skeleton it's table structure, which IMHO it's hard to deliver best practice in design and extend the structure. Despite that current admin interface is fine, I'll still look for next generation with better improvement. I'll open new template for the core on git so that anyone has interest can join in to empower. I love twitter bootstrap and foundation, I think it'll be good start. What do you guys think?

  1. Support Staff 1 Posted by John on 24 Oct, 2012 05:58 PM

    John's Avatar

    What do we think? Create it and let the users test it :)

  2. 2 Posted by bvdn on 25 Oct, 2012 08:15 AM

    bvdn's Avatar

    I second that!
    Love Fork & love bootstrap/ skeleton.
    Looking forward testing it

  3. 3 Posted by nepheus on 26 Oct, 2012 11:04 AM

    nepheus's Avatar

    After digging into the source, I've found that it's really hard to work on another backend theme. The possibility is that I can trying to change the core css instead of implement or refactor all style with bootstrap/foundation.

  4. Support Staff 4 Posted by tijs on 11 Nov, 2012 11:54 AM

    tijs's Avatar

    This is something we want to do, but it won't be in the near future.

  5. 5 Posted by bvdn on 12 Nov, 2012 09:45 PM

    bvdn's Avatar

    Made an attempt for a bootstrap website with fork:

    http://www.fork.burovandernet.nl

    My page-template looks like this:

    {include:core/layout/templates/head.tpl}
    {include:core/layout/templates/php/nav.php}
    {include:core/layout/templates/header.tpl}
    {include:core/layout/templates/php/disciplines.php}

    <h2><b>Gallery</b></h2>

    <div class="container">
    <div class="row">

    <div class="span4">
    {option:position3l}
    {iteration:position3l}
    {option:!position3l.blockIsHTML}
    {$position3l.blockContent}
    {/option:!position3l.blockIsHTML}
    {option:position3l.blockIsHTML}
    {$position3l.blockContent}
    {/option:position3l.blockIsHTML}
    {/iteration:position3l}
    {/option:position3l}
    </div>
          
    <div class="span4">
    {option:position3m}
    {iteration:position3m}
    {option:!position3m.blockIsHTML}
    {$position3m.blockContent}
        {/option:!position3m.blockIsHTML}
    {option:position3m.blockIsHTML}
    {$position3m.blockContent}
    {/option:position3m.blockIsHTML}
    {/iteration:position3m}
    {/option:position3m}
    </div>

    <div class="span4">
    {option:position3r}
    {iteration:position3r}
    {option:!position3r.blockIsHTML}
    {$position3r.blockContent}
    {/option:!position3r.blockIsHTML}
    {option:position3r.blockIsHTML}
    {$position3r.blockContent}
    {/option:position3r.blockIsHTML}
    {/iteration:position3r}
    {/option:position3r}
    </div>
    </div>

    <div class="row">
    <div class="span12">
    {option:position1}
    {iteration:position1}
    {option:!position1.blockIsHTML}
    {$position1.blockContent}
    {/option:!position1.blockIsHTML}
    {option:position1.blockIsHTML}
    {$position1.blockContent}
    {/option:position1.blockIsHTML}
    {/iteration:position1}
    {/option:position1}
    </div>
    </div>

    <div class="row">
    <div class="span6">
                {option:position2l}
    {iteration:position2l}
    {option:!position2l.blockIsHTML}
    {$position2l.blockContent}
    {/option:!position2l.blockIsHTML}
    {option:position2l.blockIsHTML}
    {$position2l.blockContent}
    {/option:position2l.blockIsHTML}
    {/iteration:position2l}
    {/option:position2l}
    </div>
      
             <div class="span6">
    {option:position2r}
    {iteration:position2r}
    {option:!position2r.blockIsHTML}
    {$position2r.blockContent}
    {/option:!position2r.blockIsHTML}
    {option:position2r.blockIsHTML}
    {$position2r.blockContent}
    {/option:position2r.blockIsHTML}
    {/iteration:position2r}
    {/option:position2r}
    </div>
    </div>
    </div>



    {include:core/layout/templates/footer.tpl}

    </div>
    </body>
    </html>

  6. 6 Posted by bvdn on 12 Nov, 2012 09:54 PM

    bvdn's Avatar

    I now get responsive ( it works)
    3 columns ( span4)
    1 column ( span 12)
    2 columns ( span 6)

    Can some body give a pointer with:
    The titles in the editor blocks.
    I want to give them another design.
    pref in css or should I use the styling in the ckeditor?
    Q: where do I find the editor
    Q: how do I add styles in the editor
    Q: Can I add <div styles > to / in H1, H2 etc in the css
    f.e : <h3>content<b>contentt2</b></h3>

    Or should I go another way?

    Thanx in advance.
    G

  7. Support Staff 7 Posted by John on 12 Nov, 2012 10:02 PM

    John's Avatar

    You seem to have an error in your site. Subpages don't work.

    Where does this come from?

    {include:core/layout/templates/php/nav.php}
    
  8. 8 Posted by bvdn on 12 Nov, 2012 10:04 PM

    bvdn's Avatar

    @john: Your right .. they work but they are empty. I first want to make the theme work.
    The nav comes later ..
    Please only look on the home page ;-)

    The nav is not part of fork

  9. 9 Posted by bvdn on 15 Nov, 2012 12:41 PM

    bvdn's Avatar

    @john : {include:core/layout/templates/php/nav.php} / where does it come from..

    I have included some php pages/ chunks in the template.
    It seems to do the trick for me.. probable better to put it directly in the .tpl file.
    Or not ?

  10. Support Staff 10 Posted by John on 16 Nov, 2012 07:58 PM

    John's Avatar

    When it works for you then it's alright but can you put that code somewhere online? I personally think tpl is better as in separating code and layout. Can we see how you did it?

  11. 11 Posted by bvdn on 17 Nov, 2012 11:05 AM

    bvdn's Avatar

    @ john: I will attach theme file.

    What I basically did is:

    Cleared a complete theme's core: (css, js, layout & template's)
    Bought a bootstrap theme named Roxie. < you can see the folder/ html files still in the theme folder> & used it for cpying /styling, head etc

    Pointed the css/ js / images etc to the right path ( head)

    Made the tpl in the frontend using spans of the bootstrap css.

    And worked on the css's

    With the templates I used the methode of importing php files because I want to be flexible in making new templates for different pages - maybe your right abot working with ' cleaner' templates..... but it gave me flexibility

    I am looking forward to your opinion. ;-)

  12. Support Staff 12 Posted by John on 17 Nov, 2012 02:42 PM

    John's Avatar

    Ok, I downloaded the asset. I'll take a look somewhere this week.

  13. Support Staff 13 Posted by John on 18 Nov, 2012 01:37 PM

    John's Avatar

    @bvdn can you provide me with your email? I've taken a look at your stuff. Too much to say to write here :)

  14. 14 Posted by bvdn on 18 Nov, 2012 03:02 PM

    bvdn's Avatar

    info at burovandernet.nl

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac