I am pretty new to Umbraco and have setup a new website that uses an html template with Bootstrap4. The site renders as designed and I have started adding Page templates etc for content editing, initially this was larger chunks of the page and I can see how this can be done to more detailed parts of the page to concentrate on specific content.
There are some layouts that require some chunks of html, for instance a Bootstrap table with cell content, including Bootstrap buttons etc.
In this case, its not practical to create a content area for each cell, but the table, buttons and other bootstrap styled elements don't render in the Rich Text Editor and styles cannot be selected.
The first question from my client is "Can we see this looking the same as the site and can we choose the styles?"
I can see that the TinyMCE editor is used to "select" styles and trying a few examples the editor errors when displaying, possibly because of versioning, of the config settings I have tried, but its seems that these will need to be built up manually, foe every bootstrap style (or at ;east the ones we want to allow users to use) I can also see that the back-end has the ability to create "custom" styles, but this is adding styles rather than using existing stylesheets.
Questions:
1) Is it possible to render bootstrap in the editor?
Would this mean adding bootstrap to the back-end and would this break the back-end?
2) Are there any free configurations out there that can be used to add Bootstrap styles (Umbraco 8, Bootstrap 4)
3) Is this the wrong way of implementing this, should the editor show limited styles or no style and the users are expected to preview/test on every edit?
[I usually build bepoke web apps, not CMS based sites and coming back to doing some CMS based work, it seems this issues is still around after over a decade (cms's in general).. I suppose this is the choice between a CMS like umbraco or something like WP/Wix etc?]
The first project I am doing is more open to having larger chunks to be edited by someone who knows web development, so not a huge issue, but I am looking to use Umbraco on a more editorial site where content creation is much more restricted, do we just create templates that very very specific in this case?
4) Should we prepare the site for basically Text/Image content only and just create styles specifically for that? Ie separate Layout styles with Content Styles? Is this a strategy that people use?
Personally I think the editor should have limited styles (you can use your existing styles by decorating the styles with an attribute, so if you include your stylesheet in the editor settings, those styles will appear in the drop down /*umb_name:H4/
Applying styles to other elements is a bit hit and miss, as generally it surround your element with a span and adds the class to that, so you need to accommodate that in your css files too.
you could also create a few macros which drop in predefined content templates for them to use, similar to below
Adding Bootstrap styles to render in tinyMCE and ability to select bootstrap styles (and styling in general)
Hi,
I am pretty new to Umbraco and have setup a new website that uses an html template with Bootstrap4. The site renders as designed and I have started adding Page templates etc for content editing, initially this was larger chunks of the page and I can see how this can be done to more detailed parts of the page to concentrate on specific content.
There are some layouts that require some chunks of html, for instance a Bootstrap table with cell content, including Bootstrap buttons etc.
In this case, its not practical to create a content area for each cell, but the table, buttons and other bootstrap styled elements don't render in the Rich Text Editor and styles cannot be selected.
The first question from my client is "Can we see this looking the same as the site and can we choose the styles?"
I can see that the TinyMCE editor is used to "select" styles and trying a few examples the editor errors when displaying, possibly because of versioning, of the config settings I have tried, but its seems that these will need to be built up manually, foe every bootstrap style (or at ;east the ones we want to allow users to use) I can also see that the back-end has the ability to create "custom" styles, but this is adding styles rather than using existing stylesheets.
Questions: 1) Is it possible to render bootstrap in the editor? Would this mean adding bootstrap to the back-end and would this break the back-end?
2) Are there any free configurations out there that can be used to add Bootstrap styles (Umbraco 8, Bootstrap 4)
3) Is this the wrong way of implementing this, should the editor show limited styles or no style and the users are expected to preview/test on every edit?
[I usually build bepoke web apps, not CMS based sites and coming back to doing some CMS based work, it seems this issues is still around after over a decade (cms's in general).. I suppose this is the choice between a CMS like umbraco or something like WP/Wix etc?]
The first project I am doing is more open to having larger chunks to be edited by someone who knows web development, so not a huge issue, but I am looking to use Umbraco on a more editorial site where content creation is much more restricted, do we just create templates that very very specific in this case?
4) Should we prepare the site for basically Text/Image content only and just create styles specifically for that? Ie separate Layout styles with Content Styles? Is this a strategy that people use?
Any help or comments appreciated.
Personally I think the editor should have limited styles (you can use your existing styles by decorating the styles with an attribute, so if you include your stylesheet in the editor settings, those styles will appear in the drop down /*umb_name:H4/
Applying styles to other elements is a bit hit and miss, as generally it surround your element with a span and adds the class to that, so you need to accommodate that in your css files too.
you could also create a few macros which drop in predefined content templates for them to use, similar to below
is working on a reply...