Forums/Community/Support tips & notes

The New Feedback Tab: an intro to CSS widgets

Joe
posted this on July 12, 2012 14:42

Introduction

Welcome to my very first Zendesk Tip of the Week! We launched a new more customizable Feedback Tab (v2.5) last week so I want to take this opportunity to show you some of the new things you can do with custom CSS. I will show you how to use the Inspector in your browser to find and test CSS on a website as well as how to change the position, dimensions, rotation, behavior, and other properties of the Feedback Tab with your own CSS. In the process I will show you how to optimize your Feedback Tab for more convenient viewing on mobile browsers with an absolute position declaration. If you've never done anything like this before don't worry, this is meant to be a friendly foray into new territory.

To be clear, this will not cover editing the appearance of the window that opens up, just the actual Tab itself, since we already have a great article on customizing the form here: Customizing the Feedback Tab with CSS.

If you haven't set up a v2.5 Feedback Tab yet, I recommend you have a look at our great Setting Up Your Feedback Tab Channel guide first. Once you have one installed on your Zendesk or an external site you're ready to customize it, so come on back.

Note: If you do not know which version your Feedback Tab is it is probably NOT v2.5, please follow the linked instructions to install the latest version. Some of the CSS in this article will conflict with older versions.

Overview

There are three different places to set different settings for the Feedback Tab. For clarity, here is a quick overview:

General Settings

When you were setting up your Feedback Tab you were given a few options, a number of which directly impact the appearance of the Tab. The first page of options are the General Settings which includes whether the Tab should appear on the left or right of the screen, the background color of it, and the wording.

Advanced Settings/Custom CSS

You also had the option to click the Advanced Settings tab to select a custom image for the wording and include some custom CSS to style the content of the Feedback Tab iframe (reminder: instructions on that CSS are here).

Even-More-Advanced Settings/Global CSS Widgets

That is all well and good, but what if you want to change something about the Feedback Tab itself? Maybe you want to move it down, or hide it a little. Maybe you think it is too tall. Maybe you use your Feedback Tab on a mobile site and want to make it stay put instead of staying fixed to the screen. Maybe you're just a control freak like me and you want to have the power to do whatever you want. I'm here to help.

So what is CSS anyway?

Many of you may recall copying and pasting some of it into a random field on your MySpace page to add flashy fonts and rad background pictures. As much as we may all want to forget that, it serves a great illustrative purpose: CSS is a very powerful tool for changing the look of a website. In fact, CSS (which stands for Cascading Style Sheets, more later) is responsible for almost all visual styling on websites today. It is a language that is used to add fonts, colors, dimensions, shapes, positions, gradients, images, behaviors, animations and more to HTML websites. It is very powerful and can be both incredibly valuable and incredibly destructive.

Before you start sticking your code in places it doesn't belong, let's learn a little!

Where is it?

Well, let's have a look! We're going to look INSIDE the website with what I like to call the Inspector Gadget ( Inspector Gadget Short).

Note: I'm using Google Chrome for this but you can use recent versions of Safari as well, the gadget is the same. Firefox has similar if not more functionality with the Firebug plug-in if that is more your thing.

Navigate to the webpage with your Feedback Tab, right-click the tab itself, and click Inspect Element (pictured below).

Screenshot_Inspect_Element.png

Down the rabbit hole we go...

Screen_Shot_2012-07-25_at_11.21.07_AM.png

Take a look at the main window in the Inspector (pictured above). This is the source code. The first thing you should notice is this element:

<div id="zenbox_tab" href="#" style="display: block; background-color: black; border-color: black; left: -50px; " title="Support" class="ZenboxTabLeft" classname="ZenboxTabLeft">

<div id="feedback_tab_text">Support</div>

</div>

This is the Tab itself; it gets added to the page by the code snippet you added and... it has some CSS defined right inside it! Here is the CSS pulled out:

display: block;
background-color: black;†
left: -50px;

This is called an inline style or inline rule because it is right in the line of HTML that it styles, and thus it is the most specific of the three main types: inline, internal, and external. It only applies to this one element and will override any internal or external CSS rules already styling this element.

This looks familiar...

The background-color declaration takes on the color you specified in General Settings when you created the tab. This (and all the other inline style declarations) can only be changed by editing the Feedback Tab settings (instructions here: Editing your Feedback Tab).

You should also take note of id="zenbox_tab" and class="ZenboxTabLeft". Class and ID are used as selectors to help us apply CSS rules to bits of HTML; they are a lot like the numbers in a paint-by-number. Classes can apply to multiple elements though, while IDs can apply to just one. Types and states of elements can also be used as selectors. Often you must use combinations of selectors to style a specific element, particularly if it does not have a unique ID.

