Profile Themes
You can change the look and feel of your public profile pages. There are themes we provide, in addition to, user submitted themes.
Changing the look and feel of your profile is as simple as clicking on the theme you want to use.
Custom Themes
If you are so inclined, you can really stand out by providing your own "schematics" for your profile. The difficulty level goes up, but your level of control skyrockets. Continue on to understand how Raveal's theme system works.
This information is intended for people with technical knowledge of the workings of HTML and CSS.
Creating a custom theme for your public profile in Raveal involves two steps:
1. Select a Layout
2. Create a Cascading Style Sheet (CSS) and upload it.
A Layout tells Raveal how you want your resume/portfolio elements positioned. There are, currently, two different layouts available: Top Shelf and Bottom Shelf. The major differences being Top Shelf shows all portfolio galleries at once while Bottom Shelf only shows one gallery at a time. Additionally, while both are very clutter free layouts, Bottom Shelf is the simpler/cleaner of the two.
All HTML elements in the public pages have CSS class names and/or IDs that you can use to style via CSS. Example CSS is attached and you can use these as the basis for your own.
There are two stylesheets in the base themes Raveal provides. You can use either of these as the basis of your custom theme.
raveal-blue.css
This is the "light" theme. It uses a white background with blue highlights.
raveal-dark.css
This is the "dark" theme. It uses a black background with blue links, but leaves off the gradients at the top of the page.
Once your CSS is ready for a test, go to your Profile > Theme page and upload your CSS via the "Build Your Own" form.
Example raveal-blue.css:
/**************************************************************
* Colors are first for those just looking for a quick tweak.
*************************************************************/
body {
background-color: #fff;
}
#header-wrapper {
background-color: #fff;
}
a,
a:visited {
color: #2EA25C; /* green */
color: #C71514; /* red */
}
.top-shelf #title h1 {
color: #fff;
}
.top-shelf #title h2 {
color: #0072bc; /* raveal blue */
}
.bottom-shelf #title h1,
.bottom-shelf #title h2,
.bottom-shelf h3 {
color: #333;
}
.bottom-shelf #title h2 {
color: #bcbcbc !important;
}
.bottom-shelf h3 {
color: #0072bc !important; /* raveal blue */
}
#content-wrapper {
background-color: #fff;
}
#footer {
color: #aaa;
}
#content h1,
#content h2,
#content h3 {
color: #0072bc; /* raveal blue */
border-color: #ebebeb;
}
#contact {
border-color: #cfcfcf;
background-color: #ebebeb;
}
#contact h3 {
color: #000;
}
.resume-section {
border-color: #ebebeb;
}
.date {
color: #959595;
}
.location {
color: #959595;
}
.title {
color: #0072bc;
}
.heading a {
color: #003663 !important;
}
.org, .institution {
color: #003663 !important;
}
.blog-heading {
color: #0072bc;
border-color: #ebebeb;
}
.blog-heading .title,
.blog-heading .title a {
color: #0072bc !important;
}
#nav-banner {
background-color: #333;
}
.featured-empty {
border-color: #ccc;
}
.gallery-loading {
background-color: #fff;
}
.top-shelf .gallery {
border-color: #b0b8bd;
background-color: #fff;
background-image: url(/images/section/section-bg.png);
background-repeat: repeat-x;
background-position: center bottom;
}
#gallery-nav ul {
border-top-color: #ebebeb;
border-bottom-color: #ebebeb;
}
#gallery-nav a, #gallery-nav a:active {
color: #0072bc;
}
/**********************************************************
* Done with color, the rest of the style follows
*********************************************************/
body {
padding: 0;
margin: 0;
font: 1em Myriad Pro, Corbel, Tahoma, sans-serif;
}
#container {
}
#header-wrapper {
background: url(/images/people/header-bg.png) repeat-x;
}
#header {
position: relative;
margin: 0 auto;
width: 1000px;
height: 84px;
}
/**********************************************************
* Navigation
*********************************************************/
.top-shelf #nav {
position: absolute;
height: 32px;
top: 52px;
left: 635px;
}
#nav ul {
margin: 0;
padding: 0;
/*position: absolute;*/
/*float:right;*/
list-style: none;
/*width: 300px;*/
}
#nav li {
float: left;
padding-right: 5px;
}
#nav a {
display: block;
width: 119px;
height: 32px;
text-indent: -9999px;
color: #000; /* sneaky, just to help hide those idiotic dotted lines that IE and Firefox add. */
}
#nav a.resume {
background-image: url(/images/people/tab-resume.png);
}
#nav a.resume.active {
background-image: url(/images/people/tab-resume-active.png);
}
#nav a.portfolio {
background-image: url(/images/people/tab-portfolio.png);
}
#nav a.portfolio.active {
background-image: url(/images/people/tab-portfolio-active.png);
}
#nav a.blog {
background-image: url(/images/people/tab-blog.png);
}
#nav a.blog.active {
background-image: url(/images/people/tab-blog-active.png);
}
/**********************************************************
* Titles and such
*********************************************************/
.top-shelf #title {
width: 750px;
padding-top: 30px;
white-space: nowrap; /* overflow: hidden; opera doesn't like this :( */
}
.top-shelf #title h1 {
margin: 0;
padding-right: 10px;
display: inline;
font-size: 2.4em;
font-weight: normal;
}
.top-shelf #title h2 {
display: inline;
font-size: 1.7em;
font-weight: normal;
}
.bottom-shelf #title h1,
.bottom-shelf #title h2,
.bottom-shelf h3 {
font-size: 2.4em;
font-weight: normal;
border: none;
}
.bottom-shelf #title h2 {
font-size: 1.7em;
font-weight: normal;
}
.bottom-shelf h3 {
font-size: 1.7em;
font-weight: normal;
border: none !important;
}
#top-band {
height: 12px;
width: 947px;
background: url(/images/people/top-band.png) no-repeat;
float: right;
clear: left;
}
#content-wrapper {
margin-top: 1px;
background: url(/images/people/content-bg.png) repeat-x;
min-height: 300px;
}
#content {
width: 1000px;
margin: 0 auto;
padding: 36px 0;
font-size: .8em;
}
/**********************************************************
* Leave our footer in here, please! We make it unobtrusive.
*********************************************************/
#footer {
margin: 0 auto;
width: 1000px;
font-size: .8em;
text-align: right;
}
/**********************************************************
* Content styling
*********************************************************/
.bottom-shelf #bio {
/*text-align: justify;*/
margin: 20px 10px 0 0;
}
p, #bio {
font-size: 1.1em;
}
#content h1,
#content h2,
#content h3 {
font-weight: normal;
padding: 0;
margin: 0;
border-bottom: 3px solid;
}
#content h1 {
font-size: 1.85em;
}
#contact {
width: 350px;
float: right;
padding: 10px;
margin: 0 0 10px 10px;
border: 1px solid;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#contact h3 {
font-size: 1.5em;
}
#contact p {
margin: 0;
padding: 0;
}
.spacer {
margin: 40px;
}
.resume-section {
border-bottom: 2px solid;
padding-left: 20px;
margin: 9px 0 5px;
}
.date {
font-size: 1.2em;
}
.location {
font-size: 1.2em;
}
.title {
font-size: 1.3em;
}
.heading a {
font-size: 1em;
}
.org, .institution {
font-size: 1.4em;
}
.blog-entry {
margin: 25px 0;
}
.blog-heading {
font-weight: normal;
padding: 0;
margin: 0;
border-bottom: 1px solid;
}
.blog-heading .date {
}
.blog-heading .title,
.blog-heading .title a {
}
.blog-content {
margin-left: 2em;
}
#nav-banner {
height: 35px;
}
#featured-set {
width: 654px;
float: right;
margin-left: 10px;
}
.featured-empty {
border: 1px solid;
}
#featured1, #featured2, #featured3 {
float: left;
font-size: .8em;
text-align: center;
}
#featured1 span, #featured2 span, #featured3 span {
margin-top: auto;
margin-bottom: auto;
}
#featured1 {
width: 430px;
height: 320px;
margin-right: 20px;
}
#featured2, #featured3 {
float: left;
width: 200px;
height: 150px;
}
#featured2 {
clear: right; /*margin-right: 80px;*/
margin-bottom: 20px;
}
.thumb {
width: 120px;
height: 90px;
text-align: center;
display: inline-block; /* standard, what we want */
/* how we get it in firefox and ie... */
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding: 0;
margin: 0;
}
.player {
margin: 10px auto 10px auto;
}
.top-shelf .gallery {
padding: 15px;
border: solid 1px;
margin-top: 35px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 2px 15px rgba(100, 100, 100, 0.20);
-moz-box-shadow: rgba(100, 100, 100, 0.20) 0px 2px 15px;
}
.gallery-title {
font-weight: normal;
font-size: 1.2em;
}
#sidebar {
width: 270px;
float: left;
}
#galleries {
width: 728px;
float: right;
min-height: 400px;
position: relative;
}
#sidebar {
}
#gallery-nav {
}
#gallery-nav ul {
border-top: 3px solid;
border-bottom: 3px solid;
margin-top: 2px;
padding-top: 8px;
list-style: none;
width: 210px;
}
#gallery-nav li {
padding-bottom: 10px;
font-size: 1.5em;
}
#gallery-nav a, #gallery-nav a:active {
text-decoration: none;
}
#gallery-nav a:hover {
text-decoration: underline;
}
#gallery-nav .active {
text-decoration: underline;
}
.top-shelf .preview-pane {
overflow: auto;
padding: 8px;
height: 115px;
}
.top-shelf .thumb {
margin: 0 5px 5px 0;
cursor: pointer;
border: 2px solid transparent;
text-align: center;
}
.description {
margin-top: 10px;
padding: 15px 20px;
font-size: .9em; /*border-top: 1px solid #ccc;*/
text-align: center;
}
.bottom-shelf .preview-pane {
white-space: nowrap;
overflow: hidden;
width: 700px;
height: 70px;
}
.bottom-shelf .preview-pane ul {
list-style: none;
white-space: nowrap;
width: 100%;
padding: 0;
}
.bottom-shelf .preview-pane li {
float: left;
width: 80px;
height: 60px;
position: relative;
padding: 1px 2px;
}
.bottom-shelf .preview-pane img {
width: 80px;
height: 60px;
}
.bottom-shelf .thumb {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity = 50);
cursor: pointer;
}
.controls {
display: block;
left: 0;
position: absolute;
top: 0;
}
.control-left, .control-right {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity = 50);
}
.control-left {
display: block;
left: 0;
position: absolute;
top: 0;
z-index: 100;
width: 30%;
height: 85%;
cursor: pointer;
background: url('/images/arrow-left.png') 5% 60% no-repeat;
}
.control-right {
display: block;
right: 0;
position: absolute;
top: 0;
z-index: 100;
width: 30%;
height: 85%;
cursor: pointer;
background: url('/images/arrow-right.png') 95% 60% no-repeat;
}