CKEditor removing inline CSS - css

It might sound like a duplicate of a lot of questions, but what differs in this is that I am building a mail body in CKEditor where I must apply inline-css as I don't have class in the user's mailbox.
I am applying inline-css but that is removed automatically by CKEditor. Any solution or suggestion for this?

You might not have configured the allowed content.
see: http://docs.ckeditor.com/#!/api/CKEDITOR.feature-property-allowedContent

Related

External css not working in Broadleaf Email Templates

I am using a custom email template in broadleaf. In that I am unable to use external css file.It's only allowing inline css. Is it will function like that or Is i am doing anything wrong.
This is how i am referring my css file
Both are not working.Kindly Have your say on this friends.
Most likely the email client will block external links and therefore your mail will not appear as you think it should. So its better you write the inline css for emailer.

Is there a need for and way to define this in css?

This code is part of a facebook plugin called facepile and i was wondering if its possible and needed to define this code in css or leave it in the body as is?
data-width="200" data-height="64" data-max-rows="2" data-colorscheme="dark" data-size="medium" data-show-count="true"
You can access the data-attribute with CSS with [data-size] for example, but it wouldn't make much sense in this case, as the attributes are used to define the options for the facebook plugin
So just leave it as it is, or if you want, change the attributes to your liking:
data-height="100"
This would probably make the facebook plugin higher.

Twitter Bootstrap - Explanation of the Customization Page

If you go to http://twitter.github.com/bootstrap/customize.html you can customize Twitter-Bootstrap's css & js files to only include what you need.
However, I don't really understand things like "Code and pre" and have no idea if I need it or not. Is there a resource that goes over the properties of each checkbox option so I have a better idea if I should include it or not?
I'm not sure if there is a resource for that, try downloading only the sections that you have concerns about and inspect them.
about CODE and PRE:
<code> vs <pre> vs <samp> for inline and block code snippets
So that check box is for specific styles for these text elements.
have no idea? you can download all component! http://twitter.github.com/bootstrap/assets/bootstrap.zip

How to create CSS internal style sheet in CakePHP

I have been using CakePHP for a while and recently needed to send emails from an app. Unfortunately I can not figure out a way to tell CakePHP to include the css directly in the document as an internal style sheet instead of a link. I know people think that is a bad idea, but my app is only sending emails to our company so I'm not worried too much about someone's email client messing it up. If I just include the link it doesn't work since the reference is wrong, although if I could make the link an absolute link (http://myserver/css/myfile.css instead of /css/myfile.css) that would be a 2nd best alternative since they would have access to my server.
If there isn't a way to do it in Cake, is there a quick way to just use PHP to read the contents of the file and dump it in the view? I guess I could do that from the controller, sounds like a bad hack though.
Any ideas would be appreciated, thanks
You could use readfile() to print the file content directly in your view.
Or you could $this->Html->url('css/yourcss.css', true) to get the full path to the file and pass it too the css method.
I would like to suggest you to use php variable as style class and use it directly as css class. For example.
$class1 = "border : 1px solid #eeeeee; font-family : font1, font2, font3; color : #785634;"
And use it in your email template as
<div id='my-div' style=<?php echo $class1; ?>>Your div content </div>
Even I do not know any way to include style sheet in the email, and if you create some classes those will not work in email templates.
So this is how I'm using css in my projects.
you can put the css in email layout like normal html (use html email layout)
<style type="text/css"></style>
Reviewing the code of the htmlHelper shows that it can't be done.
However, you can change or overload the helper; to do so in the simplest way just add a new option between line 371 to 378.
I used PHP's include function enclosed in a script tag and it worked perfectly! In the default email view:
<script>
include('css/your_css_doc.css');`
</script>
You can write css inline:
<h2 style="color:#818381">Here are the latest stories everyone's talking about...</h2>

Minify inline css code before its written to database, then unminify it when editing

My theme has a custom css code block where I allow the site owner to add any custom css they need directly to the head section of the theme. This inserts whatever they've placed in this block into the wordpress database as a custom option insert.
I then retrieve this content into header.php and output it between an inline style tag like so...
<style type="text/css">
.test h1 {}
.testcss2, .somecss {}
</style>
This works perfectly fine, however, I would like to clean up and minify the markup when its written to the database. I suppose a regex is needed to do this? If so, what would that be?
The result I'm looking for, when the code is written into the page's markup is...
<style type="text/css">.test h1{}.testcss2,.somecss{}</style>
I'd also like to reverse the minified markup when its presented back to the user to edit in my theme options. In that view, I just want to reformat the minified css code so that each directive is back on its own line.
It depends what you want achieve by doing this. I agree with #thomasfedb that you will likely messup the style of most peoples CSS by doing this transformation and will likely cause more trouble than its worth.
It's my suggestion that you keep the data exactly as the user entered it, and then 'minify' it when you render it to the page.
This will not save you and storage in your database, and it will increase your CPU usage per page render, but it will save you the bandwidth of all the extra new-line characters.
Another option, presuming database storage is not much of a concern, is to store the data twice, once where the user edits, and once minified. Then simply minify and copy the user-editable field into the minified field whenever the user makes any changes.
I don't see any real reason to do this, a few newline charactors in a webpage isn't realy going to cost you very much page-weight.
Therefore my solution would be: don't.
Also, even if you reverse the minification, you might 'mess with the style' of some people, who like different css layouts.

Resources