Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

osTicket v1.10 (stable) and Maintenance Release v1.9.15 are now available! Go get it now

I Need A Few Lines Of Code


I need a bit of help. I installed osTicket and it appears to be running fine. The index or Landing page needs a bit of editing. It's suggested I edit in GitHub and that's fine.

So ... I need to add two things: a header banner across the top, and on the right side of the top (next to SUPPORT CENTER) I want to place two small buttons on top of each other.

I need the code and where to place that code. For the buttons, just "http://support.*" is the URL as I can add the full URL later on. The two button images will go in /img/. I'll fill in URL after.

Pretty please? My goto friend is on vacation so I'm stuck

Comments

  • Can you use the Page editor within osTicket admin? Then change the logo image to your banner? 
  • I could if I had my memory back. I got code from a couple of people but now have to implement it. It wasn't complete as I was told I'd need to add a div tag or other tags. So I'm close to fixing it but nit close enough. I'm waiting for the images I need, too, and until then, can't just hope for someone to give the full code & placement of code

    I was going to attempt it myself -- but -- I know my limitations physically, I'll keep the code but wait for help so it's done right.

    I can use it as is for now. It's functioning, but not branded or catchy. I'll keep clicking and learning while I wait!
  • We could probably help, take a screenshot, draw on it where you want your buttons post that here.
  • Okay but don't laugh. I Googled for an app to do this. My hand isn't steady so the drawing by me may be confusing. Left side to <--------- end on right is the header banner placement. On the right are two buttons, well, two red blocks meant to show where to place and size.



    IMG_0052.JPG
    2047 x 1014 - 231K
  • Grizly, yoo hoo!
  • For the banner you can go to Admin panel -> Settings -> Company -> Logos
    Upload your new logo there.

    If the width is to small for you, you need to modify this section: https://github.com/osTicket/osTicket/blob/develop/assets/default/css/theme.css#L308-L314
    max-height, max-width, height, width accordingly.
    I recommend experimenting with the numbers in your browsers developer tool, just inspect the logo and change the values there.

    This is the file you need to edit to get those 2 buttons there: https://github.com/osTicket/osTicket/blob/develop/include/client/header.inc.php#L83

    There are many ways to get them stacked like that, either by a table or by css code.
  • You could copy the current button style as well:

    <pre>
    <p>
    <a href="https://path/to/my/thing" title="My Thing!" style="display:block;" class="blue button">First Thing</a>
    </p>
    <p>
    <a href="https://path/to/my/second/thing" title="My Other Thing!" style="display:block;" class="button">Second Thing</a>
    </p>
    </pre>
  • Thank you! Now I can brand the support part to me.

    tack så mycket!!
  • Oh wait, where does it go in the file? I got so excited ...
  • Ok, open the header file from /include/client/header.inc.php

    Find this bit ending line 130 in 1.10:

                <a class="pull-left" id="logo" href="<?php echo ROOT_PATH; ?>index.php"
                title="<?php echo __('Support Center'); ?>">
                    <span class="valign-helper"></span>
                    <img src="<?php echo ROOT_PATH; ?>logo.php" border=0 alt="<?php
                    echo $ost->getConfig()->getTitle(); ?>">
                </a>

    Add after:

                <p class="pull-right flush-right" id="my-special-links" style="width: initial;margin: 0;padding: 0;">
                    <a href="https://path/to/my/thing" title="My Thing!" style="display:block;" class="blue button">First Thing</a>
                    <a href="https://path/to/my/second/thing" title="My Other Thing!" style="display:block;" class="button">Second Thing</a>
              </p>

    Obviously change the path and text parts  from First Thing etc. You'll note the "style" part, that resets some of the style for the logo to make the links sit far right in the header.
  • Thank you. I'll work on it tomorrow night and let you know how it goes. My designer friend just did two buttons for me plus the small SUPPORT.image.
  • Hm, I copied the instructions and read it carefully. I see where the two buttons go, but not the Support image

    After typing that, I read back. Sorry. That's done in the admin area
Sign In or Register to comment.