5 Replies Latest reply on Aug 7, 2017 9:55 AM by fluffy midnight

    WHD Inline coding

    otto_damus

      I am trying to change the color of a little text being that it is not viable with the text and border both being black. I have been using Mozilla fire fox developer tools in order to find the documentation to change but sadly I am a noob and do not know where or really what the "Inline" document that controls these settings is at. Can anyone assist with this?

        • Re: WHD Inline coding
          otto_damus

          A better question might even be, where can I find the html source code for WHD?

          • Re: WHD Inline coding
            typhoon87

            Can you please elaborate on what you are attempting to accomplish? If you want to edit the client side UI you need to that via setup --> General --> look and feel. Using your browsers tools will not accomplish that.

              • Re: WHD Inline coding
                otto_damus

                Being more specific I am attempting to change font color of the footers text. The text that I am having trouble changing is "Inline". While I have already changed a small portion that was in the "whdStyles.css" file.

                 

                 

                I took your advice typhoon87 and typed the "Inline" codes in the CSS block under Look and Feel, but failed to get results. Do you have any other idea of where I can edit this? I am very new to CSS and HTML.

                  • Re: WHD Inline coding
                    typhoon87

                    I am not aware of any other officially supported ways to edit the CSS for the site. The issue you will likely have editing it in an unofficial way at best is every time you install an upgrade you will need to redo the work as the files modified would be replaced at worst you break something until you undo it.

                     

                    You may want to consider contacting support.

                    • Re: WHD Inline coding
                      fluffy midnight

                      If all you're looking to do is change the outside view of Web Help Desk, this can be achieved in the Look & Feel.

                       

                      What I mean by outside view is for the Login and Client Interface.

                       

                      If this is the case, you will need to do customisation of CSS over the whole section and not just that one bit.

                       

                      Start by referencing where the Footer Text should be, this can be done by specifying padding and position.

                      Here's an example:

                      div#footer {

                          width: 100%;

                          padding: 15px 0 15px 0;

                      }

                       

                      div#footerWhd {

                          padding: 0 15px 0 15px;

                      }

                       

                      body {

                          display: flex;

                          flex-direction: column;

                      }

                       

                      body, html {

                          height: 100%;

                      }

                       

                      div#content {

                          flex: 1 0 auto;

                      }

                       

                      Once that's done, reference the Footer to colours, this can be done by specifying a name and cross-referencing the footers.

                      Here's an example:

                      #footer, #footer a {

                          color: /* @param footerTextColour */;

                      }#footer a {

                          color: /* @param footerTextColour */;

                      }

                       

                      Last of all you'll need to reference the footer sections to the colours you would like, this can be done by giving the parts a name and colour. If you specify color as the type, it'll allow you to use a colour pallette. (saves you time from switching HTML Hex values! )

                      Here's an example:

                      /* @param-def footerBorderColour {label="Border Colour" type="color" default="#000000"} */

                      /* @param-def footerTextColour {label="Text Colour" type="color" default="#000000"} */

                       

                       

                       

                      I hope this has helped you and that you spend some more time delving into CSS and HTML.