Styling comments widget textarea

Posted by Community Admin on 04-Aug-2018 19:21

Styling comments widget textarea

All Replies

Posted by Community Admin on 07-Jun-2014 00:00

Hello,

I'm having issues with styling the out-the-box comments widget textarea. I could be going mad (i am working at 8pm on a saturday so i must be pretty much) but in the webform that you open via Thunder there is an html textarea but for some unknown reason this is getting converted to some table with and embedded iframe and a body tag being used as the textarea !??! This is some weird stuff. There is also a textarea with display:none hanging out next to it. Removing this textarea or altering it throws errors so i will assume it's needed how it is.

So ok this textarea is being converted into other html for some reason but how can i style this iframe and it's contents? I've seen this article - www.sitefinity.com/.../restyling_the_comments_box_radeditor_throughout_sitefinity however adding a css file through here doesnt show up inside this strange iframe. I've been through loads of places in the 'Advanced settings' adding classes here and there but nothing shows up. I've cleared my cache a thousand times so it aint that.

Can anyone help. I think I AM loosing my mind..

Cheers.

Posted by Community Admin on 09-Jun-2014 00:00

Hello Jack,


Since version 6.2 of Sitefinity a new concept of Comments
API is introduced along with new Comments widget. This new comments
widget is based on the kendo editor, unlike the old one which uses the
RadEditor. This allows the end user to style the text in comments message, or
to add complex objects in the comments like image, hyperlink and so on.

Therefore if you are using SItefinity 6.2 or higher you can
try the following steps in order to customize the editor (this walkthrough will
help you add a toolbar on the editor):


1)     
Select Edit for the CommentsWidget

2)     
From the Submit
comment view template choose Comments
submit form and click Edit selected
template



3)     
Find text area with id="commentEditor"
and add class to it:

class="myKendoEditor"

4)     
Add the following snippet at the bottom:

  <script>
    jQuery(document).ready(function ()
        var kendoEditor1 = jQuery(".myKendoEditor").data("kendoEditor");
        kendoEditor1.toolbar.element.show();
        jQuery(".sfcommentsTitleWrp").hide()
      );
</script>


5)     
Click Save
Changes

For more information about the properties and

styling options of the Kendo Editor you can check the Kendo documentation.

If you need any additional information on this matter please
do not hesitate to ask.

 

Regards,

Elena

Posted by Community Admin on 10-Jun-2014 00:00

cool this worked. thanks

This thread is closed