Hi, I'm trying to get the styles to work in the rich text editor. I've followed the videos, And in the content editor, I get the styles. On my site though it does not get used since it is overridden by the bootstrap class jumbotron p.
My style is
P {
Font-size:16px;
}
Is there away to keep the tag 'p' and include a class in the tag so I get
Here is my text
I've tried overriding with an Id #myContent P but in the page content editor I get a tag Id being generated and not a class.
The styles that you define in your RTE editor are supposed to only appear in the backoffice Content Editor. They are used for giving your content editors a realistic preview of how their content will eventually look in the frontend. So the Font-size: 16px that you assigned for your editor styles will only show up in the backoffice and not in the frontend. This is the way it's suppose to work.
So for your frontend styles you should create a custom css and include it in your markup AFTER the bootstrap css. That way you can overrride the jumbotron class by writing something like:
.jumbotron p{
font-size: 16px !important;
}
in your custom css file, ex. /css/custom.css.
Makes sense? Let me know if you need any more help.
That seems to be very strange since the markup made in the editor makes it through to the live published web page. I have achieved what I want to do in the styles editor using p.myclass {........}.
It would be nice to be able to use either
#componentid myclass {..........}
Or
#componentid > myclass {..........}
And the styles be correctly picked up in mce and the styles editor correctly so that they are assigned just with the class name. This way everything would look the same at design time and runtime.
I've tried loading my css file after the bootstrap one without the important but my file seems to loads first and thus bootstrap always wins. I don't want to use important.
RTE overriding Styles.
Hi, I'm trying to get the styles to work in the rich text editor. I've followed the videos, And in the content editor, I get the styles. On my site though it does not get used since it is overridden by the bootstrap class jumbotron p.
My style is P { Font-size:16px; }
Is there away to keep the tag 'p' and include a class in the tag so I get
Here is my text
I've tried overriding with an Id #myContent P but in the page content editor I get a tag Id being generated and not a class.
Any help would be great fully received
Brian
Hi Brian.
The styles that you define in your RTE editor are supposed to only appear in the backoffice Content Editor. They are used for giving your content editors a realistic preview of how their content will eventually look in the frontend. So the Font-size: 16px that you assigned for your editor styles will only show up in the backoffice and not in the frontend. This is the way it's suppose to work.
So for your frontend styles you should create a custom css and include it in your markup AFTER the bootstrap css. That way you can overrride the jumbotron class by writing something like:
in your custom css file, ex. /css/custom.css.
Makes sense? Let me know if you need any more help.
That seems to be very strange since the markup made in the editor makes it through to the live published web page. I have achieved what I want to do in the styles editor using p.myclass {........}. It would be nice to be able to use either
#componentid myclass {..........}
Or
#componentid > myclass {..........}
And the styles be correctly picked up in mce and the styles editor correctly so that they are assigned just with the class name. This way everything would look the same at design time and runtime.
I've tried loading my css file after the bootstrap one without the important but my file seems to loads first and thus bootstrap always wins. I don't want to use important.
is working on a reply...