GoldenNoctowl77
Back in Business!
Hello everyone,
Ha yes it has been awhile, but your retired and grown up episode guide writer of the past returns seeking help! I am trying to edit the css code for the website I am creating to decrease the space between the slider and the sidebar (the light gray area between the horizontal scrollbar and the blue-green sidebar on the bottom). Any help would be appreciated. I am using virb to create the site and I'm just editing a template of theres.
Here is the site for a visual:
http://www.protectnshield.virb.com
(Don't mind it. It is still in the preliminary stages)
Also, I was asked if there was a way to edit the code to insert arrow pictures on each side of the slider in order to better direct people. If I make the images, what is the code and where do I put it?
Any help would be greatly appreciated. I'm not the best with CSS
Here is the code (I am just having trouble finding the position that I need to change)
/*
---------------------------------------
MANHATTAN
---------------------------------------
by Ryan Sims
simmy.tumblr.com
---------------------------------------
*/
/* ---------- GLOBAL STYLING RULES & RESETS ---------- */
* {
margin: 0px;
padding: 0px;
}
<virb get="customize.fonts.font_face" />
body {
font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />;
color: <virb get="customize.colors.text" />;
background: <virb get="customize.colors.footer_bg" />;
}
div.wrapper {
position: relative;
display: block;
background: <virb get="customize.colors.background" />;
margin: 0;
padding: 30px 0;
}
div.wrapper.page { overflow: hidden; }
div.wrapper.header { background: <virb get="customize.colors.header_bg" />; }
div.wrapper.sidebar { background: <virb get="customize.colors.sidebar_bg" />; padding-bottom: 20px; }
div.wrapper.footer { background: <virb get="customize.colors.footer_bg" />; padding: 25px 0; }
hr { display: none; }
#page hr {
display: block;
border: none 0;
border-top: 1px solid <virb get="customize.colors.border" />;
width: 100%;
height: 1px;
margin: 0 0 20px 0;
}
#page p hr { margin: 0; }
input,
option,
textarea,
button {
font-family: <virb get="customize.fonts.body_family" />;
font-size: <virb get="customize.fonts.body_size" />;
}
ul,
ol { list-style-type: none; }
q:before,
q:after { content: ""; }
big { font-size: 12px; }
small { font-size: 9px; }
img { border: none; }
a {
color: <virb get="customize.colors.link" />;
text-decoration: none;
outline: none;
}
a:hover {
color: <virb get="customize.colors.link_hover" />;
}
div#header,
div#page,
div#sidebar,
div#footer {
width: 840px;
padding: 0;
margin: 0 auto;
}
/* ---------- HEADER ---------- */
div#header {
}
#header h1 {
font-family: <virb get="customize.fonts.site_family" />;
font-size: <virb get="customize.fonts.site_size" />;
letter-spacing: -1px;
margin-left: -2px;
line-height: 100%;
margin: 0;
padding: 0;
}
#header h1 a {
color: <virb get="customize.colors.site_name" />;
}
body.homepage #header h1 a,
#header h1 a:hover {
color: <virb get="customize.colors.site_name" />;
}
/* ---------- NAVIGATION ---------- */
div#site_nav {
display: block;
padding: 10px 0 0 0;
}
#site_nav ul li {
display: inline;
position: relative;
font-weight: bold;
font-size: <virb get="customize.fonts.nav_size" />;
line-height: 100%;
padding: 0 30px 0 0;
}
#site_nav ul li a,
body.homepage #site_nav ul li a,
#site_nav ul li.section {
color: <virb get="customize.colors.nav_link" />;
cursor: pointer;
}
#site_nav ul li a:hover,
body.homepage #site_nav ul li a:hover,
#site_nav ul li.section:hover {
color: <virb get="customize.colors.nav_hover" />;
cursor: pointer;
}
#site_nav ul li.active a,
#site_nav ul li.active a:hover {
color: <virb get="customize.colors.nav_hover" />;
cursor: default;
}
#site_nav li.section ul { display: none; }
#site_nav li.section:hover ul { display: block; }
#site_nav li.section ul {
padding: 5px 0 0 0;
position: absolute;
top: 15px;
left: 0;
z-index: 111;
width: 500px;
}
#site_nav li.section ul li {
font-size: 90%;
margin: 0 0 3px 0;
padding: 0 15px 0 0;
text-align: left;
}
#site_nav ul li ul li {
padding: 0;
}
/* ---------- PAGE ---------- */
div#page:after {
display: block;
visibility: hidden;
clear: both;
content: ".";
}
#page h2 {
font-size: <virb get="customize.fonts.page_size" />;
font-weight: bold;
letter-spacing: -1px;
color: <virb get="customize.colors.page_name" />;
padding: 0 0 30px 0;
}
body.homepage #page div#title {
display: none;
}
#page p {
padding: 0 0 20px 0;
font-size: <virb get="customize.fonts.body_size" />;
line-height: 150%;
}
div#share {
clear: both;
padding: 10px 0 0 0;
}
/* Page: Types */
/* ---------- PAGE: CUSTOM ---------- */
#custom #description img {
position: relative;
display: block;
max-width: 840px;
border: 0;
padding: 0;
margin: 0;
}
#custom #description img[style] { height: auto !important; }
/* ---------- PAGE: EVENTS ---------- */
#description ul.events {
list-style: none;
}
#description ul.events li {
padding: 0 0 20px 0;
}
#custom #description ul.events li p {
padding: 0;
font-size: 14px;
}
#description ul.events li span.event_venue {
display: block;
font-size: <virb get="customize.fonts.body_size" />;
}
#description table {
border-top: 1px solid <virb get="customize.colors.border" />;
border-collapse: collapse;
}
#description table tr {
border-bottom: 1px dotted <virb get="customize.colors.border" />;
}
#description table td {
padding: 10px;
}
/* ---------- PAGE: INDEX ---------- */
#index ul.thumbs {
margin: 0 0 0 -30px;
}
#index ul.thumbs li {
position: relative;
float: left;
width: 260px;
height: 195px;
margin: 0 0 40px 30px;
padding: 0;
text-align: left;
background: <virb get="customize.colors.footer_bg" />;
}
#index ul.thumbs li.widescreen { height: 146px; }
#index ul.thumbs li.square { height: 260px; }
#index ul.thumbs li.li_4, #index ul.thumbs li.li_7, #index ul.thumbs li.li_10,
#index ul.thumbs li.li_13, #index ul.thumbs li.li_16, #index ul.thumbs li.li_19,
#index ul.thumbs li.li_22, #index ul.thumbs li.li_25, #index ul.thumbs li.li_28 {
clear: both;
}
#index ul.thumbs li h3 {
display: none;
position: absolute;
bottom: 10px;
left: 10px;
font-size: <virb get="customize.fonts.nav_size" />;
font-weight: bold;
width: 240px;
overflow: hidden;
}
#index ul.thumbs li:hover h3 {
display: block;
}
#index ul.thumbs li:hover h3 a {
color: <virb get="customize.colors.nav_hover" />;
}
#index ul.thumbs li p {
padding: 0;
}
#index ul.thumbs li img {
width: 260px;
position: relative;
margin: 0;
padding: 0;
border: 0;
}
#index ul.thumbs li:hover img {
opacity: 0.10;
-moz-opacity: 0.10;
filter:alpha(opacity=10);
}
/* ---------- PAGE: ALBUM ---------- */
#art p {
float: left;
display: block;
width: 300px;
padding: 0 0 40px 0;
margin: 0 30px 0 0;
}
#art p img {
width: 300px;
}
#media ul.slideshow {
position: relative;
}
#media ul.slideshow li {
position: relative;
}
#media ol {
float: left;
display: block;
width: 510px;
list-style-type: decimal-leading-zero;
list-style-position: inside;
padding: 0 0 40px 0;
font-size: 14px;
border-top: 1px solid <virb get="customize.colors.border" />;
}
#media ol li {
position: relative;
padding: 10px;
border-bottom: 1px solid <virb get="customize.colors.border" />;
color: <virb get="customize.colors.text" />;
}
#media.html5 ol li.mp3 {
padding-top: 50px;
}
/* Player Controls */
#album #media ol li .album_image { display: none; }
#album #media ol li .controls .prev { display: none; }
#album #media ol li .controls .next { display: none; }
#album #media ol li h4 { display: none; }
#album #media ol li .playpause a {
z-index: 6;
position: absolute;
top: 6px;
left: 40px;
display: block;
width: 24px;
height: 24px;
text-indent: 9999px;
overflow: hidden;
background: url(http://<virb get="VIRB.media_domain" />/_assets/_themes/york/btn_play.png) no-repeat;
}
#album #media ol li.playing .playpause a { background: url(http://<virb get="VIRB.media_domain" />/_assets/_themes/york/btn_pause.png) no-repeat; }
#media ol li h3 {
padding: 10px 0 0 45px;
font-weight: normal;
font-size: 14px;
color: <virb get="customize.colors.text" />;
}
#media.html5 ol li h3 {
padding: 0;
}
#media ol li h3 a {
color: <virb get="customize.colors.text" />;
font-weight: bold;
padding: 0 0 0 25px;
}
#media ol li.playing,
#media ol li.playing h3 a { color: <virb get="customize.colors.link" />; }
#media ol li audio {
position: absolute;
top: 10px;
width: 490px;
}
#media ol li small.download {
position: absolute;
top: 12px;
right: 48px;
text-transform: lowercase;
}
#media ol li small a,
#media ol li.playing h3 small a {
background: <virb get="customize.colors.link" />;
color: <virb get="customize.colors.background" />;
padding: 3px 5px;
}
#media ol li small a:hover,
#media ol li.playing h3 small a:hover {
background: <virb get="customize.colors.link_hover" />;
}
/* Track Length */
#album #media ol li .length {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#album #media ol li .load {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 0px;
background: <virb get="customize.colors.border" />;
opacity: 0.30;
-moz-opacity: 0.30;
filter:alpha(opacity=30);
}
#album #media ol li .progress {
z-index: 2;
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 0px;
background: <virb get="customize.colors.border" />;
opacity: 0.30;
-moz-opacity: 0.30;
filter:alpha(opacity=30);
}
#album #media ol li .time {
z-index: 3;
position: absolute;
top: 10px;
right: 10px;
display: none;
font-size: 14px;
color: <virb get="customize.colors.alt_text" />;
}
#album #media ol li.loaded .time,
#album #media ol li.loading .time { display: block; }
#album #media ol li.playing .time { color: <virb get="customize.colors.link" />; }
#album #description {
position: relative;
clear: both;
}
/* ---------- PAGE: TUMBLELOG ---------- */
#blog #nav,
#blog #description {
display: none;
}
#blog h3 {
font-weight: normal;
}
div.date_group {
position: relative;
clear: both;
}
#blog div.entry,
#blog div.date {
float: left;
width: 640px;
padding: 40px 0 0 0;
border-top: 1px solid <virb get="customize.colors.border" />;
margin: 0 0 40px 0;
}
#blog div.date {
float: right;
width: 170px;
margin: 0;
padding-left: 30px;
}
#page .date p {
font-size: 11px;
text-transform: uppercase;
color: <virb get="customize.colors.alt_text" />;
text-align: center;
background: <virb get="customize.colors.sidebar_bg" />;
padding: 10px 0;
margin: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#page .date p a { color: <virb get="customize.colors.alt_text" />; }
#page .date p a:hover { color: <virb get="customize.colors.link_hover" />; }
#blog .entry img {
position: relative;
display: block;
border: 0;
max-width: 500px;
}
.links h3 {
font-size: 18px;
padding-bottom: 10px;
}
.links h3 a.permalink {
background: none;
color: <virb get="customize.colors.alt_text" />;
font-weight: normal;
}
.links h3 a.permalink:hover {
color: <virb get="customize.colors.link_hover" />;
}
#blog .entry .description h1, #description h1,
#blog .entry .description h2, #description h2,
#blog .entry .description h3, #description h3,
#blog .entry .description h4, #description h4,
#blog .entry .description h5, #description h5 {
font-weight: bold;
padding: 0;
margin: 0 0 20px 0;
}
#blog .entry .description h1, #description h1 { font-size: 28px; }
#blog .entry .description h2, #description h2 { font-size: 21px; }
#blog .entry .description h3, #description h3 { font-size: 18px; }
#blog .entry .description h4, #description h4 { font-size: 14px; }
#blog .entry .description h5, #description h5 { font-size: 12px; }
#blog .entry blockquote, #description blockquote {
margin: 0 0 20px 0;
}
#blog .entry blockquote p, #description blockquote p {
border-left: 1px dotted <virb get="customize.colors.border" />;
color: <virb get="customize.colors.alt_text" />;
padding: 5px 0 6px 15px;
}
#blog .entry ol, #description ol,
#blog .entry ul, #description ul {
list-style-type: decimal;
list-style-position: inside;
line-height: 133%;
margin: 0 0 10px 0;
}
#blog .entry ul, #description ul {
list-style-type: disc;
}
#blog .entry ol li, #description ol li,
#blog .entry ul li, #description ul li {
padding: 0 0 10px 0;
}
.quotes h3 {
font-size: 24px;
line-height: 133%;
padding-bottom: 10px;
}
.quotes cite {
font-style: normal;
}
.photos .image img {
max-width: 640px;
}
.photos h3 {
font-size: 18px;
padding-bottom: 10px;
}
#blog .text h3 {
font-size: 24px;
font-weight: bold;
padding-bottom: 20px;
}
/* Audio posts *************************/
#blog .entry.audio ul {
list-style: none;
}
#blog .entry.audio ul li {
position: relative;
border: 1px solid <virb get="customize.colors.border" />;
color: <virb get="customize.colors.text" />;
height: 18px;
padding: 12px 10px 10px 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#blog .entry.audio ul li.playing { color: <virb get="customize.colors.link" />; }
#blog .entry.audio ul li .album_image,
#blog .entry.audio ul li .controls .prev,
#blog .entry.audio ul li .controls .next { display: none; }
#blog .entry.audio ul li .playpause a {
z-index: 6;
position: absolute;
top: 8px;
left: 8px;
display: block;
width: 24px;
height: 24px;
text-indent: 9999px;
overflow: hidden;
background: url(http://<virb get="VIRB.media_domain" />/_assets/_themes/york/btn_play.png) no-repeat;
}
#blog .entry.audio ul li.playing .playpause a { background: url(http://<virb get="VIRB.media_domain" />/_assets/_themes/york/btn_pause.png) no-repeat; }
#blog .entry.audio ul li h3 {
z-index: 5;
position: absolute;
top: 0;
left: 0;
padding: 11px 0 0 40px;
width: 300px;
font-weight: normal;
font-size: 14px;
color: <virb get="customize.colors.text" />;
}
#blog .entry.audio ul li h3 a {
color: <virb get="customize.colors.text" />;
font-weight: bold;
}
#blog .entry.audio ul li.playing h3 a {
color: <virb get="customize.colors.link" />;
}
#blog .entry.audio ul li .length {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#blog .entry.audio ul li .load {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 0px;
background: <virb get="customize.colors.text" />;
opacity: 0.07;
-moz-opacity: 0.07;
filter:alpha(opacity=07);
}
#blog .entry.audio ul li .progress {
z-index: 2;
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 0px;
background: <virb get="customize.colors.text" />;
opacity: 0.07;
-moz-opacity: 0.07;
filter:alpha(opacity=07);
}
#blog .entry.audio ul li .time {
z-index: 3;
position: absolute;
top: 10px;
right: 10px;
display: block;
font-size: 14px;
color: <virb get="customize.colors.alt_text" />;
}
#blog .entry.audio ul li.playing .time { color: <virb get="customize.colors.link" />; }
div#paging {
clear: both;
border-top: 1px dotted <virb get="customize.colors.border" />;
padding: 50px 0 0 0;
margin: 0;
}
#paging span.divider {
visibility: hidden;
}
#paging a span.arrow.left { padding: 0 5px 0 0; }
#paging a span.arrow.right { padding: 0 0 0 5px; }
/* ---------- PAGE: COLLECTION ---------- */
#collection #count { display: none; }
#media ul.thumbs li {
float: left;
padding: 0 12px 12px 0;
opacity: 1.00;
-moz-opacity: 1.00;
filter:alpha(opacity=100);
}
#media ul.thumbs li:hover {
opacity: 0.80;
-moz-opacity: 0.80;
filter:alpha(opacity=80);
}
#media ul.thumbs li img {
position: relative;
display: block;
padding: 0;
border: 0;
height: 125px;
}
#media ul.thumbs li .details { display: none; }
#page p.slideshow_nav {
padding: 0 0 7px 0;
}
span.prev,
span.arrow.left {
padding: 0 3px 0 0;
}
span.next,
span.arrow.right {
padding: 0 0 0 3px;
}
span.count {
padding: 0 0 0 5px;
}
.slideshow_nav span {
text-transform: lowercase;
}
body.horizontal #collection #media img {
max-height: 480px;
margin: 0 20px 0 0;
}
body.horizontal #collection #media table td {
vertical-align: top;
}
div.media.photo img {
display: block;
position: relative;
border: 0;
max-width: 840px;
}
#page div.media.photo p {
padding: 0;
}
#media .details {
padding: 20px 0 30px 0;
}
#media .details h3,
#media .details p {
font-size: <virb get="customize.fonts.body_size" />;
padding: 0;
}
/* Slideshow w/ thumbs */
body.collection.slideshow_thumbnails .slideshow_nav,
body.collection.slideshow_thumbnails ul.slideshow {
display: none;
}
/* Slideshow no thumbs */
body.collection.slideshow .slideshow_nav span.thumbs {
display: none;
}
/* Slider */
#media table {
position: relative;
}
#slider { display: none; }
body.collection.horizontal #page #slider {
background: <virb get="customize.colors.sidebar_bg" />;
position: relative;
display: block;
height: 8px;
width: 840px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
#slider .slider-track-x {
height: 8px;
display: block;
width: 100%;
}
#handle {
cursor: move;
background: <virb get="customize.colors.nav_link" />;
height: 8px;
text-align: center;
vertical-align: top;
outline: none;
opacity: 0.50;
-moz-opacity: 0.50;
filter:alpha(opacity=50);
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
#handle:hover {
cursor: move;
opacity: 0.75;
-moz-opacity: 0.75;
filter:alpha(opacity=75);
}
/* ---------- SIDEBAR ---------- */
div#sidebar {
}
div#sidebar:after {
display: block;
visibility: hidden;
clear: both;
content: ".";
}
#sidebar div.container {
margin: 0 0 0 180px;
}
#sidebar div.module {
display: block;
float: left;
width: 260px;
padding: 0 0 30px 0;
margin: 0 0 0 30px;
}
#sidebar .module h4 {
margin-bottom: 0;
color: <virb get="customize.colors.nav_section" />;
}
#sidebar .module h4 a {
color: <virb get="customize.colors.nav_section" />;
}
#sidebar .module h4 a:hover {
color: <virb get="customize.colors.link_hover" />;
}
#sidebar .module p {
font-size: <virb get="customize.fonts.body_size" />;
line-height: 133%;
width: 260px;
overflow: hidden;
}
#sidebar .module.twitter span.date,
#sidebar .module.lastfm span.date {
display: block;
padding: 0 0 10px 0;
}
#sidebar .module.twitter,
#sidebar .module.custom {
margin-bottom: -10px;
}
#sidebar .module.custom p {
padding: 0;
}
#sidebar .module.twitter .date a,
#sidebar .module.lastfm span.date {
font-size: 10px;
color: <virb get="customize.colors.alt_text" />;
}
#sidebar .module.lastfm ol {
list-style-type: decimal;
list-style-position: inside;
}
#sidebar .module.lastfm ul.upcoming_events {
margin-bottom: -10px;
}
#sidebar .module.lastfm ul.upcoming_events li {
padding-bottom: 10px;
}
#sidebar .module.lastfm ol li img { display: none; }
/* AUDIO PLAYER */
.module.audio_player ul {
display: block;
width: 160px;
background: <virb get="customize.colors.background" />;
border: solid 1px <virb get="customize.colors.border" />;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px 10px 15px 10px;
}
.module.audio_player li .album_image {
height: 150px;
width: 150px;
padding: 5px;
margin-bottom: 10px;
display: block;
}
.module.audio_player li {
display: none;
}
.module.audio_player li.selected {
display: block;
}
#sidebar .module.audio_player li h3 {
text-align: center;
font-size: <virb get="customize.fonts.body_size" />;
padding-bottom: 2px;
}
#sidebar .module.audio_player li h3 .download {
display: none;
}
#sidebar .module.audio_player ul h4 {
display: block;
text-align: center;
font: normal 12px <virb get="customize.fonts.body_family" />;
text-transform: none;
border: none;
letter-spacing: 0;
padding: 0 0 2px 0;
margin: 0;
color: <virb get="customize.colors.text" />;
}
.module.audio_player .controls {
text-align: center;
margin-bottom: 10px;
display: block;
}
.module.audio_player .controls .prev,
.module.audio_player .controls .next {
display: inline-block;
width: 20px;
height: 30px;
}
.module.audio_player .controls .prev a,
.module.audio_player .controls .next a {
display: inline-block;
width: 20px;
height: 30px;
overflow: hidden;
text-indent: 1000px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.module.audio_player .controls .prev a {
background: url('http://<virb get="VIRB.media_domain" />/_assets/_themes/montreal/sprite_controls.png') no-repeat left -7px;
}
.module.audio_player .controls .next a {
background: url('http://<virb get="VIRB.media_domain" />/_assets/_themes/montreal/sprite_controls.png') no-repeat right -7px;
}
.module.audio_player .controls .playpause {
display: inline-block;
height: 30px;
width: 31px;
overflow: hidden;
}
.module.audio_player .controls .playpause a {
display: block;
height: 30px;
width: 31px;
overflow: hidden;
text-indent: 1000px;
background: <virb get="customize.colors.text" /> url('http://<virb get="VIRB.media_domain" />/_assets/_themes/montreal/sprite_controls.png') no-repeat center -7px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.module.audio_player .playing .controls .playpause a {
background: <virb get="customize.colors.link" /> url('http://<virb get="VIRB.media_domain" />/_assets/_themes/montreal/sprite_controls.png') no-repeat center -52px;
}
.module.audio_player .length {
display: block;
height: 6px;
width: 122px;
border: solid 1px <virb get="customize.colors.border" />;
background: #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: relative;
margin-top: 9px;
}
.module.audio_player .length .load {
height: 6px;
width: 0%;
display: block;
background: <virb get="customize.colors.text" />;
position: absolute;
}
.module.audio_player .length .progress {
height: 6px;
width: 0%;
display: block;
background: <virb get="customize.colors.link" />;
position: absolute;
}
.module.audio_player .length .time {
color: <virb get="customize.colors.alt_text" />;
font-size: <virb get="customize.fonts.body_size" />;
position: absolute;
left: 129px;
top: -4px;
}
/* ---------- FOOTER ---------- */
#footer {
clear: both;
position: relative;
}
#footer p {
line-height: 133%;
}
#footer p a {
color: <virb get="customize.colors.link" />;
}
#footer p a:hover {
color: <virb get="customize.colors.link_hover" />;
}
Ha yes it has been awhile, but your retired and grown up episode guide writer of the past returns seeking help! I am trying to edit the css code for the website I am creating to decrease the space between the slider and the sidebar (the light gray area between the horizontal scrollbar and the blue-green sidebar on the bottom). Any help would be appreciated. I am using virb to create the site and I'm just editing a template of theres.
Here is the site for a visual:
http://www.protectnshield.virb.com
(Don't mind it. It is still in the preliminary stages)
Also, I was asked if there was a way to edit the code to insert arrow pictures on each side of the slider in order to better direct people. If I make the images, what is the code and where do I put it?
Any help would be greatly appreciated. I'm not the best with CSS
Here is the code (I am just having trouble finding the position that I need to change)
/*
---------------------------------------
MANHATTAN
---------------------------------------
by Ryan Sims
simmy.tumblr.com
---------------------------------------
*/
/* ---------- GLOBAL STYLING RULES & RESETS ---------- */
* {
margin: 0px;
padding: 0px;
}
<virb get="customize.fonts.font_face" />
body {
font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />;
color: <virb get="customize.colors.text" />;
background: <virb get="customize.colors.footer_bg" />;
}
div.wrapper {
position: relative;
display: block;
background: <virb get="customize.colors.background" />;
margin: 0;
padding: 30px 0;
}
div.wrapper.page { overflow: hidden; }
div.wrapper.header { background: <virb get="customize.colors.header_bg" />; }
div.wrapper.sidebar { background: <virb get="customize.colors.sidebar_bg" />; padding-bottom: 20px; }
div.wrapper.footer { background: <virb get="customize.colors.footer_bg" />; padding: 25px 0; }
hr { display: none; }
#page hr {
display: block;
border: none 0;
border-top: 1px solid <virb get="customize.colors.border" />;
width: 100%;
height: 1px;
margin: 0 0 20px 0;
}
#page p hr { margin: 0; }
input,
option,
textarea,
button {
font-family: <virb get="customize.fonts.body_family" />;
font-size: <virb get="customize.fonts.body_size" />;
}
ul,
ol { list-style-type: none; }
q:before,
q:after { content: ""; }
big { font-size: 12px; }
small { font-size: 9px; }
img { border: none; }
a {
color: <virb get="customize.colors.link" />;
text-decoration: none;
outline: none;
}
a:hover {
color: <virb get="customize.colors.link_hover" />;
}
div#header,
div#page,
div#sidebar,
div#footer {
width: 840px;
padding: 0;
margin: 0 auto;
}
/* ---------- HEADER ---------- */
div#header {
}
#header h1 {
font-family: <virb get="customize.fonts.site_family" />;
font-size: <virb get="customize.fonts.site_size" />;
letter-spacing: -1px;
margin-left: -2px;
line-height: 100%;
margin: 0;
padding: 0;
}
#header h1 a {
color: <virb get="customize.colors.site_name" />;
}
body.homepage #header h1 a,
#header h1 a:hover {
color: <virb get="customize.colors.site_name" />;
}
/* ---------- NAVIGATION ---------- */
div#site_nav {
display: block;
padding: 10px 0 0 0;
}
#site_nav ul li {
display: inline;
position: relative;
font-weight: bold;
font-size: <virb get="customize.fonts.nav_size" />;
line-height: 100%;
padding: 0 30px 0 0;
}
#site_nav ul li a,
body.homepage #site_nav ul li a,
#site_nav ul li.section {
color: <virb get="customize.colors.nav_link" />;
cursor: pointer;
}
#site_nav ul li a:hover,
body.homepage #site_nav ul li a:hover,
#site_nav ul li.section:hover {
color: <virb get="customize.colors.nav_hover" />;
cursor: pointer;
}
#site_nav ul li.active a,
#site_nav ul li.active a:hover {
color: <virb get="customize.colors.nav_hover" />;
cursor: default;
}
#site_nav li.section ul { display: none; }
#site_nav li.section:hover ul { display: block; }
#site_nav li.section ul {
padding: 5px 0 0 0;
position: absolute;
top: 15px;
left: 0;
z-index: 111;
width: 500px;
}
#site_nav li.section ul li {
font-size: 90%;
margin: 0 0 3px 0;
padding: 0 15px 0 0;
text-align: left;
}
#site_nav ul li ul li {
padding: 0;
}
/* ---------- PAGE ---------- */
div#page:after {
display: block;
visibility: hidden;
clear: both;
content: ".";
}
#page h2 {
font-size: <virb get="customize.fonts.page_size" />;
font-weight: bold;
letter-spacing: -1px;
color: <virb get="customize.colors.page_name" />;
padding: 0 0 30px 0;
}
body.homepage #page div#title {
display: none;
}
#page p {
padding: 0 0 20px 0;
font-size: <virb get="customize.fonts.body_size" />;
line-height: 150%;
}
div#share {
clear: both;
padding: 10px 0 0 0;
}
/* Page: Types */
/* ---------- PAGE: CUSTOM ---------- */
#custom #description img {
position: relative;
display: block;
max-width: 840px;
border: 0;
padding: 0;
margin: 0;
}
#custom #description img[style] { height: auto !important; }
/* ---------- PAGE: EVENTS ---------- */
#description ul.events {
list-style: none;
}
#description ul.events li {
padding: 0 0 20px 0;
}
#custom #description ul.events li p {
padding: 0;
font-size: 14px;
}
#description ul.events li span.event_venue {
display: block;
font-size: <virb get="customize.fonts.body_size" />;
}
#description table {
border-top: 1px solid <virb get="customize.colors.border" />;
border-collapse: collapse;
}
#description table tr {
border-bottom: 1px dotted <virb get="customize.colors.border" />;
}
#description table td {
padding: 10px;
}
/* ---------- PAGE: INDEX ---------- */
#index ul.thumbs {
margin: 0 0 0 -30px;
}
#index ul.thumbs li {
position: relative;
float: left;
width: 260px;
height: 195px;
margin: 0 0 40px 30px;
padding: 0;
text-align: left;
background: <virb get="customize.colors.footer_bg" />;
}
#index ul.thumbs li.widescreen { height: 146px; }
#index ul.thumbs li.square { height: 260px; }
#index ul.thumbs li.li_4, #index ul.thumbs li.li_7, #index ul.thumbs li.li_10,
#index ul.thumbs li.li_13, #index ul.thumbs li.li_16, #index ul.thumbs li.li_19,
#index ul.thumbs li.li_22, #index ul.thumbs li.li_25, #index ul.thumbs li.li_28 {
clear: both;
}
#index ul.thumbs li h3 {
display: none;
position: absolute;
bottom: 10px;
left: 10px;
font-size: <virb get="customize.fonts.nav_size" />;
font-weight: bold;
width: 240px;
overflow: hidden;
}
#index ul.thumbs li:hover h3 {
display: block;
}
#index ul.thumbs li:hover h3 a {
color: <virb get="customize.colors.nav_hover" />;
}
#index ul.thumbs li p {
padding: 0;
}
#index ul.thumbs li img {
width: 260px;
position: relative;
margin: 0;
padding: 0;
border: 0;
}
#index ul.thumbs li:hover img {
opacity: 0.10;
-moz-opacity: 0.10;
filter:alpha(opacity=10);
}
/* ---------- PAGE: ALBUM ---------- */
#art p {
float: left;
display: block;
width: 300px;
padding: 0 0 40px 0;
margin: 0 30px 0 0;
}
#art p img {
width: 300px;
}
#media ul.slideshow {
position: relative;
}
#media ul.slideshow li {
position: relative;
}
#media ol {
float: left;
display: block;
width: 510px;
list-style-type: decimal-leading-zero;
list-style-position: inside;
padding: 0 0 40px 0;
font-size: 14px;
border-top: 1px solid <virb get="customize.colors.border" />;
}
#media ol li {
position: relative;
padding: 10px;
border-bottom: 1px solid <virb get="customize.colors.border" />;
color: <virb get="customize.colors.text" />;
}
#media.html5 ol li.mp3 {
padding-top: 50px;
}
/* Player Controls */
#album #media ol li .album_image { display: none; }
#album #media ol li .controls .prev { display: none; }
#album #media ol li .controls .next { display: none; }
#album #media ol li h4 { display: none; }
#album #media ol li .playpause a {
z-index: 6;
position: absolute;
top: 6px;
left: 40px;
display: block;
width: 24px;
height: 24px;
text-indent: 9999px;
overflow: hidden;
background: url(http://<virb get="VIRB.media_domain" />/_assets/_themes/york/btn_play.png) no-repeat;
}
#album #media ol li.playing .playpause a { background: url(http://<virb get="VIRB.media_domain" />/_assets/_themes/york/btn_pause.png) no-repeat; }
#media ol li h3 {
padding: 10px 0 0 45px;
font-weight: normal;
font-size: 14px;
color: <virb get="customize.colors.text" />;
}
#media.html5 ol li h3 {
padding: 0;
}
#media ol li h3 a {
color: <virb get="customize.colors.text" />;
font-weight: bold;
padding: 0 0 0 25px;
}
#media ol li.playing,
#media ol li.playing h3 a { color: <virb get="customize.colors.link" />; }
#media ol li audio {
position: absolute;
top: 10px;
width: 490px;
}
#media ol li small.download {
position: absolute;
top: 12px;
right: 48px;
text-transform: lowercase;
}
#media ol li small a,
#media ol li.playing h3 small a {
background: <virb get="customize.colors.link" />;
color: <virb get="customize.colors.background" />;
padding: 3px 5px;
}
#media ol li small a:hover,
#media ol li.playing h3 small a:hover {
background: <virb get="customize.colors.link_hover" />;
}
/* Track Length */
#album #media ol li .length {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#album #media ol li .load {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 0px;
background: <virb get="customize.colors.border" />;
opacity: 0.30;
-moz-opacity: 0.30;
filter:alpha(opacity=30);
}
#album #media ol li .progress {
z-index: 2;
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 0px;
background: <virb get="customize.colors.border" />;
opacity: 0.30;
-moz-opacity: 0.30;
filter:alpha(opacity=30);
}
#album #media ol li .time {
z-index: 3;
position: absolute;
top: 10px;
right: 10px;
display: none;
font-size: 14px;
color: <virb get="customize.colors.alt_text" />;
}
#album #media ol li.loaded .time,
#album #media ol li.loading .time { display: block; }
#album #media ol li.playing .time { color: <virb get="customize.colors.link" />; }
#album #description {
position: relative;
clear: both;
}
/* ---------- PAGE: TUMBLELOG ---------- */
#blog #nav,
#blog #description {
display: none;
}
#blog h3 {
font-weight: normal;
}
div.date_group {
position: relative;
clear: both;
}
#blog div.entry,
#blog div.date {
float: left;
width: 640px;
padding: 40px 0 0 0;
border-top: 1px solid <virb get="customize.colors.border" />;
margin: 0 0 40px 0;
}
#blog div.date {
float: right;
width: 170px;
margin: 0;
padding-left: 30px;
}
#page .date p {
font-size: 11px;
text-transform: uppercase;
color: <virb get="customize.colors.alt_text" />;
text-align: center;
background: <virb get="customize.colors.sidebar_bg" />;
padding: 10px 0;
margin: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#page .date p a { color: <virb get="customize.colors.alt_text" />; }
#page .date p a:hover { color: <virb get="customize.colors.link_hover" />; }
#blog .entry img {
position: relative;
display: block;
border: 0;
max-width: 500px;
}
.links h3 {
font-size: 18px;
padding-bottom: 10px;
}
.links h3 a.permalink {
background: none;
color: <virb get="customize.colors.alt_text" />;
font-weight: normal;
}
.links h3 a.permalink:hover {
color: <virb get="customize.colors.link_hover" />;
}
#blog .entry .description h1, #description h1,
#blog .entry .description h2, #description h2,
#blog .entry .description h3, #description h3,
#blog .entry .description h4, #description h4,
#blog .entry .description h5, #description h5 {
font-weight: bold;
padding: 0;
margin: 0 0 20px 0;
}
#blog .entry .description h1, #description h1 { font-size: 28px; }
#blog .entry .description h2, #description h2 { font-size: 21px; }
#blog .entry .description h3, #description h3 { font-size: 18px; }
#blog .entry .description h4, #description h4 { font-size: 14px; }
#blog .entry .description h5, #description h5 { font-size: 12px; }
#blog .entry blockquote, #description blockquote {
margin: 0 0 20px 0;
}
#blog .entry blockquote p, #description blockquote p {
border-left: 1px dotted <virb get="customize.colors.border" />;
color: <virb get="customize.colors.alt_text" />;
padding: 5px 0 6px 15px;
}
#blog .entry ol, #description ol,
#blog .entry ul, #description ul {
list-style-type: decimal;
list-style-position: inside;
line-height: 133%;
margin: 0 0 10px 0;
}
#blog .entry ul, #description ul {
list-style-type: disc;
}
#blog .entry ol li, #description ol li,
#blog .entry ul li, #description ul li {
padding: 0 0 10px 0;
}
.quotes h3 {
font-size: 24px;
line-height: 133%;
padding-bottom: 10px;
}
.quotes cite {
font-style: normal;
}
.photos .image img {
max-width: 640px;
}
.photos h3 {
font-size: 18px;
padding-bottom: 10px;
}
#blog .text h3 {
font-size: 24px;
font-weight: bold;
padding-bottom: 20px;
}
/* Audio posts *************************/
#blog .entry.audio ul {
list-style: none;
}
#blog .entry.audio ul li {
position: relative;
border: 1px solid <virb get="customize.colors.border" />;
color: <virb get="customize.colors.text" />;
height: 18px;
padding: 12px 10px 10px 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#blog .entry.audio ul li.playing { color: <virb get="customize.colors.link" />; }
#blog .entry.audio ul li .album_image,
#blog .entry.audio ul li .controls .prev,
#blog .entry.audio ul li .controls .next { display: none; }
#blog .entry.audio ul li .playpause a {
z-index: 6;
position: absolute;
top: 8px;
left: 8px;
display: block;
width: 24px;
height: 24px;
text-indent: 9999px;
overflow: hidden;
background: url(http://<virb get="VIRB.media_domain" />/_assets/_themes/york/btn_play.png) no-repeat;
}
#blog .entry.audio ul li.playing .playpause a { background: url(http://<virb get="VIRB.media_domain" />/_assets/_themes/york/btn_pause.png) no-repeat; }
#blog .entry.audio ul li h3 {
z-index: 5;
position: absolute;
top: 0;
left: 0;
padding: 11px 0 0 40px;
width: 300px;
font-weight: normal;
font-size: 14px;
color: <virb get="customize.colors.text" />;
}
#blog .entry.audio ul li h3 a {
color: <virb get="customize.colors.text" />;
font-weight: bold;
}
#blog .entry.audio ul li.playing h3 a {
color: <virb get="customize.colors.link" />;
}
#blog .entry.audio ul li .length {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#blog .entry.audio ul li .load {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 0px;
background: <virb get="customize.colors.text" />;
opacity: 0.07;
-moz-opacity: 0.07;
filter:alpha(opacity=07);
}
#blog .entry.audio ul li .progress {
z-index: 2;
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 0px;
background: <virb get="customize.colors.text" />;
opacity: 0.07;
-moz-opacity: 0.07;
filter:alpha(opacity=07);
}
#blog .entry.audio ul li .time {
z-index: 3;
position: absolute;
top: 10px;
right: 10px;
display: block;
font-size: 14px;
color: <virb get="customize.colors.alt_text" />;
}
#blog .entry.audio ul li.playing .time { color: <virb get="customize.colors.link" />; }
div#paging {
clear: both;
border-top: 1px dotted <virb get="customize.colors.border" />;
padding: 50px 0 0 0;
margin: 0;
}
#paging span.divider {
visibility: hidden;
}
#paging a span.arrow.left { padding: 0 5px 0 0; }
#paging a span.arrow.right { padding: 0 0 0 5px; }
/* ---------- PAGE: COLLECTION ---------- */
#collection #count { display: none; }
#media ul.thumbs li {
float: left;
padding: 0 12px 12px 0;
opacity: 1.00;
-moz-opacity: 1.00;
filter:alpha(opacity=100);
}
#media ul.thumbs li:hover {
opacity: 0.80;
-moz-opacity: 0.80;
filter:alpha(opacity=80);
}
#media ul.thumbs li img {
position: relative;
display: block;
padding: 0;
border: 0;
height: 125px;
}
#media ul.thumbs li .details { display: none; }
#page p.slideshow_nav {
padding: 0 0 7px 0;
}
span.prev,
span.arrow.left {
padding: 0 3px 0 0;
}
span.next,
span.arrow.right {
padding: 0 0 0 3px;
}
span.count {
padding: 0 0 0 5px;
}
.slideshow_nav span {
text-transform: lowercase;
}
body.horizontal #collection #media img {
max-height: 480px;
margin: 0 20px 0 0;
}
body.horizontal #collection #media table td {
vertical-align: top;
}
div.media.photo img {
display: block;
position: relative;
border: 0;
max-width: 840px;
}
#page div.media.photo p {
padding: 0;
}
#media .details {
padding: 20px 0 30px 0;
}
#media .details h3,
#media .details p {
font-size: <virb get="customize.fonts.body_size" />;
padding: 0;
}
/* Slideshow w/ thumbs */
body.collection.slideshow_thumbnails .slideshow_nav,
body.collection.slideshow_thumbnails ul.slideshow {
display: none;
}
/* Slideshow no thumbs */
body.collection.slideshow .slideshow_nav span.thumbs {
display: none;
}
/* Slider */
#media table {
position: relative;
}
#slider { display: none; }
body.collection.horizontal #page #slider {
background: <virb get="customize.colors.sidebar_bg" />;
position: relative;
display: block;
height: 8px;
width: 840px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
#slider .slider-track-x {
height: 8px;
display: block;
width: 100%;
}
#handle {
cursor: move;
background: <virb get="customize.colors.nav_link" />;
height: 8px;
text-align: center;
vertical-align: top;
outline: none;
opacity: 0.50;
-moz-opacity: 0.50;
filter:alpha(opacity=50);
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
#handle:hover {
cursor: move;
opacity: 0.75;
-moz-opacity: 0.75;
filter:alpha(opacity=75);
}
/* ---------- SIDEBAR ---------- */
div#sidebar {
}
div#sidebar:after {
display: block;
visibility: hidden;
clear: both;
content: ".";
}
#sidebar div.container {
margin: 0 0 0 180px;
}
#sidebar div.module {
display: block;
float: left;
width: 260px;
padding: 0 0 30px 0;
margin: 0 0 0 30px;
}
#sidebar .module h4 {
margin-bottom: 0;
color: <virb get="customize.colors.nav_section" />;
}
#sidebar .module h4 a {
color: <virb get="customize.colors.nav_section" />;
}
#sidebar .module h4 a:hover {
color: <virb get="customize.colors.link_hover" />;
}
#sidebar .module p {
font-size: <virb get="customize.fonts.body_size" />;
line-height: 133%;
width: 260px;
overflow: hidden;
}
#sidebar .module.twitter span.date,
#sidebar .module.lastfm span.date {
display: block;
padding: 0 0 10px 0;
}
#sidebar .module.twitter,
#sidebar .module.custom {
margin-bottom: -10px;
}
#sidebar .module.custom p {
padding: 0;
}
#sidebar .module.twitter .date a,
#sidebar .module.lastfm span.date {
font-size: 10px;
color: <virb get="customize.colors.alt_text" />;
}
#sidebar .module.lastfm ol {
list-style-type: decimal;
list-style-position: inside;
}
#sidebar .module.lastfm ul.upcoming_events {
margin-bottom: -10px;
}
#sidebar .module.lastfm ul.upcoming_events li {
padding-bottom: 10px;
}
#sidebar .module.lastfm ol li img { display: none; }
/* AUDIO PLAYER */
.module.audio_player ul {
display: block;
width: 160px;
background: <virb get="customize.colors.background" />;
border: solid 1px <virb get="customize.colors.border" />;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px 10px 15px 10px;
}
.module.audio_player li .album_image {
height: 150px;
width: 150px;
padding: 5px;
margin-bottom: 10px;
display: block;
}
.module.audio_player li {
display: none;
}
.module.audio_player li.selected {
display: block;
}
#sidebar .module.audio_player li h3 {
text-align: center;
font-size: <virb get="customize.fonts.body_size" />;
padding-bottom: 2px;
}
#sidebar .module.audio_player li h3 .download {
display: none;
}
#sidebar .module.audio_player ul h4 {
display: block;
text-align: center;
font: normal 12px <virb get="customize.fonts.body_family" />;
text-transform: none;
border: none;
letter-spacing: 0;
padding: 0 0 2px 0;
margin: 0;
color: <virb get="customize.colors.text" />;
}
.module.audio_player .controls {
text-align: center;
margin-bottom: 10px;
display: block;
}
.module.audio_player .controls .prev,
.module.audio_player .controls .next {
display: inline-block;
width: 20px;
height: 30px;
}
.module.audio_player .controls .prev a,
.module.audio_player .controls .next a {
display: inline-block;
width: 20px;
height: 30px;
overflow: hidden;
text-indent: 1000px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.module.audio_player .controls .prev a {
background: url('http://<virb get="VIRB.media_domain" />/_assets/_themes/montreal/sprite_controls.png') no-repeat left -7px;
}
.module.audio_player .controls .next a {
background: url('http://<virb get="VIRB.media_domain" />/_assets/_themes/montreal/sprite_controls.png') no-repeat right -7px;
}
.module.audio_player .controls .playpause {
display: inline-block;
height: 30px;
width: 31px;
overflow: hidden;
}
.module.audio_player .controls .playpause a {
display: block;
height: 30px;
width: 31px;
overflow: hidden;
text-indent: 1000px;
background: <virb get="customize.colors.text" /> url('http://<virb get="VIRB.media_domain" />/_assets/_themes/montreal/sprite_controls.png') no-repeat center -7px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.module.audio_player .playing .controls .playpause a {
background: <virb get="customize.colors.link" /> url('http://<virb get="VIRB.media_domain" />/_assets/_themes/montreal/sprite_controls.png') no-repeat center -52px;
}
.module.audio_player .length {
display: block;
height: 6px;
width: 122px;
border: solid 1px <virb get="customize.colors.border" />;
background: #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: relative;
margin-top: 9px;
}
.module.audio_player .length .load {
height: 6px;
width: 0%;
display: block;
background: <virb get="customize.colors.text" />;
position: absolute;
}
.module.audio_player .length .progress {
height: 6px;
width: 0%;
display: block;
background: <virb get="customize.colors.link" />;
position: absolute;
}
.module.audio_player .length .time {
color: <virb get="customize.colors.alt_text" />;
font-size: <virb get="customize.fonts.body_size" />;
position: absolute;
left: 129px;
top: -4px;
}
/* ---------- FOOTER ---------- */
#footer {
clear: both;
position: relative;
}
#footer p {
line-height: 133%;
}
#footer p a {
color: <virb get="customize.colors.link" />;
}
#footer p a:hover {
color: <virb get="customize.colors.link_hover" />;
}
Last edited: