So in my last post, I was trying to track down and change one CSS element in Drupal. Specifically, the text that I use in the header of my site. This header is actually a node from a Custom Content Type That I added to the page via Panels. This may get a little confusing, so I am going to try to be thorough.
Since the text is a node, I can edit it via the CKEditor, which I have covered previously. What this means is that the styling of the node can be edited directly within the editor. This will add the styling as an Inline CSS element. So, using Firebug, I can see the styling, but there is no CSS file reference. Makes sense because it is Inline.
So, how do I edit it? I really want to avoid making this complicated and getting into the TPL files, messing with the themable functions and all that. I do want to be able to do those things but I want to KISS – Keep It Simple Stupid. So, if I go to the actual piece of content in CKEditor and click the Source button, I can see the inline CSS! Awesome. And, I can edit it. This is where it gets quirky.
I add this CSS to the source on the CKEditor screen. The added parts are bolded:
<p><span style=”font-family:trebuchet ms,helvetica,sans-serif”><span style=”color=white”><span style=”font-size:36px”>DOCResource.org</span></span></span></p>
I then save and check the page. And the changes are there. Great! In Firebug, I see the new CSS with no reference to a CSS file, Great! BUT, when I go back to CKEditor and look at the source of that piece of content again, there is nothing listed for the color. And I believe this is because the Colorbutton option in CKEditor has an issue. The button doesn’t show up and actually, when the option is checked (I have the proper library installed) in the CKeditor setup (under configuration in the Drupal Admin) the CKEditor breaks and won’t show the content at all. This is an issue that others have run into before. But, I DON’T want to spend a whole lot of time running down yet another Drupal Quirk. So, I just work around it. At least I understand how it all works. And why it doensn’t.
<p><span style=”font-family:trebuchet ms,helvetica,sans-serif”><span style=”font-size:36px”>DOCResource.org</span></span></p>
This is what I see when I go back to the content that is now appearing in white. as you can see the color:white css reference is gone. Without the library working properly, you can’t even see the reference in the editor. But the editor does allow you an easy way to add the inline css anyway. WHEW!
UPDATE – If you edit that piece of content again, the change will have to be readded or it will disappear. Ug. That means I have to fix CKEditor…..
landie.tech 