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?
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.
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.
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
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?
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
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.
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
I should have been clearer, I am using LeBlender so maybe my query is better aimed at that forum?
Thanks
Dan
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.
Thanks, but that means keeping duplicate copies of CSS. All I want to do is apply my front end CSS stylesheet to each editor.
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
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.