Add skin offsets for images and text in shortcut containers.

24 files changed, 208 insertions, 24 deletions

diff --git a/data/graphics/gui/CMakeLists.txt b/data/graphics/gui/CMakeLists.txt
index 5bd85f9f6..8692e5301 100644
--- a/data/graphics/gui/CMakeLists.txt
+++ b/data/graphics/gui/CMakeLists.txt
@@ -30,6 +30,7 @@ SET (FILES
     dropdown_background.xml
     dropdown_pressed.xml
     emote_selection.xml
+    emotes.xml
     emotetabs.xml
     equipment.xml
     equipment_background.xml
diff --git a/data/graphics/gui/Makefile.am b/data/graphics/gui/Makefile.am
index 083fe0423..9e1b7b66d 100644
--- a/data/graphics/gui/Makefile.am
+++ b/data/graphics/gui/Makefile.am
@@ -33,6 +33,7 @@ gui_DATA =				\
 	dropdown_background.xml		\
 	dropdown_pressed.xml		\
 	emote_selection.xml	\
+	emotes.xml	\
 	emotetabs.xml	\
 	equipment.xml	\
 	equipment_background.xml	\
diff --git a/data/graphics/gui/emotes.xml b/data/graphics/gui/emotes.xml
new file mode 100644
index 000000000..b760106b1
--- /dev/null
+++ b/data/graphics/gui/emotes.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<skinset name="Default" image="window.png">
+    <widget type="Window">
+        <option name="imageOffsetY" value="10" /> 
+
+        <!-- Top Row -->
+        <part type="top-left-corner" xpos="0" ypos="0" width="4" height="4" />
+        <part type="top-edge" xpos="4" ypos="0" width="32" height="4" />
+        <part type="top-right-corner" xpos="36" ypos="0" width="4" height="4" />
+
+        <!-- Middle Row -->
+        <part type="left-edge" xpos="0" ypos="4" width="4" height="216" />
+        <part type="bg-quad" xpos="4" ypos="86" width="32" height="57" />
+        <part type="right-edge" xpos="36" ypos="4" width="4" height="216" />
+
+        <!-- Bottom Row -->
+        <part type="bottom-left-corner" xpos="0" ypos="220" width="4" height="4" />
+        <part type="bottom-edge" xpos="4" ypos="220" width="32" height="4" />
+        <part type="bottom-right-corner" xpos="36" ypos="220" width="4" height="4" />
+
+        <part type="closeImage" xpos="130" ypos="0" width="15" height="15" />
+        <part type="stickyImageUp" xpos="130" ypos="51" width="15" height="15" />
+        <part type="stickyImageDown" xpos="145" ypos="51" width="15" height="15" />
+    </widget>
+</skinset>
\ No newline at end of file
diff --git a/data/themes/enchilado/CMakeLists.txt b/data/themes/enchilado/CMakeLists.txt
index 3c7a967c1..de731658b 100644
--- a/data/themes/enchilado/CMakeLists.txt
+++ b/data/themes/enchilado/CMakeLists.txt
@@ -2,6 +2,7 @@ SET (FILES
     buy.xml
     colors.xml
     cutin.xml
+    emotes.xml
     equipment.xml
     info.xml
     inventory.xml
diff --git a/data/themes/enchilado/Makefile.am b/data/themes/enchilado/Makefile.am
index de96c7d62..0bf635db3 100644
--- a/data/themes/enchilado/Makefile.am
+++ b/data/themes/enchilado/Makefile.am
@@ -5,6 +5,7 @@ gui_DATA =				\
 	buy.xml		\
 	colors.xml		\
 	cutin.xml		\
+	emotes.xml		\
 	equipment.xml		\
 	info.xml		\
 	inventory.xml		\
diff --git a/data/themes/enchilado/emotes.xml b/data/themes/enchilado/emotes.xml
new file mode 100644
index 000000000..c092533b7
--- /dev/null
+++ b/data/themes/enchilado/emotes.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<skinset name="Default" image="window.png">
+    <widget type="Window" xpos="190" ypos="30">
+        <option name="imageOffsetY" value="10" /> 
+
+        <!-- Top Row -->
+        <part type="top-left-corner" xpos="0" ypos="0" width="10" height="10" />
+        <part type="top-edge" xpos="11" ypos="0" width="127" height="10" />
+        <part type="top-right-corner" xpos="139" ypos="0" width="12" height="10" />
+
+        <!-- Middle Row -->
+        <part type="left-edge" xpos="0" ypos="11" width="10" height="81" />
+        <part type="bg-quad" xpos="11" ypos="11" width="127" height="81" />
+        <part type="right-edge" xpos="139" ypos="11" width="12" height="81" />
+
+        <!-- Bottom Row -->
+        <part type="bottom-left-corner" xpos="0" ypos="93" width="10" height="12" />
+        <part type="bottom-edge" xpos="11" ypos="93" width="127" height="12" />
+        <part type="bottom-right-corner" xpos="139" ypos="93" width="12" height="12" />
+
+        <part type="closeImage" xpos="-60" ypos="-30" width="15" height="15" />
+        <part type="stickyImageUp" xpos="-60" ypos="21" width="15" height="15" />
+        <part type="stickyImageDown" xpos="-45" ypos="21" width="15" height="15" />
+    </widget>
+</skinset>
diff --git a/data/themes/golden-delicious/emotes.xml b/data/themes/golden-delicious/emotes.xml
index 3e533f54f..e320d7b68 100644
--- a/data/themes/golden-delicious/emotes.xml
+++ b/data/themes/golden-delicious/emotes.xml
@@ -2,6 +2,7 @@
 <skinset name="Default" image="window.png">
     <widget type="Window" xpos="260" ypos="152">
         <option name="padding" value="10" /> 
+        <option name="imageOffsetY" value="10" /> 
 
         <!-- Top Row -->
         <part type="top-left-corner" width="30" height="15" />
diff --git a/data/themes/jewelry-simple/emotes.xml b/data/themes/jewelry-simple/emotes.xml
index 3e533f54f..e320d7b68 100644
--- a/data/themes/jewelry-simple/emotes.xml
+++ b/data/themes/jewelry-simple/emotes.xml
@@ -2,6 +2,7 @@
 <skinset name="Default" image="window.png">
     <widget type="Window" xpos="260" ypos="152">
         <option name="padding" value="10" /> 
+        <option name="imageOffsetY" value="10" /> 
 
         <!-- Top Row -->
         <part type="top-left-corner" width="30" height="15" />
diff --git a/data/themes/jewelry/emotes.xml b/data/themes/jewelry/emotes.xml
index 3e533f54f..e320d7b68 100644
--- a/data/themes/jewelry/emotes.xml
+++ b/data/themes/jewelry/emotes.xml
@@ -2,6 +2,7 @@
 <skinset name="Default" image="window.png">
     <widget type="Window" xpos="260" ypos="152">
         <option name="padding" value="10" /> 
+        <option name="imageOffsetY" value="10" /> 
 
         <!-- Top Row -->
         <part type="top-left-corner" width="30" height="15" />
diff --git a/data/themes/pink/CMakeLists.txt b/data/themes/pink/CMakeLists.txt
index e40902c46..647371e7e 100644
--- a/data/themes/pink/CMakeLists.txt
+++ b/data/themes/pink/CMakeLists.txt
@@ -3,6 +3,7 @@ SET (FILES
     buy.xml
     colors.xml
     cutin.xml
+    emotes.xml
     equipment.xml
     info.xml
     inventory.xml
diff --git a/data/themes/pink/Makefile.am b/data/themes/pink/Makefile.am
index a0b9b526a..d13f8cea0 100644
--- a/data/themes/pink/Makefile.am
+++ b/data/themes/pink/Makefile.am
@@ -6,6 +6,7 @@ gui_DATA =				\
 	buy.xml			\
 	colors.xml		\
 	cutin.xml		\
+	emotes.xml		\
 	equipment.xml		\
 	info.xml		\
 	inventory.xml		\
diff --git a/data/themes/pink/emotes.xml b/data/themes/pink/emotes.xml
new file mode 100644
index 000000000..2c7d194b8
--- /dev/null
+++ b/data/themes/pink/emotes.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<skinset name="Default" image="window.png">
+    <widget type="Window" xpos="250" ypos="0">
+        <option name="imageOffsetY" value="10" /> 
+
+        <!-- Top Row -->
+        <part type="top-left-corner" xpos="0" ypos="0" width="10" height="10" />
+        <part type="top-edge" xpos="0" ypos="10" width="10" height="10" />
+        <part type="top-right-corner" xpos="0" ypos="20" width="10" height="10" />
+
+        <!-- Middle Row -->
+        <part type="left-edge" xpos="0" ypos="30" width="10" height="10" />
+        <part type="bg-quad" xpos="0" ypos="40" width="10" height="10" />
+        <part type="right-edge" xpos="0" ypos="50" width="10" height="10" />
+
+        <!-- Bottom Row -->
+        <part type="bottom-left-corner" xpos="0" ypos="60" width="10" height="10" />
+        <part type="bottom-edge" xpos="0" ypos="70" width="10" height="10" />
+        <part type="bottom-right-corner" xpos="10" ypos="0" width="132" height="134" />
+
+        <part type="closeImage" xpos="-120" ypos="0" width="15" height="15" />
+        <part type="stickyImageUp" xpos="-120" ypos="51" width="15" height="15" />
+        <part type="stickyImageDown" xpos="-105" ypos="51" width="15" height="15" />
+    </widget>
+</skinset>
diff --git a/data/themes/unity/CMakeLists.txt b/data/themes/unity/CMakeLists.txt
index 72c1445f8..390faca10 100644
--- a/data/themes/unity/CMakeLists.txt
+++ b/data/themes/unity/CMakeLists.txt
@@ -3,6 +3,7 @@ SET (FILES
     char.xml
     colors.xml
     cutin.xml
+    emotes.xml
     equipment.xml
     info.xml
     inventory.xml
diff --git a/data/themes/unity/Makefile.am b/data/themes/unity/Makefile.am
index 1aa75fa15..56b32083d 100644
--- a/data/themes/unity/Makefile.am
+++ b/data/themes/unity/Makefile.am
@@ -6,6 +6,7 @@ gui_DATA =				\
 	char.xml			\
 	colors.xml		\
 	cutin.xml		\
+	emotes.xml		\
 	equipment.xml		\
 	info.xml		\
 	inventory.xml		\
diff --git a/data/themes/unity/emotes.xml b/data/themes/unity/emotes.xml
new file mode 100644
index 000000000..7d469c1a9
--- /dev/null
+++ b/data/themes/unity/emotes.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<skinset name="Default" image="window.png">
+    <widget type="Window" xpos="260" ypos="0">
+        <option name="padding" value="10" />
+        <option name="imageOffsetY" value="10" /> 
+
+        <!-- Top Row -->
+        <part type="top-left-corner" xpos="0" ypos="0" width="10" height="10" />
+        <part type="top-edge" xpos="11" ypos="0" width="127" height="10" />
+        <part type="top-right-corner" xpos="139" ypos="0" width="12" height="10" />
+
+        <!-- Middle Row -->
+        <part type="left-edge" xpos="0" ypos="11" width="10" height="81" />
+        <part type="bg-quad" xpos="11" ypos="11" width="127" height="81" />
+        <part type="right-edge" xpos="139" ypos="11" width="12" height="81" />
+
+        <!-- Bottom Row -->
+        <part type="bottom-left-corner" xpos="0" ypos="93" width="10" height="12" />
+        <part type="bottom-edge" xpos="11" ypos="93" width="127" height="12" />
+        <part type="bottom-right-corner" xpos="139" ypos="93" width="12" height="12" />
+
+        <part type="closeImage" xpos="-130" ypos="0" width="15" height="15" />
+        <part type="stickyImageUp" xpos="-130" ypos="51" width="15" height="15" />
+        <part type="stickyImageDown" xpos="-115" ypos="51" width="15" height="15" />
+    </widget>
+</skinset>
diff --git a/data/themes/wood/CMakeLists.txt b/data/themes/wood/CMakeLists.txt
index 2630909dd..7f05ffd1b 100644
--- a/data/themes/wood/CMakeLists.txt
+++ b/data/themes/wood/CMakeLists.txt
@@ -2,6 +2,7 @@ SET (FILES
     buy.xml
     colors.xml
     cutin.xml
+    emotes.xml
     equipment.xml
     info.xml
     inventory.xml
diff --git a/data/themes/wood/Makefile.am b/data/themes/wood/Makefile.am
index 2bd446b29..d37e357d6 100644
--- a/data/themes/wood/Makefile.am
+++ b/data/themes/wood/Makefile.am
@@ -5,6 +5,7 @@ gui_DATA =				\
 	buy.xml		\
 	colors.xml		\
 	cutin.xml		\
+	emotes.xml		\
 	equipment.xml		\
 	info.xml		\
 	inventory.xml		\
diff --git a/data/themes/wood/emotes.xml b/data/themes/wood/emotes.xml
new file mode 100644
index 000000000..dc8dcc288
--- /dev/null
+++ b/data/themes/wood/emotes.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<skinset name="Default" image="window.png">
+    <widget type="Window" xpos="260" ypos="0">
+        <option name="padding" value="6" />
+        <option name="imageOffsetY" value="10" /> 
+
+        <!-- Top Row -->
+        <part type="top-left-corner" width="10" height="10" />
+        <part type="top-edge" xpos="11" ypos="0" width="127" height="10" />
+        <part type="top-right-corner" xpos="139" ypos="0" width="12" height="10" />
+
+        <!-- Middle Row -->
+        <part type="left-edge" xpos="0" ypos="11" width="10" height="81" />
+        <part type="bg-quad" xpos="11" ypos="11" width="127" height="81" />
+        <part type="right-edge" xpos="139" ypos="11" width="12" height="81" />
+
+        <!-- Bottom Row -->
+        <part type="bottom-left-corner" xpos="0" ypos="93" width="10" height="12" />
+        <part type="bottom-edge" xpos="11" ypos="93" width="127" height="12" />
+        <part type="bottom-right-corner" xpos="139" ypos="93" width="12" height="12" />
+
+        <part type="closeImage" xpos="-130" ypos="0" width="15" height="15" />
+        <part type="stickyImageUp" xpos="-130" ypos="51" width="15" height="15" />
+        <part type="stickyImageDown" xpos="-115" ypos="51" width="15" height="15" />
+    </widget>
+</skinset>
diff --git a/src/gui/widgets/emoteshortcutcontainer.cpp b/src/gui/widgets/emoteshortcutcontainer.cpp
index caa9150c1..ad597ee60 100644
--- a/src/gui/widgets/emoteshortcutcontainer.cpp
+++ b/src/gui/widgets/emoteshortcutcontainer.cpp
@@ -111,8 +111,8 @@ void EmoteShortcutContainer::draw(Graphics *restrict graphics) restrict2
             if (sprite != nullptr)
             {
                 sprite->draw(graphics,
-                    (i % mGridWidth) * mBoxWidth + 2,
-                    (i / mGridWidth) * mBoxHeight + 10);
+                    (i % mGridWidth) * mBoxWidth + mImageOffsetX,
+                    (i / mGridWidth) * mBoxHeight + mImageOffsetY);
             }
         }
     }
@@ -129,7 +129,8 @@ void EmoteShortcutContainer::draw(Graphics *restrict graphics) restrict2
             mForegroundColor,
             mForegroundColor2,
             key,
-            emoteX + 2, emoteY + 2);
+            emoteX + mTextOffsetX,
+            emoteY + mTextOffsetY);
     }
 
     BLOCK_END("EmoteShortcutContainer::draw")
@@ -163,8 +164,8 @@ void EmoteShortcutContainer::safeDraw(Graphics *restrict graphics) restrict2
             if (sprite != nullptr)
             {
                 sprite->draw(graphics,
-                    (i % mGridWidth) * mBoxWidth + 2,
-                    (i / mGridWidth) * mBoxHeight + 10);
+                    (i % mGridWidth) * mBoxWidth + mImageOffsetX,
+                    (i / mGridWidth) * mBoxHeight + mImageOffsetY);
             }
         }
     }
@@ -181,7 +182,8 @@ void EmoteShortcutContainer::safeDraw(Graphics *restrict graphics) restrict2
             mForegroundColor,
             mForegroundColor2,
             key,
-            emoteX + 2, emoteY + 2);
+            emoteX + mTextOffsetX,
+            emoteY + mTextOffsetY);
     }
 
     BLOCK_END("EmoteShortcutContainer::draw")
diff --git a/src/gui/widgets/itemshortcutcontainer.cpp b/src/gui/widgets/itemshortcutcontainer.cpp
index 81ccf4ab5..6a2480bae 100644
--- a/src/gui/widgets/itemshortcutcontainer.cpp
+++ b/src/gui/widgets/itemshortcutcontainer.cpp
@@ -124,7 +124,8 @@ void ItemShortcutContainer::draw(Graphics *const graphics)
             mForegroundColor,
             mForegroundColor,
             key,
