You are here

picture_wysiwyg.css in Picture 7.2

Same filename and directory in other branches
  1. 7 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-mapping="[The machine name of your picture mapping]"
  span[data-picture-mapping="wide"] {
    width: 100%;
  }
  span[data-picture-mapping="normal"] {
    width: 50%;
  }
  span[data-picture-mapping="narrow"] {
    width: 33%;
  }
  span[data-picture-mapping] 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"],
  7. img[data-picture-align="left"] {
  8. float: left;
  9. }
  10. span[data-picture-align="right"],
  11. img[data-picture-align="right"] {
  12. float: right;
  13. }
  14. span[data-picture-align="center"],
  15. img[data-picture-align="center"] {
  16. display: block;
  17. margin-left: auto;
  18. margin-right: auto;
  19. }
  20. /* Remove ugly boarders that bunch up in the image dialog table. */
  21. .cke_dialog_body tr td:last-child {
  22. border-right: 0px;
  23. }
  24. /* The following is an example of what you could put in your theme
  25. * to control the size of images. It is formatted as
  26. * span[data-picture-mapping="[The machine name of your picture mapping]"
  27. span[data-picture-mapping="wide"] {
  28. width: 100%;
  29. }
  30. span[data-picture-mapping="normal"] {
  31. width: 50%;
  32. }
  33. span[data-picture-mapping="narrow"] {
  34. width: 33%;
  35. }
  36. span[data-picture-mapping] img {
  37. width: 100%;
  38. height: auto;
  39. }
  40. */