Now, have a look at the right side of the Inspector Gadget. Click 'Styles' to see the CSS rules that apply to the selected element (the zenbox_tab div).

You should see something like this:

Screen_Shot_2012-07-25_at_10.54.40_AM.png

The style rules are listed from top to bottom in order of specificity, with the inline styles at the top represented by the selector element.style, followed by a rule applied only to elements with the ID zenbox_tab and the class ZenboxTabLeft with the selector #zenbox_tab.ZenboxTabLeft, the rule applied to the ID zenbox_tab with the selector #zenbox_tab, and the global rule that is applied to all elements with the selector *. Note that any declarations with a strikethrough have been invalidated for one reason or another. Typically they are overwritten by a more specific rule (as in the case of the global margin and padding rules at the bottom) or invalidated because the browser does not accept the syntax (as in the case of the -moz-transform rule, which is unique to Mozilla browsers).

Each rule follows the same simple syntax:
selector {
property: value;
property: value;
...
property: value;
}

Customize It!

Now let's have a little fun. Double click on the value for background-color, start typing the name of a color and it should auto-suggest available named colors for you to choose from. You can also enter hex or even RGB values here using syntax like rgb(255,255,255). Uncheck a box to invalidate a line and see what happens. Everything you do here is completely safe because it is not changing the actual code, just toying with it. Hit refresh on your browser to reload the actual code.

If you click after the last declaration in a rule you can even add a new declaration entirely.

This is one of the great powers of the Inspector: you can test and play all you like and see real time changes on ANY website. I encourage anyone who wants to learn more about CSS to spend some time inspecting and editing other people's sites like we are now.

Next on the list are two rules from the stylesheet zenbox.css: number one defining the height, width, position, and more, and number 24 setting the alignment to the left side and rotating the Tab accordingly (remember class="ZenboxTabLeft" as set in the General Settings?).

Try changing the font... find 'font-family' and click on the names of the fonts to delete them and add your own. Try something common like Times, Georgia or monospace and watch the tab change.

Screen_Shot_2012-07-26_at_10.18.41_AM.png Screen_Shot_2012-07-26_at_10.19.01_AM.png

Try changing the border by modifying the three specified properties: solid 2px and white.

Screen_Shot_2012-07-26_at_10.27.35_AM.pngScreen_Shot_2012-07-26_at_10.26.10_AM.png

Try changing the position: fixed; declaration to position: absolute; and watch the Tab stay planted to the page when you scroll instead of being fixed to the window. 'Fixed' positions the element relative to the browser window; 'absolute' positions the element relative to the page. (Note: if you have many mobile/tablet visitors to your page this will prevent the Tab from staying fixed to the window and blocking other elements when they zoom in, as on iOS 5+.)

Try changing the top: 23%; value and watch the Tab move up and down. Instead of percent (which changes the position based on the window size) you can also specify pixel dimensions by using a fixed value like 50px.

Try changing the height and width, but notice that they seem to be backwards. This is because the Tab is created horizontal and then rotated -90 degrees to be vertical. Keep this in mind when you are changing dimensions and position because it can affect your values quite a bit.

Screen_Shot_2012-07-26_at_10.41.10_AM.pngScreen_Shot_2012-07-26_at_10.42.25_AM.png

Try changing the rotation in the #zenbox_tab.ZenboxTabLeft rule. To see what happens you only need to modify the one declaration that is not crossed off (invalidated): if you are using Chrome or Safari this will be the -webkit declaration but if you are using Firefox it will be -moz. When you actually want to make changes you will need to override each declaration individually with your own declaration or else it will appear different to users on different browsers. The simple transform declaration is for HTML5 compatibility. Unfortunately most browsers aren't fully up to speed so they need their own special declarations.

Screen_Shot_2012-07-26_at_10.47.54_AM.pngScreen_Shot_2012-07-26_at_10.48.17_AM.png

Note: In this example I also changed the inline left: -50px declaration to left: 0px to prevent it from getting pushed off the page now that it is much wider.

Try changing the font size, weight, and color. First you'll need to select the <div id="feedback_tab_text">Support</div> element and find the #zenbox_tab #feedback_tab_text rule. Note that the font-size is declared in em (Wikipedia link), but you can declare it in px (pixels) or pt (points) as well.

Screen_Shot_2012-07-26_at_11.10.58_AM.pngScreen_Shot_2012-07-26_at_11.12.51_AM.png

Digging Deeper: Zenbox.css

