You are here

picture_wysiwyg.css in Picture 7

Same filename and directory in other branches
  1. 7.2 picture_wysiwyg.css
/* This CSS file needs to be included either in the theme used for
* editing content in order to be included in the WYSIWYG edit iframe,
* or specifically included in the WYSIWYG config page's
* "Define CSS" textfield.
*/
span[data-picture-align="left"], img[data-picture-align="left"]  {
  float: left;
}
span[data-picture-align="right"], img[data-picture-align="right"]  {
  float: right;
}
span[data-picture-align="center"], img[data-picture-align="center"]  {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Remove ugly boarders that bunch up in the image dialog table. */
.cke_dialog_body tr td:last-child {
  border-right: 0px;
}
/* The following is an example of what you could put in your theme
 * to control the size of images. It is formatted as
 * span[data-picture-group="[The machine name of your picture group]"
span[data-picture-group="wide"] {
  width: 100%;
}
span[data-picture-group="normal"] {
  width: 50%;
}
span[data-picture-group="narrow"] {
  width: 33%;
}
span[data-picture-group] img {
  width: 100%;
  height: auto;
}*/

File

picture_wysiwyg.css
View source
  1. /* This CSS file needs to be included either in the theme used for
  2. * editing content in order to be included in the WYSIWYG edit iframe,
  3. * or specifically included in the WYSIWYG config page's
  4. * "Define CSS" textfield.
  5. */
  6. span[data-picture-align="left"], img[data-picture-align="left"] {
  7. float: left;
  8. }
  9. span[data-picture-align="right"], img[data-picture-align="right"] {
  10. float: right;
  11. }
  12. span[data-picture-align="center"], img[data-picture-align="center"] {
  13. display: block;
  14. margin-left: auto;
  15. margin-right: auto;
  16. }
  17. /* Remove ugly boarders that bunch up in the image dialog table. */
  18. .cke_dialog_body tr td:last-child {
  19. border-right: 0px;
  20. }
  21. /* The following is an example of what you could put in your theme
  22. * to control the size of images. It is formatted as
  23. * span[data-picture-group="[The machine name of your picture group]"
  24. span[data-picture-group="wide"] {
  25. width: 100%;
  26. }
  27. span[data-picture-group="normal"] {
  28. width: 50%;
  29. }
  30. span[data-picture-group="narrow"] {
  31. width: 33%;
  32. }
  33. span[data-picture-group] img {
  34. width: 100%;
  35. height: auto;
  36. }*/