Jump to content

tinymce not working properly with edited css file


Recommended Posts

I'm using a theme where the developer seems to have taken out the tinymce tags out of the css file. The problem is when I go to the product description and then try to change colors or fonts it doesn't show the change in the editor. It seems to just keep the same settings. Sometimes it will make the font bigger and sometimes not. Seems random what can be edited and what cannot. When I replace the css file with the PS default everything works fine. Does anyone know what's missing in css file to get it to work properly with the edited version? I tried copying over the tinymce tags from the default but it still seems to be having the same issue.

Link to comment
Share on other sites

So you tried replacing the /* global RTE fields */ section with the following?

/* global RTE fields */
div.rte,
.mceContentBody {
   text-align: left;
   background: white;
   color: black
}
body.mceContentBody {
   margin: 9px 6px;
   width: 556px
}
div.rte html, div.rte div, div.rte span, div.rte applet, div.rte object, div.rte iframe, div.rte h1, div.rte h2, div.rte h3, div.rte h4, div.rte h5, div.rte h6, div.rte p, div.rte blockquote, div.rte pre, div.rte a, div.rte abbr, div.rte acronym, div.rte address, div.rte big, div.rte cite, div.rte code, div.rte del, div.rte dfn, div.rte em, div.rte font, div.rte img, div.rte ins, div.rte kbd, div.rte q, div.rte s, div.rte samp, div.rte small, div.rte strike, div.rte strong, div.rte sub, div.rte sup, div.rte tt, div.rte var, div.rte dl, div.rte dt, div.rte dd, div.rte ol, div.rte ul, div.rte li, div.rte fieldset, div.rte form, div.rte label, div.rte legend, div.rte table, div.rte caption, div.rte tbody, div.rte tfoot, div.rte thead, div.rte tr, div.rte th, div.rte td,
.mceContentBody html, .mceContentBody div, .mceContentBody span, .mceContentBody applet, .mceContentBody object, .mceContentBody iframe, .mceContentBody h1, .mceContentBody h2, .mceContentBody h3, .mceContentBody h4, .mceContentBody h5, .mceContentBody h6, .mceContentBody p, .mceContentBody blockquote, .mceContentBody pre, .mceContentBody a, .mceContentBody abbr, .mceContentBody acronym, .mceContentBody address, .mceContentBody big, .mceContentBody cite, .mceContentBody code, .mceContentBody del, .mceContentBody dfn, .mceContentBody em, .mceContentBody font, .mceContentBody img, .mceContentBody ins, .mceContentBody kbd, .mceContentBody q, .mceContentBody s, .mceContentBody samp, .mceContentBody small, .mceContentBody strike, .mceContentBody strong, .mceContentBody sub, .mceContentBody sup, .mceContentBody tt, .mceContentBody var, .mceContentBody dl, .mceContentBody dt, .mceContentBody dd, .mceContentBody ol, .mceContentBody ul, .mceContentBody li, .mceContentBody fieldset, .mceContentBody form, .mceContentBody label, .mceContentBody legend, .mceContentBody table, .mceContentBody caption, .mceContentBody tbody, .mceContentBody tfoot, .mceContentBody thead, .mceContentBody tr, .mceContentBody th, .mceContentBody td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline
}
div.rte h1, div.rte h2, div.rte h3, div.rte h4, div.rte h5, div.rte h6,
.mceContentBody h1, .mceContentBody h2, .mceContentBody h3, .mceContentBody h4, .mceContentBody h5, .mceContentBody h6 {
   margin: 0.75em 0 0.3em 0;
   color: #374853
}
div.rte h1, 
.mceContentBody h1 {
   font-size: 25px;
   font-weight: bold
}
div.rte h2,
.mceContentBody h2 {
   font-size: 20px;
   background: none;
   text-transform: none;
   height: auto
}
div.rte h3, .mceContentBody h3 { font-size: 16px }
div.rte h4, .mceContentBody h4 { font-size: 14px }
div.rte h5,.mceContentBody h5 { font-size: 12px }
div.rte h6, div.rte h6 { font-size: 8px }
div.rte ol, .mceContentBody ul, div.rte ol, .mceContentBody ul { padding-left: 2em }
div.rte ul, .mceContentBody ul {
   list-style-type: square;
   margin-left: 10px
}
div.rte strong, .mceContentBody strong { font-weight: bold }
div.rte em, .mceContentBody em { font-style: italic }