zenbox-css_link.png
Now, click the zenbox.css:1 link (pictured above) in the Inspector to see the entire zenbox.css stylesheet. This will take you from the Elements to the Resources tab of the Inspector.

Screen_Shot_2012-07-25_at_11.07.08_AM.png

This one stylesheet defines all of the default styles for the Feedback Tab itself, including the window that opens when you click the tab and the transparency that covers the page in the background.

You cannot edit it here but it is extremely useful for understanding the selectors and syntax so we can write our own custom CSS to cascade over it (overrule it). You can even copy and paste it into a simple text editor as a template for your Global CSS widget. You'll just need to change the rules you want to change and delete the rules you want to leave alone before adding it to your site.

Click the Feedback Tab to open the window and Inspect that to try styling the other elements with rules in the zenbox.css stylesheet like the dimensions on #zenbox_body and the opacity of #zenbox_scrim.

!Important: C is for Cascade

You can create new rules that don't already exist without any issue this way, but any rules that do exist already will need to be forcibly overruled. This is because our CSS widget comes before the zenbox.css file in the order of loading, so the CSS widget says one thing and then the zenbox.css file cascades over it. This isn't a problem when testing in the Inspector because your CSS is at the end of the cascade but it won't work if you past the same code into a widget. But never fear, the !important declaration is here! By simply appending !important you can make your declarations launch a little cascade coup d'etat and topple the default styles.

Example:
position: absolute !important;
top: 10% !important;

Saving Changes

Once you've played around in the inspector and figured out some changes you want to make, you need to write them into CSS rules. Use a simple text editor that can save without formatting, like TextEdit on Mac or Notepad on Windows. If you are using the zenbox.css sheet as a template, be sure to delete any rules you don't want to change.

Now nothing stands in your way! When you are done, open your Zendesk and click Settings > Extensions > Add widget > Global CSS. Copy and paste your CSS into the widget, and select 'Anyone...' from the drop-down before saving.

On an external site you should paste it between <style></style> tags in the header, or in the primary CSS file. If you are using a CMS like Joomla or Wordpress this may be one of your template CSS files.

Results

Congratulations! You can now successfully write CSS code. As a little reward I wanted to share the sample CSS code I wrote with you so you can see a working example. This is my Zendesk test account: JoeandCo.zendesk.com

Note that the tab is pushed off to the left until you hover over it causing it to pop out to its normal position. Can you figure out how I did that and make something similar? Also note that it stays in place as I scroll, this is thanks to position: absolute.

/* this is a CSS comment */

#zenbox_tab #feedback_tab_text {
font-size: 1.8em !important;
margin: 15px auto !important;
color: mediumseagreen !important;
}

/* this rotates the tab 180 degrees from its default rotation of -90 */
#zenbox_tab.ZenboxTabLeft {
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
}

/* this changes the border and positioning of the Tab */
#zenbox_tab {
border: solid 4px #B4F0B6 !important;
position: absolute !important;
top: 80% !important;
left: -60px !important;
}

/* the secret sauce */
#zenbox_tab:hover {
left:-40px !important;
}

Happy coding!

 

Updated 8/21/2012

Custom Background Image

The ability to add a custom background image to the Feedback Tab has been removed. I developed this bit of CSS so you can still set one if you'd like.

To use a custom image with the new Feedback Tab, first, you'll need to make an image that is 130px x 60px and upload it somewhere publicly accessible. This may be your website or an image or file-sharing service that lets you copy public links to the file itself.

Then add the following code to a global CSS widget ('Settings' > 'Extensions' > 'Add Widget' > 'CSS Widget') to hide the text, apply your image, and rotate it properly (replace with your URL):

#feedback_tab_text {
display: none;
}
#zenbox_tab {
background-image: url(http://YOURURL.com/yourfeedbackimage.png);
background-color: transparent !important;
background-position: left !important;
}

That should do the trick!


 

Comments

User photo
Figo Tan

Thanks, but the default feedback tab css layout doesn't work fine in IE7 and IE8.

August 21, 2012 19:08
User photo
gd_knagata
I have the same probrem in IE8. How should I fix this? Thanks,
September 11, 2012 20:32
User photo
Matthew Smith

can we and a contact form to a webpage and not use the tab?

October 06, 2012 22:57
User photo
Justin Seymour
Zendesk

Hey Matthew: 

The Feedback tab is completely optional. You can absolutely build your own contact form, but you'll need to either email the entry results directly to Zendesk or use the API to send that data and populate specific ticket fields based on form entry selections. 

http://developer.zendesk.com/documentation/rest_api/introduction.html

October 08, 2012 06:24
User photo
Ryan Kopperud
govdelivery

