Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Roger Withnell 128 posts 613 karma points
    May 22, 2015 @ 21:43
    Roger Withnell
    0

    Applying style to a grid

    I'm using 7.2.5 with MVC.

    The grid feature is great but how do I style it?

    For example, I have a simple header on my master template:  one row of 2 columns (logo) ,7 columns (header text) and 3 columns for a search macro.

    The grid facility puts the header text in h1 tags.  I (the developer, not the content editor) would like to set the colour of the header and to increase the font-size;  I don't want to give the content editor a choice.

    Using the Styling in the grid data type, I can set the colour of the header with the JSON code because it sets a style on the div that includes the header h1 but I cannot set  the font-size because the JSON code sets the style on the div and not on the h1 tag.

    Within the Developer > Data type, the available stylesheets are listed so I created a styelsheet with the css I require but this had not effect unless I add this stylesheet to the master page and then its settings are applied to all markup on all pages.

    How do I do this?  What is the list of Stylesheets on the the Data Type for?

    Your help would be much appreciated.

    Thanking you in anticipation.

    Roger

     

    Copy Link
  • Guido Adam 21 posts 65 karma points
    May 22, 2015 @ 22:34
    Guido Adam
    0

    Hi Roger,

    Just create your own grid renderer. Take the bootstrap 2 or 3 as a template and modify to your needs and save it in the grid folder.

    Then use rendergrid with the name of your modified grid renderen as the second variable. Then it will render using you own code. It suits all my needs. Never used the stylesheets, but I guess they're for styling the editor.

    Cheers

    Copy Link
  • Roger Withnell 128 posts 613 karma points
    May 23, 2015 @ 00:16
    Roger Withnell
    0

    Thanks, Guido, but I'm not sure that I follow; I'm a newbie here.

    Could you explain in more detail, please, step by step?

     

    Copy Link
  • Roger Withnell 128 posts 613 karma points
    May 23, 2015 @ 20:21
    Roger Withnell
    0

    I've built a custom grid editor to do this.

    Roger

    Copy Link
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    May 23, 2015 @ 20:49
    Dennis Aaen
    101

    Hi Roger,

    You can apply style to your grid editor, by adding a config property to your package manifest something like this:

    "config":{
    "color": "red",
    "text-align": "right"
}

    Then you can control how your content is styled in the backoffice and which HTML tag your content is wrapped in on your frontend. I think this documentation about the grid layout can help you https://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors-v7/Grid-Layout/build-your-own-editor

    If you have access to the Umbraco TV I would also recommend you to see this http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/grid-layouts/customising-a-textstring-grid-editor/ wideo, I think it shows exactly what you are asking for.

    Hope this helps,

    /Dennis

    Copy Link
  • Guido Adam 21 posts 65 karma points
    May 25, 2015 @ 22:36
    Guido Adam
    1

    Hi Roger,

    First take a look at: https://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors-v7/Grid-Layout/What-Are-Grid-Layouts

    Then get the Bootstrap example from your grid folder. I think when knowing all about area's and sections etc, the example will make sense!

    Cheers,

    Guido

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft