Copied to clipboard

Flag this post as spam?

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


  • Jonas Eriksson 930 posts 1825 karma points
    Apr 21, 2015 @ 19:17
    Jonas Eriksson
    0

    Custom CSS for the Grid

    I'm trying to figure out how to use the Grid. One thing I got stuck on currently is I like to set a css for the backend controls (for example to set max-width). Can I do that in one place - or do I do that by editing html for each of the allowed grid editors?

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Apr 21, 2015 @ 19:29
    Dennis Aaen
    100

    Hi Jonas,

    You can set the custom CSS for the Grid, by adding a stylesheet in the stylesheets folder in Umbraco. Then if you go to the developer section --> data types, choose the grid layout data type you are using in there you can add the stylesheet.

    Hope this helps,

    /Dennis

  • Dan Evans 629 posts 1016 karma points
    Jul 08, 2015 @ 07:54
    Dan Evans
    0

    I have applied a CSS file but it is not styling the contents of my grid and I can see no reference to the CSS being applied in the source code.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Jul 08, 2015 @ 16:36
    Jan Skovgaard
    0

    Hi Dan

    What does your settings look like? Can you post a screendump?

    And have you made sure to clear the browser cache and the Umbraco backoffice cache just to make sure that's not the culprit?

    /Jan

  • Dan Evans 629 posts 1016 karma points
    Jul 09, 2015 @ 11:15
    Dan Evans
    0

    I should have been clearer, I am using LeBlender so maybe my query is better aimed at that forum?

    Thanks

    Dan

  • Japheth Kosgei 7 posts 37 karma points
    Jul 15, 2015 @ 11:18
    Japheth Kosgei
    0

    Hi Dan, am no guru but if working with LeBlender you need to modify the associated editor.cshtml located in Partial views/Grid/Editors (if using default location). You can style specific elements in the view generated by editor by inserting relevant css classes there.

  • Dan Evans 629 posts 1016 karma points
    Jul 15, 2015 @ 11:25
    Dan Evans
    0

    Thanks, but that means keeping duplicate copies of CSS. All I want to do is apply my front end CSS stylesheet to each editor.

  • Japheth Kosgei 7 posts 37 karma points
    Jul 15, 2015 @ 11:41
    Japheth Kosgei
    0

    My bad, seems I misunderstood your question - thought you wanted to apply a css class to a specific element being displayed on grid. Applying front end CSS to each editor may not be easy since (and I could be totally wrong) any stylesheet applied to editor will affect the entire backend which may lead to undesired outcome. I went down that road myself a while back and in the end it wasn't worth it. Now I do this: 1. I use the provided stylesheets (bootstrap2 / bootstrap3) with my editors to get a decent enough look for my editors - something as close as possible to front especially in terms of position of elements 2. I insert check in my leBlender editor that cehcks if backend or frontend and render different html in either cases - this way for front end, I have full control of my styling based on my own frontend stylesheet 3. To display grid content in my frontend template i call @CurrentPage.GetGridHtml("gridPropertyName", "myCustomView") where myCustomView is is a copy of Partial Views/Grids/bootstrap3 with all html elements stripped out (this way bootstrap3/2 styles don't affect rendering of my frontend... Don't think this helps but at least it could give you an idea for a different approach

Please Sign in or register to post replies

Write your reply to:

Draft