Text with Navigator Tab Icons

A Config Script for GameBanana

Updates

ScriptParentSubmitterStats
  • Overhaul Updated alongside the site.
1.4 1mo
Stats
  • Adjustment Updated alongside site.
  • Removal Due to multiple site changes, will not work on lower resolution screens (>1500px)
1.3 6mo
Stats
189 lines | 4 kb | Raw Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
:root
{
        --ApproxTextWidth               : 6em;
        --NewSideNavSmallIconBarWidth   : calc(var(--SideNavSmallIconBarWidth) + var(--ApproxTextWidth));
        --NewSideNavRegularIconBarWidth : calc(var(--SideNavRegularIconBarWidth) + var(--ApproxTextWidth));
        --NewSidePanelFullWidth         : calc(var(--SideNavFullWidth) + var(--ApproxTextWidth));
}

/** ADDING TEXT TO ICONS AND STYLING THEM **/

#SideNav pane header
{
        display : none;
}

#SideNav module icon
{
        box-sizing : border-box;
        margin     : 0 !important;
        padding    : 5px !important;
        text-align : left;
}

body[data-_sSideNavIconSize="Small"] #SideNav module icon
{
        width : var(--NewSideNavSmallIconBarWidth);
}

body[data-_sSideNavIconSize="Regular"] #SideNav module icon
{
        width : var(--NewSideNavRegularIconBarWidth);
}

#SideNav module icon svg
{
        vertical-align : middle;
}

#SideNav module icon::after
{
        margin-left    : 5px;
        vertical-align : middle;
        font-size      : .8em;
        text-transform : uppercase;
}

#AlertsNavModule icon::after
{
        content : 'Alerts';
}

#PersonalNavModule icon::after
{
        content : 'Personal';
}

#SubmissionsNavModule icon::after
{
        content : 'Submissions';
}

#ActivityNavModule icon::after
{
        content : 'Activity';
}

#StatsNavModule icon::after
{
        content : 'Stats';
}

#RemindersNavModule icon::after
{
        content : 'Reminders';
}

#MedalsNavModule icon::after
{
        content : 'Medals';
}

#MessagesNavModule icon::after
{
        content : 'Messages';
}

#InstallersNavModule icon::after
{
        content : 'Installers';
}

#NavOptionsNavModule icon::after
{
        content : 'Nav Options';
}

#LoginNavModule icon::after
{
        content : 'Login';
}

#ManageNavModule icon::after
{
        content : 'Manage';
}

#AdminNavModule icon::after
{
        content : 'Admin';
}

/** CONFIGURE LAYOUT **/

/* SIDE NAV WIDTH */

body[data-_sSideNavMode=Collapsed][data-_sSideNavIconSize="Small"] #SideNav
{
        width : var(--NewSideNavSmallIconBarWidth);
}

body[data-_sSideNavMode=Collapsed][data-_sSideNavIconSize="Regular"] #SideNav
{
        width : var(--NewSideNavRegularIconBarWidth)
}

body[data-_sSideNavMode=Collapsed] #SideNav.Expanded
{
        width : var(--NewSidePanelFullWidth);
}

/* PANE POSITIONING */

body[data-_sSideNavPosition="Left"][data-_sSideNavIconSize="Small"] #SideNav pane
{
        left : var(--NewSideNavSmallIconBarWidth);
}

body[data-_sSideNavPosition="Left"][data-_sSideNavIconSize="Regular"] #SideNav pane
{
        left : var(--NewSideNavRegularIconBarWidth)
}

body[data-_sSideNavPosition="Right"][data-_sSideNavIconSize="Small"] #SideNav pane
{
        right : var(--NewSideNavSmallIconBarWidth);
}

body[data-_sSideNavPosition="Right"][data-_sSideNavIconSize="Regular"] #SideNav pane
{
        right : var(--NewSideNavRegularIconBarWidth)
}

/* BODY MARGINS */

body[data-_sSideNavMode="Collapsed"][data-_sSideNavPosition="Left"][data-_sSideNavIconSize="Small"] #MainContent,
body[data-_sSideNavMode="Collapsed"][data-_sSideNavPosition="Left"][data-_sSideNavIconSize="Small"] #PageFooter
{
        margin-left: var(--NewSideNavSmallIconBarWidth);
}

body[data-_sSideNavMode="Collapsed"][data-_sSideNavPosition="Left"][data-_sSideNavIconSize="Regular"] #MainContent,
body[data-_sSideNavMode="Collapsed"][data-_sSideNavPosition="Left"][data-_sSideNavIconSize="Regular"] #PageFooter
{
        margin-left: var(--NewSideNavRegularIconBarWidth);
}

body[data-_sSideNavMode="Collapsed"][data-_sSideNavPosition="Right"][data-_sSideNavIconSize="Small"] #MainContent,
body[data-_sSideNavMode="Collapsed"][data-_sSideNavPosition="Right"][data-_sSideNavIconSize="Small"] #PageFooter
{
        margin-right: var(--NewSideNavSmallIconBarWidth);
}

body[data-_sSideNavMode="Collapsed"][data-_sSideNavPosition="Right"][data-_sSideNavIconSize="Regular"] #MainContent,
body[data-_sSideNavMode="Collapsed"][data-_sSideNavPosition="Right"][data-_sSideNavIconSize="Regular"] #PageFooter
{
        margin-right: var(--NewSideNavRegularIconBarWidth);
}

/* TOP NAV PADDING */

body[data-_sSideNavIconSize="Small"] #TopNav
{
        padding-left : var(--NewSideNavSmallIconBarWidth);
}

body[data-_sSideNavIconSize="Regular"] #TopNav
{
        padding-left : var(--NewSideNavRegularIconBarWidth)
}

Summary

Just adds some text alongside the Navigator Tab icons for a different look.

This should work with any configuration of the side nav.

Preview

Posts

Embed

Share banner
Image URL:
HTML embed code:
BB embed code:
Markdown embed code:

Credits

Key Authors
Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage username pic Joined 7y ago
Offline
4,243 points Ranked 1192nd
74 medals 9 legendary 20 rare
  • Submitted 60 Sprites Medal icon
  • Thanked 500 submitters Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
  • Submitted 100 Skins Medal icon
  • Reached 100 subscribers Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
Author

Submitter

Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage username pic Joined 7y ago
In Extremis
4,243 points Ranked 1192nd
74 medals 9 legendary 20 rare
  • Submitted 60 Sprites Medal icon
  • Thanked 500 submitters Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
  • Submitted 100 Skins Medal icon
  • Reached 100 subscribers Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon

Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage

Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Sub-category
UI Themes
Super-category
Cascade Style Sheets

License

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Share on Google+

Stats

  • 1,415 Views
  • 4 Posts
  • 3y Submitted
  • 1mo Modified
  • 1mo Updated

Scores

91 bScore
10 Rating

3 voters

Sign up to access this!

More from Submitter

bcp.crwdcntrl.net tracking pixel