-            itemX + 2, itemY + 2);
+            itemX + mTextOffsetX,
+            itemY + mTextOffsetY);
 
         const int itemId = selShortcut->getItem(i);
         const ItemColor itemColor = selShortcut->getItemColor(i);
@@ -149,7 +150,9 @@ void ItemShortcutContainer::draw(Graphics *const graphics)
                         caption = "Eq.";
 
                     image->setAlpha(1.0F);
-                    graphics->drawImage(image, itemX, itemY);
+                    graphics->drawImage(image,
+                        itemX + mImageOffsetX,
+                        itemY + mImageOffsetY);
                     if (item->isEquipped() == Equipped_true)
                     {
                         font->drawString(graphics,
@@ -184,7 +187,9 @@ void ItemShortcutContainer::draw(Graphics *const graphics)
                     if (image != nullptr)
                     {
                         image->setAlpha(1.0F);
-                        graphics->drawImage(image, itemX, itemY);
+                        graphics->drawImage(image,
+                            itemX + mImageOffsetX,
+                            itemY + mImageOffsetY);
                     }
                 }
 
@@ -192,7 +197,8 @@ void ItemShortcutContainer::draw(Graphics *const graphics)
                     mForegroundColor,
                     mForegroundColor,
                     spell->getSymbol(),
-                    itemX + 2, itemY + mBoxHeight / 2);
+                    itemX + mTextOffsetX,
+                    itemY + mBoxHeight / 2);
             }
         }
         else if (skillDialog != nullptr)
