Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Nick 42 posts 216 karma points
    Sep 20, 2016 @ 15:08
    Nick
    0

    Hi everyone,

    I've been using Umbraco on and off over the years, and recently came back to it, and what a transformation since v6.0. I a loving the new grid structure for responsive layouts but I am coming a little unstuck with some elements.

    What I would like to produce is like the image attached: 3 columns with icons

    And the markup is something like this:

    <div class="medium-4 columns">
              <div class="fadein mod modIconText appear" data-delay="0" data-connectors="1">
                <div class="icon-text-circle">
                  <i class="fa fa-trophy"></i>
                  <h3>Quality</h3>
                  <p>Over 10 years’ experience, specialists in IP law translation</p>
                </div>
              </div>
            </div>
    

    But when I use the 3 column layout with the umbraco grid structure i get this:

    <div class="medium-4 columns">
                        <div>
                               <h3>Quality</h3>
    <p>Over 10 years’ experience, specialists in IP law translation</p>
    
    
                        </div>
                    </div>
    

    So my question is how can I add a class to the outer div, and indeed add another div surrounding that one to add in the animation and data info. Also when I add the icon font within the text editor, it strips it out, is there a better way of adding icon fonts to the editor?

    Many thanks in advance for any suggestions to the above.

  • Kerri Mallinson 113 posts 497 karma points
    Sep 20, 2016 @ 16:06
    Kerri Mallinson
    100

    Hi Nick,

    Do the extra classes need to be editable through the CMS or are they dependent on what document type or template the grid is displayed on?

    If they need to be added through the CMS you could create text fields for the extra classes and then insert the fields in the Grid templates (Settings/Partial Views/Grid).

    If they are needed only on certain doc types or pages and the CMS editor shouldn't be able to change them could try if statements on the templates to get the extra classes to show where and when you want them?

    For more options you could have a look at Archetype: https://github.com/kgiszewski/ArchetypeManual

    I've not used it specifically with the Grid but it should allow you to create a collection of fields, including the Grid layout plus text fields for the classes (you can create your own data types using the grid layout property editor to create different variations / combinations of grid layout and extra fields ) there is a built in feature to add css to the wrapper div with Archetype - might be worth having a look.

    Good luck - let us know how you get on :)

    Kerri

  • Nick 42 posts 216 karma points
    Sep 20, 2016 @ 16:43
    Nick
    0

    Hi Keri,

    Thanks for getting back to me, the classes don't need to be editable through the CMS. I would say they would be dependent on the doc type, I would like to use the same grid structure on other templates. Thanks I'll try the plugin.

    Do you have any suggestion on my <i class="fa fa-trophy"></i> is stripped out of the rich text editor?

    Thanks again

Please Sign in or register to post replies

Write your reply to:

Draft