Support Forum

Advanced Search
Forum Scope


Match



Forum Options



Minimum search word length is 3 characters - maximum search word length is 84 characters
plugins-topic
Quote highlight on rich text editor and CSS Only
Avatar
Marco Rossi
Member
Free Members
sp_UserOfflineSmall Offline
Dec 3, 2012 - 12:40 pm

Hi all,

as per title I use rich text editor plugin and CSS Only theme, when a user quotes a post, the text appears in new post with right indentation but without any coloured background so isn't easy to understand where finish quote and start new text.

I couldn't figure out where to change this and how to assign a background colour to quotes inside new post, could you point me in the right direction?

TinyMCE WYSIWYG Editor 1.2

Thanks in advance

Marco

 

Hakuna Matata

Avatar
Yellow Swordfish
Glinton, England
SP Master
sp_UserOfflineSmall Offline
Dec 3, 2012 - 2:01 pm

All of the CSS rules regarding the content of a post are in the 'spPostContent' class so for blockquote you will need to find:

#spMainContainer .spTopicPostSection .spPostSection .spPostContentSection .spPostContent blockquote

where you change the background colour...

andy-signature.png
YELLOW
SWORDFISH
Avatar
Marco Rossi
Member
Free Members
sp_UserOfflineSmall Offline
Dec 3, 2012 - 2:36 pm

Yellow Swordfish said

All of the CSS rules regarding the content of a post are in the 'spPostContent' class so for blockquote you will need to find:

#spMainContainer .spTopicPostSection .spPostSection .spPostContentSection .spPostContent blockquote

where you change the background colour...

Thanks Andy but seems that those code affects only how to post is shown, and not also inside the editor, may be a screenshot could help to explain better.

I tried with another theme too, same result.

Any other place where I can look at?

quoted-text-without-background.pngImage Enlarger

 

Hakuna Matata

Avatar
Yellow Swordfish
Glinton, England
SP Master
sp_UserOfflineSmall Offline
Dec 3, 2012 - 2:50 pm

Ah - misunderstood.

OK in the SP tinymce plugin folder navigate to:

/tinymce/themes/advanced/skins/o2k7/ and in there you will find a file called 'content.css'.

Make a copy of that file and place it in your SP theme /styles folder. Do NOT move it - copy it.

that is the file that controls the editor CSS applied during editing and you should find the blockquote in there - or you can add it. If it is any help for a starter we use:

blockquote {
    overflow: hidden;
    background: #f0f0f0;
    color: #000000;
    border: 1px solid #cccccc;
    margin: 0 0 1em;
    padding: 1em 1em 0 1em;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-weight: normal;
    font-size: 100%;
    line-height: 1.2em;
}

which works here on this site.

before you do that let's just ask Steve or Brandon if I got that right! ??

 

andy-signature.png
YELLOW
SWORDFISH
Avatar
Marco Rossi
Member
Free Members
sp_UserOfflineSmall Offline
Dec 3, 2012 - 3:39 pm

Thanks Andy,

it works! :)

In my case I also modified the "p" tag adding a transparent background to avoid white text highlight

from

p {padding-bottom: 5px;}

to

p {padding-bottom: 5px; background: none repeat scroll 0 0 transparent;}

and all works fine.

Thanks again

Marco

 

 

Hakuna Matata

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Dec 3, 2012 - 3:58 pm

Sort of. I don't think you will find a blockquote style in there. But yes, copy that file over, then add your blockquote or any other styling at the bottom.

Please note, you may need to do it again after next tinymce plugin release since we are switching to wp version of tinymce.

Avatar
Marco Rossi
Member
Free Members
sp_UserOfflineSmall Offline
Dec 3, 2012 - 4:02 pm

Mr Papa said

Please note, you may need to do it again after next tinymce plugin release since we are switching to wp version of tinymce.

Good news, Steve :)

Hakuna Matata

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Dec 3, 2012 - 7:37 pm

you may not notice the wp tinymce editor being used... but it will be integrated better... 

when you get it, you will likely want to copy the content.css from our skins we provide and make your changes again...  otherwise you will some styles since the wp editor styles get stomped on in the front end...  plus you will be able to chose from 5 different skins/variants with the new editor - you might find one you like better... like the one we use here ;)

Avatar
Meztli
Sweden
Member
sp_UserOfflineSmall Offline
Oct 12, 2013 - 4:54 am

Sorry, to open a old thread.

Are above guidelines not working with the last SP version?

I did add:

blockquote {
overflow: hidden;
background: #f0f0f0;
color: #000000  ;
border: 1px solid #cccccc;
margin: 0 0 1em;
padding: 1em 1em 0 1em;
-webkit-border-radius: 5px;
border-radius: 5px;
font-weight: normal;
font-size: 100%;
line-height: 1.2em;
}

to the content.css of the tinymce theme Cirkuit (i actualy did try all four themes), but i did not get a background color inside the editor when you quote. Like you have here at this forum and which help a lot.

Cheers

 

Avatar
Brandon
U.S.
SP Wrangler
Free Members
sp_UserOfflineSmall Offline
Oct 12, 2013 - 11:09 am

Did you copy the content.css file over to the SP theme's /style folder then change it?

After you do that you should be able to use something like Firebug to see if it is using that css file and the styling. If not then you may have some other blockquote styling from your WP theme overriding it.

Forum Timezone: Europe/Stockholm
Most Users Ever Online: 1170
Currently Online:
Guest(s) 1
Currently Browsing this Page:
1 Guest(s)
Top Posters:
Mr Papa: 19448
Ike: 2086
Brandon: 864
kvr28: 804
jim: 650
FidoSysop: 577
Conrad_Farlow: 531
fiddlerman: 358
Stefano Prete: 325
Member Stats:
Guest Posters: 619
Members: 17363
Moderators: 0
Admins: 4
Forum Stats:
Groups: 7
Forums: 17
Topics: 10127
Posts: 79625