Skip to main content

Freshplug / Question about style changes in typography

  • 5 April 2016
  • 1 reply
  • 23 views

I wanted to change the type style of our outgoing correspondence. Based on a code I was gives I use this:


<style>

.redactor_editor p {

   font-size: 17px;

   font-family: Helvetica;

   font-weight:300;

    color:#444444;

 line-height:22px;

 word-wrap: break-word; 

 -webkit-nbsp-mode: space; }

</style>


This works fine in the GUI: When writing a ticket answer, the typo looks great (while typing). However the email which arrives, does not reflect this type style. Am I right in the assumptions that the above code only changes the visual appearance in the GUI?


Question 1:

Would anyone have the right code to actually change the type style in the outgoing mails?


Question 2:

Would anyone have a list of other style names such as ".redactor_editor p", so I can start on other aspects of the GUI Typo? For example I also want to change the style in outgoing mails and tickets which I initiate.


Thank you for your help.

This topic has been closed for comments

1 reply

T
Rank
First of all, I presume you are talking about the result of Admin > Email Notifications > [ Edit for whatever notification ]

The problem is that you cannot directly edit the HTML code that is produced by the editing operation above. However, there are ways to deal with that. In my case, I use Firefox and have installed a browser Add-on called Firebug ( which you can get for free from http://getfirebug.com/ and for which I cannot say enough good things about ).

1) Suppose I am editing the New Ticket Created notification. I click the Inspect Element icon ( added by Firebug ):


2) When I click the Inspect Element icon, a new window appears at the bottom of the browser. I make sure I have selected the HTML tab and then point the cursor at the paragraph I want to edit and click on it. Notice that, when you are moving the cursor, the current element is highlighted in the webpage and its HTML code is highlighted in the bottom window.


 3) When I click on the paragraph, its code will be marked in the bottom window:




4) I now right-click on the selected HTML code and select Edit HTML ... from the menu:




5) When I select Edit HTML ... from the menu, the lower window goes into editing mode:




6) I now edit the HTML. I your case, I will change <p> into <p style="font-size: 17px; font-family: Helvetica; font-weight:300; color:#444444; line-height:22px; word-wrap: break-word; -webkit-nbsp-mode: space;"> Notice that as you type your HTML, it is instantly interpreted inside the browser ( ie the paragraph changes its style ).




7) When I am satisfied with the result, I click Save and I am done.


The above procedure has to be repeated for every notification and this makes it somewhat tedious. However, you can copy-paste notifications and sections of notifications to make your life easier. For example, once you have edited  New Ticket Created to your satisfaction you can copy the contents of the editing window, paste them into the editing window of Ticket Assigned to Group  and take it from there. You can also copy one paragraph and paste it.




Terms of Use