Help Center Responsive Design

@Caroline - Sure do, just finished one last week.  If you would like to discuss further you can email me at  support@wesdrury.zendesk.com

Looking forward to chatting with you!

@Wes for the header is this accurate:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script crc="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

(it seems like that's what you updated it to in the other responsive site)

My second question is, is there a way to make the site responsive and keep my images in humble squid? I was going to use the 3 column main page, but if I do, I'm not sure how to link it back to the images. Here is a link to our help center: https://tenantturner.zendesk.com/hc/en-us

@Ayesha - Yes those versions are correct.  Yes you can use the same images that you have in any theme.  I also have some free themes that are already responsive and all you would need to do is put your images into them and change the color scheme.

You can find them on my github page.

https://github.com/moderatorwes

I'm also available if you would like a complete custom Help Center.  I just finished a custom Help Center for Caroline above.   If you would like more info and a quote just email me at  support@wesdrury.zendesk.com

Hi Wes,

Sorry to bring up an old topic, but I wanted to pick your brain on something relating to bootstrap / help center themes and I'm hoping you can answer.

Is it possible in anyway to have:

• a) Videos shown in Sections. (and if so..)
• b) Different videos shown depending on the section you are in?

Thank you Wes if you take the time to read and respond.

Hi Ian,

Shouldn't be a problem to have different videos depending on the section that you are on.  It wouldn't have anything to do with Bootstrap as you will need to use JQuery for that.  I've done different banners based on the page you are on so video should be very similar.  If you would like I can paste the code I used.

Firstly thanks for even responding.

Yes, that would be great if you could and much appreciated.

@Ian

Your JS code would look something like this.  This code is swapping header images so videos would be different but very similar.

if (window.location.href == "https://yoursubdomian.zendesk.com/hc/en-us/community/topics/200257626-Feature-Requests") {

$('.search-area-wrapper.community-img').css("background-image", "url(//p4.zdassets.com/hc/theme_assets/426700/200063836/feature_requests_banner.jpg)");

}

Thank you, you are a good man for sharing that.

I've given that a try with the obvious URL amendment but nothing happens. I get the grasp of the css etc, but can't get any change to happen.

For example, if I wanted to make the ".logo img" change due to being on the https://yoursubdomian.zendesk.com/hc/en-us/community/topics/200257626-Feature-Requests page (with my own URL), would the code not be:

if (window.location.href == "https://yoursubdomian.zendesk.com/hc/en-us/community/topics/200257626-Feature-Requests") {

$('.logo img').css("background", "url(//p4.zdassets.com/hc/theme_assets/426700/200063836/feature_requests_banner.jpg)");

}

@Ian - That looks correct but it all depends on the class name if you are calling it correctly.  Also make sure the code goes under the $(document.ready) function

Yes, got it. I totally understand how it should work but its not. At the moment I'm trying to change an image on the page, but it just stays the same.

Can you provide the link to your HelpCenter and I'll take a look.

Thanks - https://support.signagelive.com/hc/en-us/sections/200604933-Publish-Publish-and-Deploy-

If on this section you should not see my face, but the jpg you provided.

----

$(document).ready(function() {

if (window.location.href == "https://support.signagelive.com/hc/en-us/sections/200604933-Publish-Publish-and-Deploy") {
$('.team-profile member-ian').css("background-image", "url(//p4.zdassets.com/hc/theme_assets/426700/200063836/feature_requests_banner.jpg)");

});

@Ian,

This is working for me in the browser.  Instead of using background-image you only need background.  You will need to find another image as my image is way to large for that circle area so it just turns it blue.

$('.team-profile').css("background", "url(//p4.zdassets.com/hc/theme_assets/426700/200063836/feature_requests_banner.jpg)");

Thanks, will try it later. Is it possible to use this method to call different responsive videos per section? 

Thanks for all your help.

Videos would be different would probably use .html vs .css

Thank you Wes for all your help.

Sadly this revised code does not work, so might have to give it a miss.

$(document).ready(function() {

if (window.location.href == "https://support.signagelive.com/hc/en-us/sections/200604933-Publish-Publish-and-Deploy") {
$('.team-profile').css("background", "url(//p5.zdassets.com/hc/theme_assets/77922/1761/media-1030x655.png)");
[<div class=​"team-profile member-ian" style=​"background:​ url("//p5.zdassets.com/hc/theme_assets/77922/1761/media-1030x655.png")​;​">​</div>​]

});

You have too much code there should be.

$('.team-profile').css("background", "url(//p4.zdassets.com/hc/theme_assets/426700/200063836/feature_requests_banner.jpg)");

It worked fine in the console so try exactly what I have above without the IF statement.  Should turn the circle blue.

Thanks Wes, you have been very helpful and patient.

I've tried that code and its not working sadly for me. I don't wish to waste any more of your time as I was hoping I could simply add a bootstrap grid below the section article and swap out the image for each section, then ideally show a video also depending on the section.

@Ian - I understand, if you can't get it working then you can always contract it out to me as I've designed around quite a few Help Centers around here.  If you would like to discuss further just shoot me an email support@wesdrury.zendesk.com

Best of luck.

hi wes , i love the article , though im having a bit of a problem with my user_info tab , it doesnt wan to display the dropdown 

@Penelope - I sent you an email but we can talk here.