@@ -206,7 +212,9 @@ void ItemShortcutContainer::draw(Graphics *const graphics)
                 if (image != nullptr)
                 {
                     image->setAlpha(1.0F);
-                    graphics->drawImage(image, itemX, itemY);
+                    graphics->drawImage(image,
+                        itemX + mImageOffsetX,
+                        itemY + mImageOffsetY);
                 }
                 if (!skill->data->haveIcon)
                 {
@@ -214,7 +222,7 @@ void ItemShortcutContainer::draw(Graphics *const graphics)
                         mForegroundColor,
                         mForegroundColor,
                         skill->data->shortName,
-                        itemX + 2,
+                        itemX + mTextOffsetX,
                         itemY + mBoxHeight / 2);
                 }
             }
@@ -263,7 +271,8 @@ void ItemShortcutContainer::safeDraw(Graphics *const graphics)
             mForegroundColor,
             mForegroundColor,
             key,
-            itemX + 2, itemY + 2);
+            itemX + mTextOffsetX,
+            itemY + mTextOffsetY);
 
         const int itemId = selShortcut->getItem(i);
         const ItemColor itemColor = selShortcut->getItemColor(i);
@@ -288,7 +297,9 @@ void ItemShortcutContainer::safeDraw(Graphics *const graphics)
                         caption = "Eq.";
 
                     image->setAlpha(1.0F);