Hi Zendesk,

We want to apply different CSS to our homepage than the rest of the pages on our Zendesk for customization purposes. How would we go about this, since the Global CSS widget is applied site-wide? Is there a widget I'm missing?

Thanks much in advance.

Ryan

December 20, 2012 14:06
User photo
Justin Seymour
Zendesk

Hey Ryan: 

I'm afraid we don't have any official documentation or guidelines for this. The CSS widgets you'll create will apply to your entire web portal. You can style various elements separately, though most of the main ones are shared across all pages. We'll be making a lot of changes in the new help center, which is currently in development. 

https://support.zendesk.com/forums/20146877-css-cookbook

December 21, 2012 07:16
User photo
Ryan Kopperud
govdelivery

Thanks for your fast reply Justin.

If this is the case, are the following Zendesk sites using a combination of CSS and Java to achieve their custom homepages?

http://causes.zendesk.com/home

http://support.twitter.com/

https://help.podio.com/home
 

December 21, 2012 07:21
User photo
Justin Seymour
Zendesk

Yes, and I should have mentioned that. You can accomplish quite a bit with JavaScript, though it's difficult for us to support customizations to that level. Here are some more cool examples of custom Zendesk portals: http://pinterest.com/zendesk/custom-branded-zendesks/

December 21, 2012 07:28
User photo
Ryan Kopperud
govdelivery

Hi Justin,

Thanks again for the fast response. Is there a timeline for any of the "new help center" functionalities? Or some idea of what those functionalities will be? I understand that's touchy territory and a question you likely can't answer, but we'd like to avoid spending a ton of money on a custom Java/CSS customization if there's going to be brand new custom functionalities on the horizon.

Would you be able to email me offline of this forum topic? I'd love to message with you more about this. Thanks a lot again.

 

Ryan 

December 21, 2012 12:40
User photo
Justin Seymour
Zendesk

Hey Ryan: 

I don't have any groundbreaking specifics to share at the moment, as the new help center is still very new and still very in development. You'll have a bit more control over styling and we've made the process easier, as lots of CSS/JavaScript widgets get confusing and cumbersome to manage. If you're interested in participating in the beta, you can read a bit more about the new portal and sign-up here: https://zendesk.wufoo.com/forms/help-create-nextgen-zendesks-web-po...

December 24, 2012 04:57
User photo
Gediminas
gameanalytics

Hello, in the example you change left:-50px; to 0px, but in reality it doesn't work. 

element.style {
  1. displayblock;
  2. background-colorrgb(243, 243, 243);
  3. left-45px;
}
In IE10 left:-45px for some reason doesn't work. Can you suggest how to change that left from -45px to 0?
February 26, 2013 08:08
User photo
Sylvain Petit
taulia

Hi,

Is there a way to shoe this feedback tab and pop-up window in different languages, not only the default one?

Thanks.

March 03, 2013 10:27
User photo
James Grimsdale

I've been trying to change the style of the Support tab on an external website and have added some css in the style tags on the page e.g.

#zenbox_tab {
        background-color: blueviolet;
        height: 50px;
        right: -70px;
}

but my css always gets overridden by the inline styles or by zenbox.css. Can anyone help?

March 07, 2013 04:09
User photo
Joe
Zendesk

Sylvain - Each Feedback Tab is restricted to one language, but you can create multiple Feedback Tabs in all the languages you like. The idea is that you can hide/show them depending on the language the user is viewing (e.g. a German tab on the German page, an Italian tab on an Italian page, etc.)

James - It looks to me like you just need to add the !important declaration. Try it like this:

#zenbox_tab {
        background-color: blueviolet !important;
        height: 50px !important;
        right: -70px !important;
}

That will make your code jump to the front of the line :)

March 07, 2013 14:16
User photo
Billy Willis

I have been working on customizing the Feedback tab for my site, more so the window that pops up once the tab is clicked.  It appears to have some opacity set or something and my top navigation links seem to show through.  If I hover over the top of the window then it activates the drop-down menus of my navigation!  How might I go about resolving this? 

March 08, 2013 07:52
User photo
Jeremie Varengo
jtvdigital

Hi all,

