0

I have a custom css file in my custom theme folder which has a few changes I made throughout site but does not affect the tinymce editor but probably overrides it making so no changes in text.

I have two problems, one I don't actually know what to put in separate custom css to make buttons work in tinymce editor. I am used to finding a specific div or creating one and then adding the css. I am not familiar with setting up classes for this editor (as it offers in wysiwyg profiles) and correct syntax to do so. Also I would have thought I needed to bring over a generic copy of the css for the editor into my custom theme folder (?) And two I am unclear on how to set the path in define css for the editor profile, if ever I manage to create of find the correct file.

I hope I am making some sense and my question is clear enough.

Improve this question
2
  • I'm not really sure what you question is. Is your CSS file not loading at all in TinyMCE? Or are you having troubles with getting it to show certain styles? Have you defined it at admin/config/content/wysiwyg?
    – Ambidex
    Commented Feb 18, 2013 at 8:17
  • Bold and Italic is not working at all.I don't have a css file to correspond with the editor, that is the first part of my question- do I copy it over from somewhere in wysiwyg module folder to my theme folder? Then how do I set the path correctly to it in 'define css'? They offer different options for path setting like %b which I find confusing.
    – cea
    Commented Feb 18, 2013 at 8:39

1 Answer 1

Reset to default
2

First, let me add that the answer that I am about to give is the way I would handle it. This could be done in many ways.

Create a separate stylesheet for your text styling (we usually call it style-type.css) and place it somewhere appropriate in your theme (for example /sites/all/themes/your_theme/css/style-type.css), also use this file for your front-end. Only add styling in this stylesheet for textual styling, so for h1, h2, strong, em, etc...

Then use the admin/config/content/wysiwyg admin page to define the CSS in the appropriate format. We mostly don't use the replacement patterns (like %b) and simply fill in the path relative to your Drupal install (of course, the patterns could be applicable in your case): /sites/all/themes/your_theme/css/style-type.css. Make sure Define CSS is the active option above the path.

If you need extra styling for stuff like highlighted text, simply make sure you have that styling in your style-type.css. For example .highlighted { color: yellow; }. And then define it in the CSS Class textarea as follows:

Highlighted=highlighted

Then also make sure you've got the plugin Styles enabled. This will give you a dropdown list on the WYSIWYG editor which allows you to add styling that you defined to texts.

Improve this answer
7
  • I will give this a go and report back. It has GOT to work! Thanks.
    – cea
    Commented Feb 18, 2013 at 9:15
  • Can I ask do I just add the list of styles as a declaration of what will be included? Because there is no section I am styling as such...
    – cea
    Commented Feb 18, 2013 at 9:17
  • Do you mean the textarea CSS Classes? You can leave it empty if not applicable. If you do leave it empty and do not want to show any styling classes in the WYSIWYG editor styles dropdown menu, you should disable the plugin Styles, since otherwise it will search for all the classes and show them all since you did not define any classes.
    – Ambidex
    Commented Feb 18, 2013 at 9:23
  • I just want bold and italic to work, they are only ones not working.
    – cea
    Commented Feb 18, 2013 at 9:25
  • Are you resetting the strong and em styling with your CSS? If not, and still not working, you could define them yourself in the defined stylesheet, like: strong { font-weight: bold; } Still, you should actually try to inspect your element to find out what is resetting your styling.
    – Ambidex
    Commented Feb 18, 2013 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.