Products

Solutions

Learn More

Partners

Community

Blog

About

DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


How to Customize In-Page Toolbars (new 2sxc 8.6)

Maybe you want to hover the toolbar on the left side, or you want to align the "..." more button differently. Maybe you need Left-To-Right-support, or you just want to add custom CSS classes. 

The ability to customize the edit UX was added in 2sxc 8.6. Here are the settings you can configure at toolbar-level (technical details in the wiki):

  1. hover position (right is default, but you can also hover left or force-not-hover)
  2. show behavior, because by default (if inside an area with the class sc-element) it will always require a hover. But if you create an admin-dashboard or something, you may want to always show it.
  3. placement of the "..." (more) button - because when left-aligning a menu or when not-floating it, the position to the right is kind of annoying. 
  4. custom CSS classes for whatever reason / decoration you want to apply. This will be applied to the <ul> tag which contains the buttons.

Let's look at some examples (you can find them in the tutorial-app): 

Toolbar alignments, floats and more-buttons

    <div class="demobox sc-element">
        Box to show alignments floating left with more to the right (not very practical)
        <ul class="sc-menu" toolbar='' settings='{ "hover": "left" }'></ul>
    </div>
    
    <div class="demobox sc-element">
        Box to show alignments - same as above, but made with Razor
        @Edit.Toolbar(Content, toolbar: new {}, settings: new { hover = "left" })
    </div>
    
    <div class="demobox sc-element">
        Box to show alignments - Razor, now showing standard buttons, just left-aligned
        @Edit.Toolbar(Content, settings: new { hover = "left" })
    </div>
    
    <div class="demobox sc-element">
        Box to show alignments floating left with more to the left
        <ul class="sc-menu" toolbar='' settings='{ "hover": "left", "autoAddMore": "left" }'></ul>
    </div>
    
    <div class="demobox sc-element">
        Box to show alignments floating right with simpler toolbar-attribute
        <ul class="sc-menu" toolbar='' settings='{ "hover": "right" }'></ul>
    </div>
    
    <div class="demobox sc-element">
        Box to show alignments floating left without more (as custom buttons)
        <ul class="sc-menu" toolbar='[{ "action": "new", "contentType": "Dummy" }]' settings='{ "hover": "left" }'></ul>
    </div>
    
    <div class="demobox sc-element">
        <ul class="sc-menu" toolbar='' settings='{ "hover": "none", "autoAddMore": "left" }'></ul>
        Box to show not floating 
    </div>
    
    <div class="demobox sc-element">
        Box to show no-hide... 
        <ul class="sc-menu" toolbar='' settings='{ "hover": "left", "autoAddMore": "left", "show": "always" }'></ul>
    </div>
    
    <div class="demobox sc-element">
        Box to show no-float and no-hide... 
        <ul class="sc-menu" toolbar='' settings='{ "hover": "none", "autoAddMore": "left", "show": "always" }'></ul>
    </div>
    
    <style>
        .demobox { height: 50px; border-width: 1px; border-color: coral; border-style: dashed;}
    </style>

      TL;DR

      This should help you create exactly the UI experience you want to provide. For anyhing more, you should try the tutorial App or read the 2sxc wiki, specifically the edit-overview.

      Love from Switzerland,
      iJungleboy 


      Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.



      Read more posts by Daniel Mettler

      Comments

      There are currently no comments, be the first to post one.

      Comment Form

      Only registered users may post comments.

      NewsArchives


      2sic Daniel Mettler (133)
      Aderson Oliveira (15)
      Alec Whittington (11)
      Alex Shirley (10)
      Andrew Nurse (30)
      Anthony Glenwright (5)
      Antonio Chagoury (28)
      Ash Prasad (25)
      Ben Schmidt (1)
      Benjamin Hermann (25)
      Benoit Sarton (9)
      Beth Firebaugh (12)
      Bill Walker (36)
      Bob Kruger (5)
      Brian Dukes (2)
      Brice Snow (1)
      Bruce Chapman (20)
      Bryan Andrews (1)
      cathal connolly (55)
      Charles Nurse (163)
      Chris Hammond (203)
      Chris Paterra (55)
      Clinton Patterson (28)
      Cuong Dang (21)
      Daniel Bartholomew (2)
      Dave Buckner (2)
      David Poindexter (3)
      David Rodriguez (2)
      Doug Howell (11)
      Erik van Ballegoij (30)
      Ernst Peter Tamminga (74)
      Geoff Barlow (7)
      Gifford Watkins (3)
      Gilles Le Pigocher (3)
      Ian Robinson (7)
      Israel Martinez (17)
      Jan Blomquist (2)
      Jan Jonas (3)
      Jaspreet Bhatia (1)
      Jenni Merrifield (6)
      Joe Brinkman (270)
      John Mitchell (1)
      Jon Henning (14)
      Jonathan Sheely (4)
      Jordan Coopersmith (1)
      Joseph Craig (2)
      Kan Ma (1)
      Keivan Beigi (3)
      Ken Grierson (10)
      Kevin Schreiner (6)
      Leigh Pointer (31)
      Lorraine Young (60)
      Malik Khan (1)
      Matthias Schlomann (15)
      Mauricio Márquez (5)
      Michael Doxsey (7)
      Michael Tobisch (3)
      Michael Washington (202)
      Mike Horton (19)
      Mitchel Sellers (28)
      Nathan Rover (3)
      Navin V Nagiah (14)
      Néstor Sánchez (31)
      Nik Kalyani (14)
      Peter Donker (52)
      Philip Beadle (135)
      Philipp Becker (4)
      Richard Dumas (22)
      Robert J Collins (5)
      Roger Selwyn (8)
      Ruben Lopez (1)
      Ryan Martinez (1)
      Salar Golestanian (4)
      Sanjay Mehrotra (9)
      Scott McCulloch (1)
      Scott S (11)
      Scott Wilkinson (3)
      Scott Willhite (97)
      Sebastian Leupold (80)
      Shaun Walker (237)
      Shawn Mehaffie (17)
      Stefan Cullmann (12)
      Stefan Kamphuis (12)
      Steve Fabian (31)
      Timo Breumelhof (24)
      Tony Henrich (3)
      Torsten Weggen (2)
      Vicenç Masanas (27)
      Vincent Nguyen (3)
      Vitaly Kozadayev (6)
      Will Morgenweck (37)
      Will Strohl (164)
      William Severance (5)
      DNN Launch Webinar
      REGISTER NOW
      DNN Launch Webinar
      REGISTER NOW
      DNN Launch Webinar
      REGISTER NOW