Customizing for logo and theme in 3.1.0

[Richardmax]

Hello everyone!
First, congratulate the HESK team on the new v3 design. Great job!!

Here are some tips to customize HESK 3.1.0; specifically in the case of the logo and the theme, according to my own experience. I hope it can be useful to others, and any contribution to optimizing it, I will appreciate it.

THEME:

1 Copy the entire hesk3/ folder to YourthemeName/
2- Into new theme folder, open config.json and change

Code: Select all

"name": "HESK"

to

Code: Select all

"name": "Your Theme Name"

and save it
3- Go to Admin -> Setting -> General and select you "Your Theme Name" and save it

Now you can customize for color or anything from CSS folder

LOGO:

Particularly, I did not like the way to use the header.txt files because the logo is above the main "wrapper" layer. So I changed the code directly in the layer "header__inner. I know that the next update will overwrite the modified files but not, in that case, we will only have to put the code back until the development guys decide to apply something similar.

NOTE: Following apply to FRONTEND ONLY

1- Add a new variable to hesk_settings.inc.php to save the path to image. It can be a relative path to the image into folder of the root "img / my_logo.png", or (in my case) a URL of my official store logo "https: //mydomain.com/img/my_logo.pgn "

Code: Select all

$hesk_settings['[b]header_logo[/b]']='https://mydomain.com/wp-content/uploads/2018/03/myt_logo_web.png';

2- Create a new file "inc/header_logo.inc.php" and add this code:

Code: Select all

                    <a href="<?php echo $hesk_settings['hesk_url']; ?>" title="<?php echo $hesk_settings['hesk_title']; ?>" class="header__logo">
                        <img width="119" height="49" src="<?php echo $hesk_settings['header_logo']; ?>" class="header_logo header-logo" alt="<?php echo $hesk_settings['hesk_title']; ?>">
                    </a>

3-Locate the following files in theme/hesk3/customer/ folder:

/
- index.php
- error.php
- maintenance.php

create-ticket/
- create-ticket.php
- category-select.php
- create-ticket-confirmation.php

knowledgebase/
- view-category.php
- search-results.php
- view-article.php

view-ticket/
- view-ticket.php
- form.php

4- Find this code into each one of them (normally after <div class="header__inner"> tag)

Code: Select all

<a href="<?php echo $hesk_settings['hesk_url']; ?>" class="header__logo">
      <?php echo $hesk_settings['hesk_title']; ?>
</a>

Replace with ... and save :

Code: Select all

<?php include(HESK_PATH . 'inc/header_logo.inc.php'); ?>

5- Ready. If your URL or relative path is correct, you should already be able to see the logo on all pages

SECOND NOTE: If you haven't made structural changes to your other themes, simply overwrite the files from step 3 in each theme folder, and the logo will be available in all

Best regards

[Klemen]

Thanks for sharing your process and instructions, I appreciate it!

Just wanted to give some extra notes to the guide:

• for the next version (3.1.1) the header/footer inclusion have been added within the .wrapper div, so adding a logo will be easier (won't create a vertical bar if enough space)
• if you want to change any of the style (CSS), my recommendation is to NOT modify Hesk style files, but create a custom style file ("custom.css") and include it in head.txt

  Code: Select all

  <link rel="stylesheet" href="https://example.com/custom.css">

  This way your changes will not be overwritten by future updates
• if making changes to Hesk files I strongly recommend tracking changes with versioning software such as Git or Subversion. This way you can keep a good track of changes you make and apply them to future versions automatically

[Richardmax]

Great news!

after the post, I did it as you say. I created a custom.css file to load from head.txt and also added tag links for a favicon.

About header.txt I prefer to put it inside the .wapper div but leave it for banner or other things. So I keep the variable $hesk_settings['header_logo'] and use it in header__inner div like this:

Code: Select all

<a href="<?php echo $hesk_settings['hesk_url']; ?>" title="<?php echo $hesk_settings['hesk_title']; ?>" class="header__logo">
    <img width="119" height="49" src="<?php echo $hesk_settings['header_logo']; ?>" class="header_logo header-logo" alt="<?php echo $hesk_settings['hesk_title']; ?>">
</a>

And keep the $hesk_settings['hesk_title'] in the same zone (to the right of the logo) but centered

On the other hand, I am trying to add a logo field to the Admin Settings General form in admin_settings_general.php to better get the logo path or URL.

what do you think about that?

[Klemen]

after the post, I did it as you say. I created a custom.css file to load from head.txt and also added tag links for a favicon.

Favicon for different devices, generated using https://realfavicongenerator.net, is also included in Hesk 3.1.1

On the other hand, I am trying to add a logo field to the Admin Settings General form in admin_settings_general.php to better get the logo path or URL.

We are exploring the best options for this (won't be in 3.1.1 yet) and will likely have 2 options: a simple "show logo" as a setting from admin panel, and if someone needs a more complex setup, they can still use the header.txt to manually insert any code they want.

[Richardmax]

Greats news!!!

contact me if you want to contribute

Best regards

[Heppa]

after the post, I did it as you say. I created a custom.css file to load from head.txt and also added tag links for a favicon.

Favicon for different devices, generated using https://realfavicongenerator.net, is also included in Hesk 3.1.1

I tried the same: added links to favicons and files generated with https://realfavicongenerator.net into head.txt instead of editing index.php of the theme.

Almost all icon links work as overwrites, but at least Chrome does not seem to want to read the file site.webmanifest twice and thus the settings and the 192x192 and 512x512 icons linked inside that file are not being used by Chrome. These are used at least for generating website app (Chrome Settings -> More Tools -> Create shortcut), which is by the way a wonderful feature: you can open any website as a window.

Commented original HESK realfavicongenerator.net links out in theme's index.php and now all the new icons and app manifest settings work.

[Klemen]

Glad to hear that worked for you. Not sure what was wrong, but maybe the paths were not correct or the format of realfavicongenerator changed.

Will check for the next update.