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:
body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: lightgrey;
text-align: center;
}
main {
padding: 10px;
}
nav {
background-color: #808080;
padding: 5px;
}
ul {
list-style-type: none;
}
li a {
color: #F1FAEE;
font-size: 30px;
width: 120px;
display: inline-block;
padding: 2px;
border-radius: 4px;
}
li {
display: inline;
padding-left: 2px;
column-width: 20px;
}
a {
text-decoration: none;
text-align: center;
}
li a:hover {
background-color: #CCC;
color: #000;
}
footer {
background-color: #808080;
text-align: center;
color: white;
position: fixed;
bottom: 0px;
width: 100%;
padding: 20px;
margin: 5px auto 0 auto;
}
Blue CSS:
body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: lightblue;
text-align: center;
}
main {
padding: 10px;
}
nav {
background-color: darkblue;
padding: 5px;
}
ul {
list-style-type: none;
}
li a {
color: #F1FAEE;
font-size: 30px;
width: 120px;
display: inline-block;
padding: 2px;
border-radius: 4px;
}
li {
display: inline;
padding-left: 2px;
column-width: 20px;
}
a {
text-decoration: none;
text-align: center;
}
li a:hover {
background-color: lightcyan;
color: darkblue;
}
footer {
background-color: darkblue;
text-align: center;
color: white;
position: fixed;
bottom: 0px;
width: 100%;
padding: 20px;
margin: 5px auto 0 auto;
}
.ButtonDefault {
color: Blue;
background-color: #CCFFFF;
border-color: #0000CC;
border-width: 1px;
border-style: solid;
}
.ButtonSocialMedia {
color: White;
background-color: Blue;
border-color: #0000CC;
border-width: 1px;
border-style: solid;
}Orange CSS:
body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: lightsalmon;
text-align: center;
}
main {
padding: 10px;
}
nav {
background-color: orangered;
padding: 5px;
}
ul {
list-style-type: none;
}
li a {
color: #F1FAEE;
font-size: 30px;
width: 120px;
display: inline-block;
padding: 2px;
border-radius: 4px;
}
li {
display: inline;
padding-left: 2px;
column-width: 20px;
}
a {
text-decoration: none;
text-align: center;
}
li a:hover {
background-color: lightsalmon;
color: #000;
}
footer {
background-color: orangered;
text-align: center;
color: white;
position: fixed;
bottom: 0px;
width: 100%;
padding: 20px;
margin: 5px auto 0 auto;
}
BlueTheme Button Skin
<asp:Button runat="server" CssClass="ButtonDefault" /> <asp:Button runat="server" CssClass="ButtonSocialMedia" SkinID="BtnSSM" />
