Text inside a MultiLine text Box CSS

I have the following piece of CSS that sets the default text size of the form. The issue is it doesn't change the text size inside my multi-line text field.
Here is the CSS

fd-form *{
font-size:20px !important;
}

image

Dear @IT.Joe,
The contents of the editor are inside an iframe, you can use the following JavaScript to increase the text size:

fd.spRendered(function(){
    fd.field('RichText').ready().then(function() {
      var editorBody = $(".k-editable-area iframe").contents().find("body");

      editorBody.css("font-family", "Arial");
      editorBody.css("font-size", "36pt");
    });
});

Thanks. I couldn't get this to work but it may be because I am using public form as opposed to Sharepoint Form.

Dear @IT.Joe,
You can try using an event for the public web form (no need to use ready() here):

fd.rendered(function(){
    var editorBody = $(".k-editable-area iframe").contents().find("body");

    editorBody.css("font-family", "Arial");
    editorBody.css("font-size", "36pt");
});

Hi @Nikita_Kurguzov how do we use this on display form? Can we only change the font color of a link in this field?

Thanks!

Dear @aseem,
You can change anything that you want, CSS has that power - but what exactly do you need to adjust? What's the type of field? How does it look now? How do you what it to look?

Hi @Nikita_Kurguzov In SharePoint multiline enhanced text field, I am trying to display url in a different color. The text color and the url color looks same and it is hard for readers and need this on display form.

Dear @aseem,
It's possible that the field itself set the color for the URL in the rich text format, because normally the URL should be the color set in the SharePoint theme:
image

At the most basic level, you can try this CSS for the whole form:

.fd-form a{
  color: #2196F3!important;
}

Thanks! it does work for the whole form. Any possibility to have it only for the SP rich text field?

Dear @aseem,
Yes, you can! All you have to do is add a class to the field:
image

Then use it in your CSS code:

.fd-form .my-field a{
  color: #2196F3!important;
}

This worked great! Thank you.

Thanks @Nikita_Kurguzov for this solution. It works great on display form, I am trying it on new and edit forms too. Will I need to add Javascript and hopefully one last question :slight_smile: can the urls open in new window by default. I tried below but I think it is not proper syntax

.fd-form .my-field a{
color: #2196F3!important;
target: _blank;
}

Dear @aseem,
Yes, it's only possible with JavaScript, try this:

fd.spRendered(function(){
  $(".my-field .k-editable-area iframe").contents().append('<style> .fd-form a { color: #2196F3!important; } </style>');
});

Thanks @Nikita_Kurguzov ! I tried but may be I am missing something that it didn't work. I also used ready function but the background color change worked but the url color remained same (I am using Body as the class name and also the field name):

fd.field('Body').ready().then(function() {
$(fd.field('Body').$el).find('.k-editable-area')[0].style.backgroundColor = "red";
fd.field('Body').widget.body.style.backgroundColor = "red";
$(".Body .k-editable-area iframe").contents().append(' .fd-form a { color: #2196F3!important; } ');
});

Dear @aseem,
You don't need anything like this, you can copy my code from above, just make sure to add a class to the field you want change:
image

Hi @Nikita_Kurguzov, Tried below in new and edit, the color didn't change :(:

image

image

Dear @aseem,
My bad, some adjustments are indeed needed:

fd.spRendered(function(){
  fd.field('RichText').ready(function(){
    $('.my-field .k-editable-area iframe').contents().find('head').append('<style> .fd-form a { color: #2196F3!important; } </style>');
  });
});

Thanks @Nikita_Kurguzov this worked great, thanks much for your help!! Hopefully, one last question on this topic, is it possible to open the link in new tab by default in display view. I was trying to add the target in CSS: .fd-form .my-field a{
color: #2196F3!important;
target: _blank;
}

Dear @aseem,
That wouldn't work, it's not CSS, but HTML that needs to be changed for this with JavaScript:

fd.spRendered(function(){
  $('.my-field a').attr('target','_blank');
});

Links can also be created as such:
image

This is perfect! Thank you so much.

1 Like