-                    graphics->drawImage(image, itemX, itemY);
+                    graphics->drawImage(image,
+                        itemX + mImageOffsetX,
+                        itemY + mImageOffsetY);
                     if (item->isEquipped() == Equipped_true)
                     {
                         font->drawString(graphics,
@@ -323,7 +334,9 @@ void ItemShortcutContainer::safeDraw(Graphics *const graphics)
                     if (image != nullptr)
                     {
                         image->setAlpha(1.0F);
-                        graphics->drawImage(image, itemX, itemY);
+                        graphics->drawImage(image,
+                            itemX + mImageOffsetX,
+                            itemY + mImageOffsetY);
                     }
                 }
 
@@ -331,7 +344,8 @@ void ItemShortcutContainer::safeDraw(Graphics *const graphics)
                     mForegroundColor,
                     mForegroundColor,
                     spell->getSymbol(),
-                    itemX + 2, itemY + mBoxHeight / 2);
+                    itemX + mTextOffsetX,
+                    itemY + mBoxHeight / 2);
             }
         }
         else if (skillDialog != nullptr)
@@ -345,7 +359,9 @@ void ItemShortcutContainer::safeDraw(Graphics *const graphics)
                 if (image != nullptr)
                 {
                     image->setAlpha(1.0F);
-                    graphics->drawImage(image, itemX, itemY);
+                    graphics->drawImage(image,
+                        itemX + mImageOffsetX,
+                        itemY + mImageOffsetY);
                 }
                 if (!skill->data->haveIcon)
                 {
@@ -353,7 +369,7 @@ void ItemShortcutContainer::safeDraw(Graphics *const graphics)
                         mForegroundColor,
                         mForegroundColor,
                         skill->data->shortName,
-                        itemX + 2,
+                        itemX + mTextOffsetX,
                         itemY + mBoxHeight / 2);
                 }
             }
