The New Feedback Tab: an intro to CSS widgets Follow

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 Zendesk Support 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.png Screen_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.png Screen_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.png Screen_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.png Screen_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 Support 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!


Have more questions? Submit a request

Please sign in to leave a comment.

Powered by Zendesk