/* tables still need 'cellspacing="0"' in the markup */
div.rte table,.mceContentBody table {
   border-collapse: separate;
   border-spacing: 1px;
   width: auto
}
div.rte caption, div.rte th, div.rte td, div.rte table,
.mceContentBody caption, .mceContentBody th, .mceContentBody td, .mceContentBody table {
   text-align: left;
   font-weight: normal;
   background: none;
   height: inherit;
   border: 1px #e5e6e7 solid;
   text-align: center
}
div.rte th, .mceContentBody th {
   padding-left: 1em;
   padding-right: 1em;
   background: #e5e6e7
}
#center_column div.rte p, 
.mceContentBody p { padding-left: 0; margin: 0.5em 0 }
div.rte ol, .mceContentBody ol {
   list-style-type: decimal;
   margin-left: 10px
} 

/* /global RTE fields */

Link to comment
Share on other sites

Hey Rocky,

Thanks for the input. I did put the values you suggest in but I'm still getting a very intermittent kind of bug. It appears it will sometimes make changes to the text. Other times for example you try to change a color it will instead make the font large and keep the same color. Sometimes the bold does not work. It appears it's missing some values that are confusing tinymce? Currently below is how it is laid out. I did exchange your values posted but the problem still persists?. Am I missing something? Is the text set to some global setting? Is there a way to do a global setting for product descriptions? I would like to get it working like it does in the default. I did put the default css file from the psdemo and it works no problem. So it's for sure the edited css file. Just don't know where the problem is occurring. Much appreciated!


/* global RTE fields */

div.rte html, div.rte div, div.rte span, div.rte applet, div.rte object, div.rte iframe,
div.rte h1, div.rte h2, div.rte h3, div.rte h4, div.rte h5, div.rte h6, div.rte p, div.rte blockquote, div.rte pre,
div.rte a, div.rte abbr, div.rte acronym, div.rte address, div.rte big, div.rte cite, div.rte code,
div.rte del, div.rte dfn, div.rte em, div.rte font, div.rte img, div.rte ins, div.rte kbd, div.rte q, div.rte s, div.rte samp,
div.rte small, div.rte strike, div.rte strong, div.rte sub, div.rte sup, div.rte tt, div.rte var,
div.rte dl, div.rte dt, div.rte dd, div.rte ol, div.rte ul, div.rte li,
div.rte fieldset, div.rte form, div.rte label, div.rte legend,
div.rte table, div.rte caption, div.rte tbody, div.rte tfoot, div.rte thead, div.rte tr, div.rte th, div.rte td {
margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; background:transparent}
div.rte h1, div.rte h2, div.rte h3, div.rte h4, div.rte h5, div.rte h6 {margin: 0.75em 0 0.3em 0; }
div.rte h1 {font-size: 25px; font-weight:bold; }
div.rte h2 {font-size: 20px; background:none; text-transform:none;}
div.rte h3 {font-size: 16px;}
div.rte h4 {font-size: 14px;}
div.rte h5 {font-size: 12px;}
div.rte h6 {font-size: 8px;}
div.rte ol, div.rte ul {padding-left: 2em;}
div.rte ul {list-style-type:square;}
div.rte strong {font-weight:bold;}
div.rte em {font-style:italic;}

/* tables still need 'cellspacing="0"' in the markup */
div.rte table {border-collapse: separate; border-spacing: 1px; width:auto; }
div.rte caption, div.rte th, div.rte td, div.rte table {text-align: left; font-weight: normal; background:none; height:inherit; border:1px #e5e6e7 solid; text-align:center;}
div.rte th {padding-left:1em; padding-right:1em; background:transparent}
div.rte p {margin:0.5em 0pt; background:transparent }

Link to comment
Share on other sites

  • 2 weeks later...
×
×
  • Create New...