CkEditor - how to change the look - ckeditor

I'm a pretty newbe at html, css, etc. etc.
I just downloaded the CkEditor and it works perfect. I use the inline editor replacing a textarea. Now I would like to change the look a bit
a) I would like to have the editable area with a different background color
b) I would like to have a thin line around the area
How can I do this? As far as I understood I need to manually change that in one of the css files - but where, and what do I need to put in there?
ALso I tried to configure the toolbar using the configuration tool and although I opted for the button "source-code" it won't show up? How can I manually include this in the toolbar?
Sorry, I know that these are very basic questions and I tried to search for answers on the forum (but the only things I found where some years old, and trying to duplicate what was posted didn't work... - guess it changed with the new version of ckeditor).

Related

Joomla 3.8: how to configure standard spacing properties?

I´m rookie in Joomla. I'd like to do a fine-adjustment in the presentation of a bunch of icons in a toolbar that I've created using logo/image components in the layout editor for a certain theme. These icons are being presented with a too wide spacement between one another, and it seems that the cause is the property flex in the css file nucleus.css (.size-5 element, according to inspections in Firefox).
I'd like to know how to resolve this spacement issue, perhaps changing paramenter's values in this css file, if there is no other way. Thanks for any help.

Work in 'source mode' but enable toolbar buttons

I am building a simple forum on my website using CKEditor as a BBCode editor. I managed to make CKEditor output BBCode just fine by following the example.
However, I do not want to use the 'WYSIWYG' interface. I just want a plain "bbcode source" editor. The WYSIWYG output is not exactly the same as how the output will look on my forum (because I translate the bbcode to html myself and then apply some additional styling) and I don't really like the difference. More importantly, I have a couple "custom bbcode" tags that make no sense outside of my forum and obviously CKEditor doesn't know what to do with them, so I get a mix of bbcode and WYSIWYG output which looks odd.
I can force the CKEditor into 'source mode' by setting the startupMode and removing the source button, but when I do that it disables the entire toolbar!
I want to work in source mode, but still use the various buttons like B, I, etc. When such a button is pressed I just want it to insert the [b] [/b] tags for example around the selected text.
This is pretty much how every forum I've ever seen works, but I can't figure out how to configure CKEditor to do this.
Unfortunately it's impossible. Most of the plugins require WYSIWYG mode and don't work without it.
However you could try to control the output of the editor and change it according to your needs by adjusting editor's filter or implementing custom data processor.

CKEditor -- Use Custom Style Sheet with Editor

I have been trying to work out how to get my own website's custom stylesheet to be recognized by CKEditor. The fontsize on my site is 19px, and for CKEditor it's much smaller. I would like the software to recognize my styles. I don't need (at the moment) custom styles added to dropdowns (and I see information in the docs on how to do that). It just seems odd that if my whole site uses a specific font, font size, font color, and so on that the editor doesn't seem to recognize them. This may be basic, and I've just looked past it or misunderstood something, but I can't figure it out. Thanks!
You may want to look at the contents.css (file is inside CKEditor folder), that is the stylesheet used for content inside the CKEditor. You will need to change the contents.css according to your need, in this case you want to change the font styling so it match with your current site.

Webpage hosted HTML editor that graphically shows tag nesting in WYSIWYG view

I once found a webpage hosted HTML editor that optionally included the tags, as highlighted colour coded elements with the tag type, in the (almost) WYSIWYG view, but now cannot find the project anywhere.
I thought it an excellent compromise between WYSIWYG ease of use an markup flexibility.
Does anyone know which editor this was? Or maybe there is more then one editor with this feature?
Here is one that looks promising.
http://koivi.com/WYSIWYG-Editor/
This appears to match your request.
I found one such, and only one. Unfortunately it isn't the one I had seen before and so I'm still looking. They are called What You See Is What You Mean editors - WYSIWYM.
WYMeditor
Also see - http://en.wikipedia.org/wiki/WYSIWYM

Ajax Image gallery / Open, Close Window Effect

Can anyone point me in the direction of such a script? It should also be able to work when called into another ajax window. This is the type of gallery i am going for:
http://dageniusmarketer.com/DigitalWonderland/pages/DemoGalleryExample.html
It should go on this page:
dageniusmarketer.com/DigitalWonderland/
Portfolio section.
This script should be real simple to use with minimal extra files to make it work. I also should be able to just drop images in a gallery folder and it populates the gallery automatically with thumbnails....I shouldnt have to write code for each image in my html. Should be all dynamic.
I also would like to know how I could go about a window effect where every time I open up a new section via my navigation, the window shrinks closed with the old content, then expands open with the new content. the window effect should be vertical (top to bottom shrink into center, expand from center top to bottom)
Please Let me know. Thanks
JQuery is one of my personal favorite javascript libraries (along with 99% of this site apparently!)
But it will have a learning curve, as your requirements seem pretty specific, and you will have to read some documentation to pull it off.
Try Spry from Adobe. They have a very similar demo. Also, the other common frameworks for this would be prototype/scriptaculous, dojo, mootools, jquery. In many cases they have extensions that would provide the exact thing you are looking for. For example, try
shadowbox extension which is framework agnostic. Best of luck!
Imago looks promising:
http://imago.codeboje.de/
Just discovered the very awesome-looking jQuery Tools library today. Meets your "simple and minimal" requirements and could probably pull off what you've sketched, with just the "tooltips" and "scrollable" components.
I also should be able to just drop images in a gallery folder and it populates the gallery automatically with thumbnails
My instinct is that you'd be better off writing server-side code to handle this part of your requirement.

Resources