Sample CSS Codes
Go to Portfolio Tools > Settings > Customize > Custom CSS
Delete all coding and replace with the code below.
The codes below are courtesy of Cynthia Davidson, Writing & Rhetoric faculty at SBU.
The added code is highlighted like this. The changed colors/values are highlighted like this. Link to ePortfolio.
Custom CSS:
body {
background:#009900;
color: #222222;
}
a:hover { text-shadow: 0 0 5px #01DF01; }
#site_topnav ul li a {
color:#FFFFFF;
}
#header_container {
padding-bottom:5px;
padding-top:5px;
}
#header_container, #main_container {
background-color:#CCFFCC;
border-color:#004C00;
border-style:solid;
border-width:0 20px;
position:relative;
}
#header_container .title {
border-bottom:2px solid #CCCCCC !important;
padding:5px;
}
#module_topnav{
border: 15px solid #ccc;
}
.navigation_topnav {
background-color:#004C00;
}
.navigation_topnav a {
color:#FFFFFF;
}
#footer_container {
background:#004C00;
color: #FFFFFF;;
border-top:1px solid #AAAAAA;
}
.title{
display:block;
}
#footer {
background:#66C266;
color:#FFFFFF;
}
#module_leftnav .navigation_leftnav
{
background: #A6CFA6;
}
.navigation_leftnav h4 a
{
color: #4D4D4D;
}
.navigation_leftnav a
{
color: #4D4D4D;
}
#portfolioright
{background-color: #CCFFCC;
color:000000;
}
The addedcode is highlighted like this. The changed colors/values are highlighted like this. Link to ePortfolio.
Custom CSS:
body {
background:#0000FF;
color: #222222;
}
#site_topnav ul li a {
color:#FFFFFF;
}
#header_container {
padding-bottom:0.5em;
padding-top:10px;
}
#header_container, #main_container {
background-color:#C2E0FF;
border-color:#C2E0FF;
border-style:solid;
border-width:0 10px;
position:relative;
}
#header_container .title {
border-bottom:2px solid #CCCCCC !important;
padding:15px;
}
#module_topnav{
border: 1px solid #ccc
}
.navigation_topnav {
background-color:#0000FF;
}
.navigation_topnav a {
color:#FFFFFF;
font-family: Verdana,Helvetica,Arial,sans-serif;
}
#footer_container {
background:#0000FF;
border-top:1px solid #AAAAAA;
}
.title{
display:block;
}
#footer {
background:none;
color:#FFFFFF;
}
#module_leftnav .navigation_leftnav
{
background:#FFFFFF;
}
.navigation_leftnav h4 a
{
color: #000000;
}
.navigation_leftnav a
{
color: #000000;
}
#portfolioright
{background-color: #FFFFFF;
color:000000;
The added code is highlighted like this. The changed colors/values are highlighted like this. Link to ePortfolio.
Custom CSS:
body {
background:#7C4B19;
color: #222222;
}
a:hover { text-shadow: 0 0 5px #01DF01; }
#site_topnav ul li a {
color:#FFFFFF;
}
#header_container {
padding-bottom:5px;
padding-top:5px;
}
#header_container, #main_container {
background-color:#F2F2F2;
border-color:#BDBDBD;
border-style:solid;
border-width:0 20px;
position:relative;
}
#header_container .title {
border-bottom:2px solid #CCCCCC !important;
padding:5px;
font-family: high tower text; font-size:12pt;
}
#module_topnav{
border: 15px solid #ccc;
}
.navigation_topnav {
background-color:#7C4B19;
}
.navigation_topnav a {
color:#BDBDBD;
font-family: high tower text; font-size:12pt;
}
#footer_container {
background:#7C4B19;
color: #FFFFFF;;
border-top:1px solid #AAAAAA;
}
.title{
display:block;
}
#footer {
background:#7C4B19;
color:#FFFFFF;
}
#module_leftnav .navigation_leftnav
{
background: #BDBDBD;
}
.navigation_leftnav h4 a
{
color: #4D4D4D;
font-family: high tower text; font-size:14pt;
}
.navigation_leftnav a
{
color: #4D4D4D;
font-family: high tower text; font-size:9pt;
}
#portfolioright
{background-color: #F2F2F2;
color:000000;
}
The added code is highlighted like this. The changed colors/values are highlighted like this. Link to ePortfolio.
Custom CSS:
body {
background:#000000;
color: #222222;
}
a:hover { text-shadow: 0 0 5px #01DF01; }
#site_topnav ul li a {
color:#FFFFFF;
}
#header_container {
padding-bottom:5px;
padding-top:5px;
}
#header_container, #main_container {
background-color:#F2F2F2;
border-color:#BDBDBD;
border-style:solid;
border-width:0 20px;
position:relative;
}
#header_container .title {
border-bottom:2px solid #CCCCCC !important;
padding:5px;
font-family: fantasy; font-size:12pt;
}
#module_topnav{
border: 15px solid #ccc;
}
.navigation_topnav {
background-color:#000000;
}
.navigation_topnav a {
color:#BDBDBD;
font-family: fantasy; font-size:12pt;
}
#footer_container {
background:#000000;
color: #FFFFFF;;
border-top:1px solid #AAAAAA;
}
.title{
display:block;
}
#footer {
background:#000000;
color:#FFFFFF;
}
#module_leftnav .navigation_leftnav
{
background: #BDBDBD;
}
.navigation_leftnav h4 a
{
color: #4D4D4D;
font-family: fantasy; font-size:14pt;
}
.navigation_leftnav a
{
color: #4D4D4D;
font-family: fantasy; font-size:9pt;
}
#portfolioright
{background-color: #F2F2F2;
color:000000;
}
The added code is highlighted like this. The changed colors/values are highlighted like this. Link to ePortfolio.
Custom CSS:
body {
background:#A31919;
color: #222222;
}
#site_topnav ul li a {
color:#FFFFFF;
}
#header_container {
padding-bottom:0.5em;
padding-top:10px;
}
#header_container, #main_container {
background-color:#FFCCCC;
border-color:#FFCCCC;
border-style:solid;
border-width:0 10px;
position:relative;
}
#header_container .title {
border-bottom:2px solid #CCCCCC
!important;
padding:15px;
}
#module_topnav{
border: 1px solid #ccc
}
.navigation_topnav {
background-color:#A31919;
}
.navigation_topnav a {
color:#FFFFFF;
font-family: Verdana,Helvetica,Arial,sans-serif;
}
#footer_container {
background:none;
border-top:1px solid #AAAAAA;
}
.title{
display:block;
}
#footer {
background:#A31919;
color:#FFFFFF;
}
#module_leftnav .navigation_leftnav
{
background:#A31919;
}
.navigation_leftnav h4 a
{
color: #FFFFFF;
}
.navigation_leftnav a
{
color: #FFFFFF;
}
#portfolioright
{background-color: #FFFFFF;
color:000000;}