Text with Navigator Tab Icons

A Config Script for GameBanana

Updates

ScriptParentSubmitterStats
  • Overhaul Updated alongside the site.
1.4 4mo
  • Adjustment Updated alongside site.
  • Removal Due to multiple site changes, will not work on lower resolution screens (>1500px)
1.3 9mo
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

Sign up to access this!
  • BlaXe avatar
    BlaXe username pic Joined 5y ago
    Online
    18,144 points Ranked 248th
    39 medals 7 legendary 6 rare
    • Returned 5000 times Medal icon
    • Reached 100 subscribers Medal icon
    • 1st Place - 2016 Uberstyles Contest Medal icon
    • Thanked 500 submitters Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
    • 1st Place - 2017 Uberstyles Contest Medal icon
    BlaXe avatar
    BlaXe
    Uberstyle Expert
    1y
    Maybe add text-alignleft ?

    10

    Making new Uberstyle! avatar
    Mantra
    Making new Uberstyle!
    URL to post:
  • Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage username pic Joined 8y ago
    Moderator
    In Extremis
    2,343 points Ranked 2242nd
    75 medals 10 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
    (づ。◕‿‿◕。)づ
    3y
    Posted by X RaY

    Nice code! :V

    but you forgot the "LOGIN" tab.

    Thanks for the tip, will fix that soon :)
    Ode to Code avatar
    Mantra
    Ode to Code
    URL to post:
  • X RaY avatar
    X RaY username pic Joined 4y ago
    RECHARGING...
    Black Mesa Inc. Flag Affiliation: Black Mesa Inc.
    15,677 points Ranked 290th
    35 medals 2 legendary 6 rare
    • Submitted 100 Sounds Medal icon
    • 30 submissions featured Medal icon
    • Submitted 50 Sounds Medal icon
    • 10 submissions featured Medal icon
    • Returned 1000 times Medal icon
    • Submitted 20 Maps Medal icon
    X RaY avatar
    X RaY
    Black Mesa Inc. Flag
    Affiliation
    Black Mesa Inc.
    3y
    Nice code! :V

    but you forgot the "LOGIN" tab.

    10

    Another Black Mesa Fan <3
    URL to post:

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 8y ago
Moderator
Offline
2,343 points Ranked 2242nd
75 medals 10 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 8y ago
Moderator
In Extremis
2,343 points Ranked 2242nd
75 medals 10 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+
  • 1.6k Views
  • 4 Posts
  • 3ySubmitted
  • 4moModified
  • 4moUpdated

Scores

91 bScore
10 Rating

3 voters

Sign up to access this!

More from Submitter

More UI Themes Scripts

bcp.crwdcntrl.net tracking pixel