Title in the middle within a Given Category + Image under it

HI, @... I'm no expert but could help.

You could resolve it in a few ways. The most simple way it's to add a setting for the <h1> tag in the category template. in the example below, I set settings in the category_page.hbs - default template for the category.

Code below: In the Copenhagen theme, it's row 17.

 <h1 style="text-align: center;"><img src="https://image.freepik.com/free-icon/thick-right-arrow_318-8433.jpg" width="80" height="80" align="middle" style="
margin-bottom: 25px; margin-top: 0px;">{{category.name}}</h1>

The result should be like these: 

The title will be in the center with the image for all categories where you will use this template.

If you want that the image will be under category title you could use this code:

        <h1 style="text-align: center;">{{category.name}}
        <div>
          <img src="https://image.freepik.com/free-icon/thick-right-arrow_318-8433.jpg" width="80" height="80" align="center">
        </div>
        </h1>

If you want to use pictures from the asset: just add a picture and replace in the code src="https://image.freepik.com/free-icon/thick-right-arrow_318-8433.jpg" on src="{{asset value}}"

Thanks a lot for the quick tips.

I managed to make the title in the middle, however, somehow it creates an unbalanced middle probably due to the left bar see screenshot:

Also, I really appreciate your effort for the image, but what I meant was to insert an image UNDER the title and make this image different for each title and also in the middle (but the real middle ) so to speak LOL ;)

Thanks again mate! 

@... Ha got it LOL :)

You could fix/set position via padding-left and padding-right. The value should be in px or the %.

        <h1 style="text-align: center; padding-left: 0px;padding-right: 150px;">{{category.name}}
          <div>
              <img src="https://image.freepik.com/free-icon/thick-right-arrow_318-8433.jpg" width="80" height="80" align="center">
          </div>
        </h1>

About images - I got it. Try to share with you the code later. 

Hi Danila,

You're a life savior really! That was SO VERY helpful ;)

It's exactly like I wanted, the only thing though is the picture is being applied for all the categories,

What would be the best practice to get an individual picture for each category, would that work also on the category_page_hbs?

Should I name each category maybe?

It's possible to apply individual pictures for each category. Need to set condition with zendesk helpers in the category_page_hbs, and it will work. I am working right now on our theme, so later, I will try to do it for you - in my free time. if you don't want to wait you could try to do it by yourself. 

This article could help: https://support.zendesk.com/hc/en-us/articles/216367358-Help-center-templating-cookbook 

I'll check it but I still wait ;)

Thanks again Danila! 

Hey @...,

I had to keep you posted lol, I'm so proud I managed to figure it all out on my own, I mean almost ;)

Here is how the help-center looks so far: https://tomhope.zendesk.com/hc/en-us

Partly thanks to you mate! I managed to implement small icons right in the middle-ish of each category.

Love the pleasure it bring, coding is pretty cool actually! Thanks again dude, Zendesk should hire you, you ROCK! 

Oh, it's strange, I just tested the URLs on a private window and the small icons don't show. Super weird... 

On my regular browser it shows, how is it for you? Anything I should do? Or is it maybe the free icon website I used that has some kind of security for that?

Here is an example of the code I wrote:

{{#is category.id 360003075919}}
<img src="https://www.flaticon.com/svg/vstatic/svg/655/655640.svg?token=exp=1616146439~hmac=6be6a268057e683ade82c6d62268e7ed" width="40" height="40" align="center">
{{/is}}
{{#is category.id 360003075819}}
<img src="https://www.flaticon.com/svg/vstatic/svg/1670/1670915.svg?token=exp=1616144834~hmac=32e6d17a4197ee95483cad94d78bf324" width="50" height="50" align="center">
{{/is}}

If I test each URL: https://www.flaticon.com/svg/vstatic/svg/655/655640.svg?token=exp=1616146439~hmac=6be6a268057e683ade82c6d62268e7ed 

I can see that there is some kind of error on Private browsing, it must come from that, these are only token.

Do you know how I can sort it out? Should I download each icon and fix it in another way assets maybe? 

Hi, try to download the necessary icons and add them to the assets and add to code (below). it could help - some workaround solution :)

{{#is category.id 360003075919}}
 <img src="{{asset 'youricon1.svg'}}" width="40" height="40" align="center">
{{/is}}

{{#is category.id 360003075819}}
 <img src="{{asset 'youricon2svg'}}" width="50" height="50" align="center">
{{/is}}

How to work with assets: https://support.zendesk.com/hc/en-us/articles/115012399428?page=1 

OK sorry for the SPAM,

I MADE IT WORK HAHA! ! WITH ASSETS ;)

https://tomhope.zendesk.com/hc/en-us/categories/360003075959-Manage-your-Account

Yeehaww! 

If you don't use your corporate web icons and want to use some free design solution - it's better to download it and add it to the asset. Link on the free solution can change any time, or icons from the source site can be deleted. So for free design solution things, it's better to download what you want and store it on your computer or some web cloude. 

My Congratulation !!!!

Now you could practice and try to add the same icons for categorys on the home page LOL ;)  - haha sorry for spam)

By the way. Visit this site https://www.zendesktheme.com/ - you could find where some free themes. It could help you save a lot of time.  

That could be interesting but that would be only "extra fun" maybe ;) 

In the meantime, I encountered another issue actually.

I need everything to be responsive. And you remember the code you helped me with to get the right "Padding so it would be in the middle" 

Well it worked when I was on my laptop browser it was perfectly in the middle:

<h1 style="text-align: center; padding-left: 0px;padding-right: 225px;">{{category.name}}

But on Mobile, it was looking awful and not responsible on my iPhone

So what I did is that I Removed the padding and changed the text-align: left instead of the center so:

<h1 style="text-align: left;">{{category.name}}

Now it is way more responsive but I do believe it doesn't look that cool on browser laptop no more:

https://tomhope.zendesk.com/hc/en-us/categories/360003060620-Product-Information

Or what do you think? 

Do you have best practice to have all categories responsive on mobile and then change the look on laptop but it would only affect the laptop mode?

Haha It's a headache but I like it so far ;)

Thanks a LOT DUDE! 

Also I don't know why but when I have tested on my Phone all my categories and even though I didn't make any distinctions in the code, some categories like:

Carreer

Collaboration

Store Locator

Don't appear like they should (which is all the way to the left like all the others)

I've checked the code and it's all the same settings:

<h1 style="text-align: left;">{{category.name}}
<div>

{{#is category.id 360003075919}}
<img src="{{asset 'exchange-icon.svg'}}" width="40" height="40" align="left">
{{/is}}
{{#is category.id 360003075819}}
<img src="{{asset 'Order-Status-Icon.svg'}}" width="50" height="50" align="left">
{{/is}}
{{#is category.id 360003060620}}
<img src="{{asset 'Product-Information-Icon.svg'}}" width="40" height="40" align="left">
{{/is}}
{{#is category.id 360003060660}}
<img src="{{asset 'Place-Order-Icon.svg'}}" width="50" height="50" align="left">
{{/is}}
{{#is category.id 360003075939}}
<img src="{{asset 'Collaboration-Icon.svg'}}" width="50" height="50" align="left">
{{/is}}
{{#is category.id 360003062440}}
<img src="{{asset 'Complaint-Icon.svg'}}" width="50" height="50" align="left">
{{/is}}
{{#is category.id 360003060680}}
<img src="{{asset 'Store-Locator-Icon.svg'}}" width="40" height="40" align="left">
{{/is}}
{{#is category.id 360003079819}}
<img src="{{asset 'Career-Icon.svg'}}" width="50" height="50" align="left">
{{/is}}
{{#is category.id 360003075959}}
<img src="{{asset 'Account-Manage-Icon.svg'}}" width="50" height="50" align="left">
{{/is}}
</div>
</h1>

{{#if category.description}}
<p class="page-header-description">{{category.description}}</p>
{{/if}}

Do you know what it could be?

Here are two pictures that illustrate the issue on responsiveness on mobile

I would love to fix this so it looks all good like the Order Status page on all category pages 

And then I would love to make it look like it was before on desktop (in the middle instead of Left) but ONLY for the Desktop version 

DAMN IT AINT EASY!! HAHA

Look at all that space on the left side of that Career Category DAMN!

Doesn't make any sense really... 

Since I am using the Template of another company already, maybe There is a limit of Category set up? And I exceeded this limit? hmm 

I tried to remove the small icon (img) but it didn't fix the issue. It's coming from something else

Ohh. I don't think that I could help you with cross-platfom/сross -browser layout via screenshots and communication in this article.

You need to check and set mobile devices' conditions via CSS classes - in the style.css file in the zendesk (could be also *.css files in the zendesk assets).

It's better to find some person who worked with this already.

If you want to try to do it yourself, you could start working in the code editor in the browser (click F12 button on your keyboards) > Toggle device toolbar - you could check how your pages will look like on the mobile devices after your changes in the code (HTML,css,.)

It's making me mad lol DOESNT MAKE SENSE!!! 

Why would only these 2-3 category won't display properly and why all the others work fine and are RESPONSIVE....  Do I need to touch somthing on the style.css? Feel I was so close to fixing all yet SO FAR! 

Hey Edwin, copy this given code and paste on your stylesheet then test on desktop and mobile device and let me know if your bug resolve:

.category-content{
width:100%
}

After adding this your alignment issue will also fixed on desktop resolution.

And that bug isn't only in 2-3 categories that exist in all. You need to set the width:100% because when the section will have articles with small title then your page will look like this on tablet and mobile device:

Thanks

@... You're a life savior too, just like @...

It just worked immediately wow!

Do you have a best practice to show the title of each categories in the middle so it's also responsive? Is that best done in category section file or in css file?

Thanks so much! I may try to customize the buttons now hehe @...

p.s: I'm talking about the Category Header + the Icon picture that I added also

Hi,

Maybe you could try to set this condition for Img and H1: You could try to set it in the category template. 

<h1 style="text-align: center; padding-left: 0px;padding-right: 0px;">

<img src="//theme.zdassets.com/theme_assets/801130/5b98032efb793091d69dba715a44a7b3264a9686.svg" width="40" height="40" align="middle">

I  checked on your help center.I think looks fine on different devices. You could find below screenshots for iPad and iPhone

I'm not as much an expert on this as Ifra Saqlain - she's a cool developer from the dizana team.

Yeah, well you both are pretty cool to me.

This helped me resolve the issue,

Somehow the Collaboration wasn't working with middle so I set it up with "center" and all the other icons with "middle" and it works perfectly on mobile now. REALLY HAPPY ABOUT THAT!!

Now when I look at the Desktop version, well it's almost perfect, it just depends on how big of a window they have on desktop, depending on how big your window is the title + icon is in the perfect middle or not hehe, but I guess it's good enough!

Maybe I should look at how to make amazing Category buttons now ;) 

Thanks again for all your help guys! You've been amazing! 

Or do you have a way to seperately control the Title + icons on Mobile versus Desktop?

I probably should leave it on text-align: left, then both version looks equally good somehow, feels that if you make it look Top-notch on mobile, you will have it look a tiny bit less good on Desktop hehe ^^

You see my point? I mean try now, the help-center looks awesome on Mobile but on desktop, depending on your window, it's not perfectly the middle ^^ 

Perhaps smarter to leave it on the left what do you guys think?