diff --git a/src/gui/widgets/shortcutcontainer.cpp b/src/gui/widgets/shortcutcontainer.cpp
index f1e9c8a18..5eb4ea46f 100644
--- a/src/gui/widgets/shortcutcontainer.cpp
+++ b/src/gui/widgets/shortcutcontainer.cpp
@@ -25,6 +25,7 @@
 #include "settings.h"
 
 #include "gui/gui.h"
+#include "gui/skin.h"
 
 #include "utils/delete2.h"
 
@@ -49,6 +50,10 @@ ShortcutContainer::ShortcutContainer(Widget2 *const widget) :
     mBoxHeight(1),
     mGridWidth(1),
     mGridHeight(1),
+    mImageOffsetX(2),
+    mImageOffsetY(2),
+    mTextOffsetX(2),
+    mTextOffsetY(2),
     mVertexes(new ImageCollection)
 {
     mAllowLogic = false;
@@ -164,4 +169,11 @@ void ShortcutContainer::setSkin(const Widget2 *const widget,
 {
     setWidget2(widget);
     mSkin = skin;
+    if (mSkin)
+    {
+        mImageOffsetX = mSkin->getOption("imageOffsetX", 2);
+        mImageOffsetY = mSkin->getOption("imageOffsetY", 2);
+        mTextOffsetX = mSkin->getOption("textOffsetX", 2);
+        mTextOffsetY = mSkin->getOption("textOffsetY", 2);
+    }
 }
diff --git a/src/gui/widgets/shortcutcontainer.h b/src/gui/widgets/shortcutcontainer.h
index fd64827ea..55e41c714 100644
--- a/src/gui/widgets/shortcutcontainer.h
+++ b/src/gui/widgets/shortcutcontainer.h
@@ -119,6 +119,10 @@ class ShortcutContainer notfinal : public Widget,
         int mBoxHeight;
         int mGridWidth;
         int mGridHeight;
+        int mImageOffsetX;
+        int mImageOffsetY;
+        int mTextOffsetX;
+        int mTextOffsetY;
         ImageCollection *mVertexes;
 };
 
diff --git a/src/gui/widgets/spellshortcutcontainer.cpp b/src/gui/widgets/spellshortcutcontainer.cpp
index 4d53e8190..b2a80209e 100644
--- a/src/gui/widgets/spellshortcutcontainer.cpp
+++ b/src/gui/widgets/spellshortcutcontainer.cpp
@@ -109,7 +109,9 @@ void SpellShortcutContainer::draw(Graphics *const graphics)
                 if (image != nullptr)
                 {
                     image->setAlpha(1.0F);
-                    graphics->drawImage(image, itemX, itemY);
+                    graphics->drawImage(image,
+                        itemX + mImageOffsetX,
+                        itemY + mImageOffsetY);
                 }
             }
 
