ASP.NET Themes and Skins
February 17, 2022
In this video, you’ll learn how to create Themes and Skins in an ASP.NET Web Forms Application.
Default CSS:
CSS
x
56
56
1
body {2
margin: 0px;3
font-family: Arial, Helvetica, sans-serif;4
background-color: lightgrey;5
text-align: center;6
}7
8
main {9
padding: 10px;10
}11
12
nav {13
background-color: #808080;14
padding: 5px;15
}16
17
ul {18
list-style-type: none;19
}20
21
li a {22
color: #F1FAEE;23
font-size: 30px;24
width: 120px;25
display: inline-block;26
padding: 2px;27
border-radius: 4px;28
}29
30
li {31
display: inline;32
padding-left: 2px;33
column-width: 20px;34
}35
36
a {37
text-decoration: none;38
text-align: center;39
}40
41
li a:hover {42
background-color: #CCC;43
color: #000;44
}45
46
footer {47
background-color: #808080;48
text-align: center;49
color: white;50
position: fixed;51
bottom: 0px;52
width: 100%;53
padding: 20px;54
margin: 5px auto 0 auto;55
}56
Blue CSS:
CSS
xxxxxxxxxx1
70
70
1
body {2
margin: 0px;3
font-family: Arial, Helvetica, sans-serif;4
background-color: lightblue;5
text-align: center;6
}7
8
main {9
padding: 10px;10
}11
12
nav {13
background-color: darkblue;14
padding: 5px;15
}16
17
ul {18
list-style-type: none;19
}20
21
li a {22
color: #F1FAEE;23
font-size: 30px;24
width: 120px;25
display: inline-block;26
padding: 2px;27
border-radius: 4px;28
}29
30
li {31
display: inline;32
padding-left: 2px;33
column-width: 20px;34
}35
36
a {37
text-decoration: none;38
text-align: center;39
}40
41
li a:hover {42
background-color: lightcyan;43
color: darkblue;44
}45
46
footer {47
background-color: darkblue;48
text-align: center;49
color: white;50
position: fixed;51
bottom: 0px;52
width: 100%;53
padding: 20px;54
margin: 5px auto 0 auto;55
}56
57
.ButtonDefault {58
color: Blue;59
background-color: #CCFFFF;60
border-color: #0000CC;61
border-width: 1px;62
border-style: solid;63
}64
.ButtonSocialMedia {65
color: White;66
background-color: Blue;67
border-color: #0000CC;68
border-width: 1px;69
border-style: solid;70
}Orange CSS:
CSS
xxxxxxxxxx1
56
56
1
body {2
margin: 0px;3
font-family: Arial, Helvetica, sans-serif;4
background-color: lightsalmon;5
text-align: center;6
}7
8
main {9
padding: 10px;10
}11
12
nav {13
background-color: orangered;14
padding: 5px;15
}16
17
ul {18
list-style-type: none;19
}20
21
li a {22
color: #F1FAEE;23
font-size: 30px;24
width: 120px;25
display: inline-block;26
padding: 2px;27
border-radius: 4px;28
}29
30
li {31
display: inline;32
padding-left: 2px;33
column-width: 20px;34
}35
36
a {37
text-decoration: none;38
text-align: center;39
}40
41
li a:hover {42
background-color: lightsalmon;43
color: #000;44
}45
46
footer {47
background-color: orangered;48
text-align: center;49
color: white;50
position: fixed;51
bottom: 0px;52
width: 100%;53
padding: 20px;54
margin: 5px auto 0 auto;55
}56
BlueTheme Button Skin
CSS
xxxxxxxxxx1
2
1
<asp:Button runat="server" CssClass="ButtonDefault" />2
<asp:Button runat="server" CssClass="ButtonSocialMedia" SkinID="BtnSSM" />
