diff --git a/template/app/controller/Examples.js b/template/app/controller/Examples.js
index d65f7b5cbe557381a4137cab1a2585c3d93139d5..06faa31e0456e25e42dde98b02338ec9bdec7013 100644
--- a/template/app/controller/Examples.js
+++ b/template/app/controller/Examples.js
@@ -148,7 +148,7 @@ Ext.define('Docs.controller.Examples', {
     replaceExampleDivs: function() {
         var self = this;
 
-        Ext.Array.each(Ext.query('.inlineExample'), function(inlineEg) {
+        Ext.Array.each(Ext.query('.inline-example'), function(inlineEg) {
             var egId = inlineEg.getAttribute('rel');
             var divId = inlineEg.getAttribute('id');
             var eg = Ext.create('Docs.view.examples.Inline', {
diff --git a/template/app/view/cls/Overview.js b/template/app/view/cls/Overview.js
index 4ed7d3c218c57f34c3203449a916f66561a9b4fc..ebc91df9b3b05d4b232d1e2f8a6558f046b516f9 100644
--- a/template/app/view/cls/Overview.js
+++ b/template/app/view/cls/Overview.js
@@ -175,7 +175,7 @@ Ext.define('Docs.view.cls.Overview', {
         var replaceExample = function() {
             var idx = cls.doc.match(/\{@example ([A-Za-z0-9_\/\.]+)\}/);
             if (idx) {
-                cls.doc = cls.doc.replace(/\{@example ([A-Za-z0-9_\/\.]+)\}/, '<div class="inlineExample" id="eg' + egId + '" rel="' + idx[1] + '"></div>');
+                cls.doc = cls.doc.replace(/\{@example ([A-Za-z0-9_\/\.]+)\}/, '<div class="inline-example" id="eg' + egId + '" rel="' + idx[1] + '"></div>');
                 egId += 1;
                 replaceExample();
             }
diff --git a/template/app/view/examples/Inline.js b/template/app/view/examples/Inline.js
index 2781dab001a7b6b4bd046b8a3b41c5f1cfa65b62..14044c2abbf1fab3c4f69b761546a308e7cf81ec 100644
--- a/template/app/view/examples/Inline.js
+++ b/template/app/view/examples/Inline.js
@@ -6,6 +6,7 @@ Ext.define('Docs.view.examples.Inline', {
     extend: 'Ext.Panel',
     alias: 'widget.inlineexample',
 
+    componentCls: 'inline-example-cmp',
     layout: 'card',
     border: 0,
     resizable: {
@@ -89,4 +90,4 @@ Ext.define('Docs.view.examples.Inline', {
         }
     }
 
-});
\ No newline at end of file
+});
diff --git a/template/resources/sass/viewport.scss b/template/resources/sass/viewport.scss
index af3d9315f2b86e827ae2d3d010200d3cf54ff4da..80b2d61bfa689000de0949cf5352b3daad7c2ef3 100644
--- a/template/resources/sass/viewport.scss
+++ b/template/resources/sass/viewport.scss
@@ -735,21 +735,27 @@ a {
       color: white;
       background: $docs-text-color; } } }
 
-.code {
-  background: url(../images/example-icons.png) no-repeat -2px -20px; opacity: 0.6; }
-.preview {
-  background: url(../images/example-icons.png) no-repeat -3px -62px; opacity: 0.6; }
-.info {
-  background: url(../images/example-icons.png) no-repeat -2px -111px; opacity: 0.6; }
-.copy {
-  background: url(../images/example-icons.png) no-repeat -2px -85px; }
-
-.active {
-  .code {
-    background: url(../images/example-icons.png) no-repeat -30px -20px; opacity: 1; }
-  .preview {
-    background: url(../images/example-icons.png) no-repeat -31px -62px; opacity: 1; }
-  .info {
-    background: url(../images/example-icons.png) no-repeat -30px -111px; opacity: 1; }
-  .copy {
-    background: url(../images/example-icons.png) no-repeat -30px -85px; } }
+// Inline example component buttons
+.inline-example-cmp {
+  span.x-btn-icon {
+    background: url(../images/example-icons.png) no-repeat;
+    opacity: 0.6;
+    &.code {
+      background-position: -2px -20px; }
+    &.preview {
+      background-position: -3px -62px; }
+    &.info {
+      background-position: -2px -111px; }
+    &.copy {
+      background-position: -2px -85px; } }
+  .active span.x-btn-icon {
+    background: url(../images/example-icons.png) no-repeat;
+    opacity: 1;
+    &.code {
+      background-position: -30px -20px; }
+    &.preview {
+      background-position: -31px -62px; }
+    &.info {
+      background-position: -30px -111px; }
+    &.copy {
+      background-position: -30px -85px; } } }