I'm using Ckeditor to create content for posts and pages. I wonder how to make the content responsive(not to purchase some ckeditor bootstrap plugins)?
There are two possible way that come to my mind:
1. Parse the raw html code generated by ckeditor and add bootstrap classes to corresponding html tags (e.g. img-responsive etc) before storing the data in database.
2. Add media queries in css files.
I don't know which is the better way and how to implement each of them. I appreciate your suggestions! Thanks in advance!
I would advise you to dive into your second option: CSS media queries. It will allow you a greater scope of customization and ultimately benefit your development skills. Media queries are brilliant to know how to use, and aren't too difficult if you already have an understanding of using CSS selectors and attributes.
If you are using ckeditor yourself (as opposed to your users creating content) then you can use 'Source Mode' plugin to edit the raw html and add the bootstrap classes you need.
This is based on the assumption that bootstrap is already loaded on to any pages which will display the ckeditor content or the script is included through 'Source Mode'.
http://ckeditor.com/addon/sourcearea
For mine I wrapped all my ckeditor contents into a div with class .note-content and set the max-width of media located in the div.
.note-content
{
img, iframe {
max-width: 100%;
height: auto !important;
}
}
Related
I need help with CSS responsive styling for two tables.
Generally I use Wordpress with a strong emphasis on the non-programmer user being able to easily edit the page. I also use the theme without bootstrap :(
I want to get mobile look as below, without changing desktop one.
table,head,tbody,th,td,tr {
display: block;
}
Links to JSFidlle:
https://jsfiddle.net/682cqzd1/5/
https://jsfiddle.net/24gqc064/
I am making a theme for a website managed by plone using diazo and at least parts of twitter-bootstrap. Personally I'm not all too happy about that combination, but it was requested that way.
Now I was informed the other day that there will be some portlets that suppose to come in their own design, styled in an editor insinde plone (the editor seem to write the styles straight into the html). Meaning no further theming should be applied but bootstrap css recognizes the pattern and hijacks it anyway.
I tried to block that by using a form of <notheme css:if-content=".theStaticPortlet" /> but ended up having the theme blocked on the entire site whenever a container like this was found.
Is there a way of excluding a specific container/class from being bothered by the theme while everything around it stays themed like before?
With lesscss you can do something like that:
.theStaticPortlet {
// put your specific portlet css here
}
:not(.theStaticPortlet) {
// copy or import all your regular site css here
}
From what I understand your question is purely about Bootstrap and its CSS interfering with Plone markup. Exactly which styles are being applied on your portlet? I'd bet it has to do with the DL/DT/DD tags. If so you could use Diazo to replace those with DIVs or some other neutral tags - on Bootstrap's understanding, of course.
I was looking for a (simple) WYSIWYG Editor jQuery Plugin that's compatible with Bootstrap 3. I've seen a lot WYSIWYG Editors jQuery Plugin that were compatible with the previous Bootstrap, but my website uses Bootstrap 3, so each time I implemented such a jQuery Plugin, my Bootstrap 3 would ruin the buttons and mess the whole editor up.
So now I'm asking whether there is an option to enable the Bootstrap 2 stylesheet only for one div and its contents.
I assume a iframe could work, but then, I need the WYSIWYG Editor's contents (which are in the iframe then), along with text inputs on the 'non-iframe'.
One way you might be able to solve this would scope your css for that div. This is what I have implemented with a content management system that I have created.
Let say for example you give the WYSIWYG Div an ID of HTMLEditable.
you could target that div with your css and all the css within that div.
#HTMLEditable .WYSIWYG{
....css goes here
}
#HTMLEditable p{
....css goes here
}
The above css will only apply to that div.
Then its just a case of finding the correct css that you need in that div.
Note you may need to override/reset the css for that div to stop your bootstrap3 applying to it.
Here is an example of a reset css. (You will need to scope this as well to make sure you don't reset all your css).
EDIT: use LESS
To make this easier you can use LESS which is what bootstrap uses.
#HTMLEditable {
//import the modal css
#import "bootstrap.css";
}
you will need to make a file 'HTMLEditable.less'. Then Add the code to similar to the above.
The less will them compile the above into css and will scope everything in the css to #HTMLEditable
Check out the LESS site and look ate the nesting. This is what you are after. This site will also show you how to compile it.
You need to put the class or id of this div before all css rules. You can do it like this if you need a css file and not less.
#HTMLEditable{
paste in all of your css
}
than copy all of this paste it here: http://less2css.org/ in the less area and it will generate the right css for you.
Sorry if this is obvious but I just don't know what more to do.
I am using fancybox jQuery plugin to load html content into a modal, but the content doesn't show the css styles of the main document.
CSS rules are called in the main document AND inside the loaded html in a <style> tag, but nothing.
How can I fix this without having to apply individually each element's css with jQuery .css() calls?
Thank you
Note: I know this may be over-duplicated, but I still haven't found the right solution.
Edit: Ajax-loaded content is inside an iframe
Since, as you mention in the comments, you're actually loading content into an iframe, this loaded content will not be affected by styles in the container document. They're two distinct HTML pages, despite the illusion created by the iframe.
Your best bet is to configure the content you're loading to use the same set of styles and style sheets as the container document, or a subset thereof. Treat it like just another HTML page on your site.
I have a div- workarea, where, I want to load contents of body of a template. I could load the content, but how to load css of the template. If I tried to load it, it overrides the default css of the page into which I'm loading the template's body content. I don't want to use iframes in my project.
Thanks in advance
Another alternative is to create a reset stylesheet just for that div container. Put aa id selector on the container div in which you load content and use that ID as a prefix for styles you use in the template.
<div id="template_content"></div>
and css as
#template_content h2 {....}
#template_content p {...}
If you cannot do this than your only option is iframe.
Your only simple option here is to use an <iframe>, styles cascade down, that's just how they work and were intended to work, if you want a section of the page with drastically different styling that also doesn't inherit, an <iframe> is the perfect tool do this.
Many people think frames are bad, that that's a different thing from iframes, no matter which side of the line you're on <iframe> elements are perfectly legitimate to use here. Why try to solve the problem in a very round-about way when the perfect tool for the job is laying there ready to use?
For example this is how almost every rich-text-editor works in a page, via an <iframe>, for many reasons but to keep the styling separate is one of them :)
Give Some id to that div like WorkArea. Now in css file, write your styles and from. Do not attach anything to any divs of the body from css, using body as parent class
might be hard but give the display or preview area important dominance...
like...
#template_content {
background: green !important;
}
then when you load in another style sheet, #template_content's background cannot be changed unless you have !important defined on the stylesheet you are loading in.