Can anybody let me know the css code to add Under Advanced customization in order to adjust the width of the help tab and/or change the position of the text (I'd like to move the text closed to the left side of the tab).

I tried to add CSS but it has no effect at all on my help tab...

Thanks in advance,

March 14, 2013 11:30
User photo
Joe
Zendesk

Hi Jeremie,

To change the width of the tab or change the position of the text you will actually need to use a Global CSS widget, not the Advanced customization section. There is instruction above on how to change the width, just make sure you put your changes in a widget as described under the 'Saving Changes' title.

I hope that helps!

March 14, 2013 11:37
User photo
Jeremie Varengo
jtvdigital

Hi Joe,

Thanks but how to access this Global CSS widget / where to find it?

Sorry if I missed something....

Thanks

March 14, 2013 11:44
User photo
Jennifer Rowe
Zendesk

Jeremie,

To add a global CSS widget, click the Manage (gear) icon in the sidebar, then scroll down and click Extensions. Click Add Widget (you might need to scroll right to see it), then click Global CSS.

If you're using Zendesk Classic, select Settings > Extensions, then Add Widget, then Global CSS.


Joe,

Can you offer any advice to Billy above?

March 14, 2013 11:49
User photo
Joe
Zendesk

Billy,

This sounds like something we'll need to troubleshoot on an individual basis with your site. Could you send a ticket in to support@zendesk.com so a member of our team can help you directly? Please include the URL of the site your Tab is installed on so we can have a look.

Thanks!

March 14, 2013 11:54
User photo
Jeremie Varengo
jtvdigital

got it! thanks much

March 14, 2013 12:08
User photo
Iain Forrest

Hi there, bit of a newbie here, could you please give the css code to move the widget to the bottom of the screen instead of the side? So i guess it would need to be rotated and moved to the bottom instead of right. Thanks in advance.

May 16, 2013 16:49
User photo
Brandon K.
Zendesk

Hey Iain,

You could try asking in our CSS Cookbook forum, you might be able to catch an experienced coder there who could write this up for you quickly! You can find the CSS Cookbook forum here: https://support.zendesk.com/forums/20146877-css-cookbook

May 17, 2013 12:08
User photo
Michael Anderson
gamewisp

Hi Everyone,

Love the Feedback Tab, but currently it is asking for name and email on requests. We currently use SSO for our Zendesk people, so it would be really helpful to be able to use this tab with SSO.

Any ideas on how to make that work?

Thanks,

Michael

July 09, 2013 09:41
User photo
Adam L.
Zendesk

@Michael,

Unfortunately, this is not presently possible.  This is always subject to change, but nothing is firmly planned for this, as of now.  I'll pass this feedback along, though - thanks!  Apologies for any inconvenience this might cause. 

July 10, 2013 08:58
User photo
Michael Anderson
gamewisp

@adam Thanks for the feedback. It would be a really great feature, as I believe many folks would love to use this along with SSO functionality. There are some hackerish ways to do it (auto fill the name and email fields and hide the blanks with javascript) but that seems like overkill :)

I will probably just go ahead and make my own tab/popup that hits the API. Once I get it stable, I will try to share that with the community.  Let me know if you guys end up officially supporting a tab that does this!

Thanks.

July 10, 2013 09:01
User photo
Abhishek Patil

I want to hide the tab on print media, I am trying 

#zenbox_tab {
display: none;
}

on Print media css but it seems like #zenbox_tab has inline css which is overriding it. is there any other solution you have for this case. 

Thanks

December 18, 2013 02:13
User photo
Trisha Patel
Zendesk

@Abhishek - We're following up via ticket - We'll be in touch shortly. 

January 06, 2014 02:22
User photo
Jpriebe
wral

This is important to us, too.  Please let us know when you have a fix in place.

January 08, 2014 11:01
User photo
Abhishek Patil

@Jpriebe - in my print my print media css I am doing 

#zenbox_tab {
    border: solid 0px;
    cursor: pointer;
    position: fixed;
    top: 23%;
    z-index: 1;
    opacity: 0;
}

 

Hope this helps.

 

January 09, 2014 00:42
User photo
Jpriebe
wral

Yep -- that works.  Thanks, Abhishek!

January 09, 2014 08:21
User photo
Steven Engelhard
Paysmart

I'm using the Feeback Menu v2.6 and would like to change the font using css, but it seems there is no #feeback_tab_text within the CSS.

January 30, 2014 12:52
User photo
Prateek Chhetri
Zendesk

Hey Steven,

To change the font using CSS head to Admin (gear icon) >> Extentsions >> Feedback Tab >> Advanced Customizations. Scroll down until you can see the Custom CSS Field. There you can add in the CSS selectors that are available in this article and make the appropriate adjustments. Then regenerate your Feedback Tab snippet by hitting the Preview & Grab Code Snippet button and replace the old existing code snippet in your Help Center.

For example if you wanted to change the fonts of the labels to Courier you add the following to the Custom CSS field in your Feedback tab Settings:

label {
	font-family: courier;
}
February 12, 2014 13:18