Customer Portal

Get Involved. Join the Conversation.

Topic

    Kim Dante
    Where can I set the default font on answer detail page...
    Topic posted November 15, 2016 by Kim DanteGold Medal: 3,500+ Points, last edited November 15, 2016 
    331 Views, 21 Comments
    Title:
    Where can I set the default font on answer detail page answer text?
    Content:

    We need to set default font of answers on customer portal to Verdana 12.  In the console the default font when creating an answer is Verdana 12, but that is not what is displayed on the portal.  Strangely we need to edit each answer, highlight the text change it to something other than Verdana 12, save it, and then highlight it a second time and change it back to Verdana 12.  This is the only way to get the proper font tag.  Is there a better way to set this font in the css file so we don't have to edit each FAQ 2 times individually?

    Comment

    • Barrilito van Dijk

      Hi Kim,

      It doe snot make so much sense to me that altering the content twice works for you.

      In general, the customer portal page has a theme with a stylesheet that changes the styling such as fonts etc. So, no matter what the content in the answer is, the stylesheet may overwrite this. So, it may be good to consult the person that is responsible for your site to see what the stylesheet does to your answers.

      Regards

    • Dietrik

      You need to set the font explicitly before it will override the default font set by the site css. This is why changing twice shows the effect as described.

      As Barrilito suggests, have you site administrator set the right default font in the site css so you don't have to set fonts in the answer.

       

    • Kim Dante

      Well I am that administrator, but I have not been able to identify what needs to change.  I have edited various font setiings in the site.css, but has not given the desired effect.  Below is the section for answer and question detail from the site.css

       


      /*******************************************
          08. Answer & Question Detail
      *******************************************/
      #rn_Summary {
          padding: 7px 0 0 0;
          line-height:1em;
          letter-spacing:-.01em;
      }
      #rn_AnswerInfo {
          color:#888;
          margin:6px 0 20px;
      }
      #rn_AnswerInfo div {
          display:inline;
      }
      #rn_AnswerText {
          clear:both;
          line-height:1.4em;
          padding:5px 0 15px;
      }
      #rn_FileAttach {
          padding-bottom:1em;
      }
      /************
      List styles for answer content
      *************/
      .rn_QuestionDetail ol,
      .rn_QuestionDetail ul,
      .rn_AnswerDetail ol,
      .rn_AnswerDetail ul {
          padding-left:2em;
          clear: both;
      }
      .rn_QuestionDetail > ol,
      .rn_QuestionDetail > ul,
      .rn_AnswerDetail > ol,
      .rn_AnswerDetail > ul {
          margin-bottom:1em;
      }
      .rn_QuestionDetail li,
      .rn_AnswerDetail li {
          line-height:1.4em;
          margin:4px;
      }
      /* Unordered lists */
      .rn_QuestionDetail ul li,
      .rn_AnswerDetail ul li {
          list-style: disc;
      }
      .rn_QuestionDetail li ul li,
      .rn_AnswerDetail li ul li {
          list-style: circle;
      }
      .rn_QuestionDetail li li ul li,
      .rn_AnswerDetail li li ul li {
          list-style: square;
      }
      /* Ordered lists */
      .rn_QuestionDetail ol li,
      .rn_QuestionDetail li ol li,
      .rn_QuestionDetail li li ol li,
      .rn_AnswerDetail ol li,
      .rn_AnswerDetail li ol li,
      .rn_AnswerDetail li li ol li {
          list-style: decimal;
      }

       

    • Barrilito van Dijk

      Hi administrator wink

      Font size, family etc are general items... they are set around the top of the css file.

      Look for items like:

      html {
          background:#FFF url(images/layout/royalGrayBackground.png) repeat-x;
          font-family:Helvetica, Arial, sans-serif;
      }
      /*Japanese charset support*/
      html[lang="ja-JP"],
      html[lang="ja-JP"] input, html[lang="ja-JP"] textarea, html[lang="ja-JP"] select {
          font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS PGothic", "MS Pゴシック", Helvetica, Arial, sans-serif;
      }
      body {
          font-size:.75em;
          line-height:1.250em;
          text-align:left;
      }

      From there it depends what else is set or overridden. Remember that also (custom) widgets on the page can have styling changes.

      Regards

    • Kim Dante

      Thanks for that direction. The code in that section is below.  Font size is 1em  which seem to be correct for 12pt, no?

      html {
          font-family:Verdana, Arial, Helvetica, sans-serif;
          
      }
      /*Japanese charset support*/
      html[lang="ja-JP"],
      html[lang="ja-JP"] input, html[lang="ja-JP"] textarea, html[lang="ja-JP"] select {
          font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS PGothic", "MS Pゴシック", Helvetica, Arial, sans-serif;
      }
      body {
          background:#E5E3E4 url(images/home-back.jpg) repeat-x scroll 0 0;
          font-size:1em;
          line-height:1.25em;
          text-align:left;
      }

       

    • Kim Dante

      I also tried 1.33em which still does not set the font for verdana 12.  Looks like it is defaulting to Verdana 10.5.  

    • J Smith

      best way to make changes in CSS, open your page in chrome and press F12, here you can see which css code is responsible for you page.

    • Rajan Davis

      One other thing to consider is how specificity works with CSS.

      Basically, if you are using inline styling (which happens when you are styling answers in the console), no CSS rules can take precedence over the inline rules.

      The order of specificity is as follows:

      Inlined style rules (using 'style="display:none"' in an HTML element) > using ID as a CSS selector (#id-of-element) > using class as a CSS selector (.class-of-element) > using the generic tag as a CSS selector (div).

      If you want a way to remove all of the style attributes from your HTML mark up, feel free to send me a private message and I can walk you through it. Assuming that your site is this one, then what I have described above will be a persistent issue unless you remove the style attributes from the mark up.

    • Barrilito van Dijk

      Hi Kim,

      Just add (to test) to the end of the css file:

      body  { font-size: 12pt !important; font-family:Verdana, Arial, Helvetica, sans-serif; }

      Adding !important gives it some precedence.

      In general you should do this for only the answer part that needs this font-size, I explain it here for the body so that you can see the result better if it works or not.

      Regards.

    • Rajan Davis
      Adding !important gives it some precedence.

      This is generally speaking a bad practice (significantly more so in the example you have provided) and will create long term issues. It is better to use specificity to determine style declaration hierarchy as well as to remove inline styling to provide a more modular and persistent solution.

    • Barrilito van Dijk

      Hi Rajan,

      Thanks for your addition. You are correct, I understand best practice and how this works. I just want to help someone to find out a little quicker that the styling can be adjusted and that it depends on lots of styling code. As not all code (pages, widget css, etc) is provided here and Kim is not able himself to fix it I wanted to give one simple example that hopefully changes "something" so that Kim can see if something is changing in the style at all. If you talk about best practice and wanting to avoid "long term issues" (which is ofcourse totally correct) then I guess my answer to Kim could also be to take a course in css and OSC. Both ways, I just wanted to help out by suggesting something boldly that perhaps pushes more directly to a visible change so Kim could work that out more in detail.

      Regards.

    • Kim Dante

      Thanks Rajan and Barrilito.  I have tried what Barrilito suggested by adding important but still did not get Verdana 12.  I will try a few other ideas in my test site and post back if I get it working.  I thought this was simple font setting in the css, but now realize this is more complex....  yes, I do need a course in css :) 

    • Rajan Davis

      Here's the solution that I recommended:

      I put together a report really quickly; you can import the definition here (you will need to right click and select "save link as" to download the definition).

      Basically, what this report does it looks only at Public answers that are HTML based. 

      There are two columns: the Answer ID and the Answer Solution (raw answer HTML).

      Then, I put in a custom script to remove any style tags in the Answer Solution if it exists.

      What I would do if I were you is to import this report into a test version of your site. Once it is imported, I would run the report and export the contents into a .csv file.

      From there, I would use the Data Import Wizard for answers, set the columns to their appropriate values in the Data Import Wizard, and then import the .csv.

      What this will do is overwrite all of the HTML for all of the affected answers such that your CSS rules should work. I would check your test site to make sure that the changes are made accurately and, after evaluating the changes, if they are good, I would then import the the .csv into your production site.

      Let me know if you need any clarification on the above.

    • Barrilito van Dijk

      Haha, yes Kim, the css course is an option wink

      I meant it with humor, good to see you read it like that too.

      I mean, what may be an easy task for someone can be a headbreaker for someone else. As with this one, styling should be easy to track by using a developer tool in the browser to see which file is adding styling. I start to wonder if you are making changes at the right place and watch the result in a correct way. Perhaps if you don't get it to work share the hrml of the answer, and the site.css.

      Regards

    • Willie Eide

      Just following up on this thread.
      Is there a solution to this problem?
      Specifically, is there closure? Thanks