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:
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.
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?
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.
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?
Feature rich grid columns
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:
And the markup is something like this:
But when I use the 3 column layout with the umbraco grid structure i get this:
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.
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
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
is working on a reply...