@@ -117,7 +119,8 @@ void SpellShortcutContainer::draw(Graphics *const graphics)
                 mForegroundColor,
                 mForegroundColor2,
                 spell->getSymbol(),
-                itemX + 2, itemY + mBoxHeight / 2);
+                itemX + mTextOffsetX,
+                itemY + mBoxHeight / 2);
         }
     }
 
@@ -169,7 +172,9 @@ void SpellShortcutContainer::safeDraw(Graphics *const graphics)
                 if (image != nullptr)
                 {
                     image->setAlpha(1.0F);
-                    graphics->drawImage(image, itemX, itemY);
+                    graphics->drawImage(image,
+                        itemX + mImageOffsetX,
+                        itemY + mImageOffsetY);
                 }
             }
 
@@ -177,7 +182,8 @@ void SpellShortcutContainer::safeDraw(Graphics *const graphics)
                 mForegroundColor,
                 mForegroundColor2,
                 spell->getSymbol(),
-                itemX + 2, itemY + mBoxHeight / 2);
+                itemX + mTextOffsetX,
+                itemY + mBoxHeight / 2);
         }
     }
 
diff --git a/src/gui/widgets/virtshortcutcontainer.cpp b/src/gui/widgets/virtshortcutcontainer.cpp
index cac320d54..e03d19872 100644
--- a/src/gui/widgets/virtshortcutcontainer.cpp
+++ b/src/gui/widgets/virtshortcutcontainer.cpp
@@ -123,7 +123,9 @@ void VirtShortcutContainer::draw(Graphics *const graphics)
                     caption = "Eq.";
 
                 image->setAlpha(1.0F);
-                graphics->drawImage(image, itemX, itemY);
+                graphics->drawImage(image,
+                    itemX + mImageOffsetX,
+                    itemY + mImageOffsetY);
                 if (item->isEquipped() == Equipped_true)
                 {
                     font->drawString(graphics,
@@ -197,7 +199,9 @@ void VirtShortcutContainer::safeDraw(Graphics *const graphics)
                     caption = "Eq.";
 
                 image->setAlpha(1.0F);
-                graphics->drawImage(image, itemX, itemY);
+                graphics->drawImage(image,
+                    itemX + mImageOffsetX,
+                    itemY + mImageOffsetY);
                 if (item->isEquipped() == Equipped_true)
                 {
                     font->drawString(graphics,