Changing css styles in the Composer window

Posted in: Newspaper
Post count: 15

I have some custom CSS added in ThemePanel to change how block quote looks on the site (I’ve put that at the end).

However when our authors are composing in the visual editor, block quotes ALWAYS come out in CAPSLOCK and centred and I can’t figure out how to change this.

Just for the record I upgraded to 7.0 a few minutes ago (including apply a couple of customisations of my own) and everything is working fine.


.post blockquote p{
padding-left: 10%;
padding-right: 5%;
text-align: justify;
line-height: inherit;
font-style: italic;
}

.td-page-content blockquote p,.td-post-content blockquote p,.wpb_text_column blockquote p,.td_block_text_with_title blockquote p,.bbpress blockquote p,.woocommerce #tab-description blockquote p,.mce-content-body blockquote p,.comment-content blockquote p{
font-family:inherit;
font-size:inherit;
line-height:inherit;
font-weight:inherit;
font-style:italic;
text-align:justify;
text-transform:inherit;
color:inherit;
padding-left: 10%;
padding-right: 5%;
}

Post count: 23312

Hello David L,

If this code is working fine on Newspaper 7 and if you need more assistance in this regard, please provide your website URL so I can inspect it closer.

Thank you for your understanding!

Post count: 15

The CSS works fine for the pages that visitors see on the blog.

Typical page

It’s only when composing that the author sees a hard to work with format (the block capital letters in particular make editing hard because copy pasting picks up the all caps).

Screen shots:

Screen shots of the composer and a blog page
Screen shots of the composer and a blog page

  • This reply was modified 10 years by David L.
Post count: 23312

Hello David L,

Please notice that are existing two different style sheets -> editor-style.css which is the style for your backend editor and the style.css which is the style for your frontend. When you add your code in your Theme panel->Custom CSS area, the code will be applied only for your frontend (style.css) and not for your backend. If you want to have the same style, you have to add your code into your editr-style.css , like this -> http://screencast.com/t/yeYMQbW1T

Hope this helps!

Thanks!

Post count: 15

Grrrr I tried… really. CSS always does my head in.

When I paste in the exact CSS that works for the main site nothing happens.

When I search through that file and cut out the offending bits and replace them, nothing happens.

Not sure what I’m doing wrong:


/* Changed by Brian of London 2016-05-09 */
/* Justify block quotes and move them to the right 10% */

.td-page-content blockquote p,
.td-post-content blockquote p,
.wpb_text_column blockquote p,
.td_block_text_with_title blockquote p,
.bbpress blockquote p,
.woocommerce #tab-description blockquote p,
.mce-content-body blockquote p,
.comment-content blockquote p {
font-family:inherit;
font-size:inherit;
line-height:inherit;
font-weight:inherit;
font-style:italic;
text-align:justify;
text-transform:inherit;
color:inherit;
padding-left: 10%;
padding-right: 5%;
/* responsive portrait tablet */
/* responsive portrait phone */
}

/* font-family: 'Roboto', sans-serif; */
/* font-size: 32px; */
/* line-height: 40px; */
/* font-weight: 400; */
/* font-style: italic; */
/* text-align: center; */
/* text-transform: uppercase; */
/* color: #4db2ec; */
/* word-wrap: break-word; */

Post count: 23312

Hello David L,

Please be aware that the classes could be different of the backend side and probably because of this your code not working fine. Also, please notice that this request is not theme related and involve custom work and please notice that we cannot provide customization services at the moment, sorry! As a hint, you have to use your inspector from your backend and check the right classes in this regard and then you have to do it yourself this task. -> http://screencast.com/t/b2ithD1zJllb

Thank you for your understanding!

Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in to reply to this topic.