Posted by nicholascarrigg on December 15, 2012 at 6:52pm
Changing the font color seems to work in my style.css for this View:
.sidepane {
background-color:#333;
padding: 5px 5px 0 5px;
}
.sidepane p {
color:#ffffff
}But I can't get the links to change within the View. When I add this to the style.css, nothing really happens:
.sidepane a:link {
text-decoration: none;
color:#ddd
}
.sidepane a:visited {
text-decoration: none;
color:999
}
.sidepane a:hover {
text-decoration: none;
color:fff
}Any advice is much appreciated. Fairly new to css.
Comments
=-=
views tends to ouput id's and classes which can you can use to build a compound css definition. That said, without seeing the page in question in order to take a look at the HTML and the CSS already in use it's difficult to be specific.
My Theme CSS
Here's the style sheet I'm working with. I've decided to customize the panel pane instead of the view within it, but I'm still running into the same problem. I don't know how to override the theme so that I can customize the headings, links, etc. for a particular pane. Right now, all I can customize is the background for the class, which I've specified as "sidepane." Thanks for any input.
/* www.devsaran.com */
@font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YanoneKaffeesatzRegular';
src: url('fonts/YanoneKaffeesatz-Regular-webfont.eot');
src: url('fonts/YanoneKaffeesatz-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
url('fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
url('fonts/YanoneKaffeesatz-Regular-webfont.svg#YanoneKaffeesatzRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Deafults */
/* Default Style
--------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
border: 1px solid #bbbbbb;
background: #d8d8d8 url(images/quote.png) no-repeat;
padding: 10px 5px 5px 47px;
text-shadow: 1px 1px #fff;
margin: 5px 0;
border-radius: 7px;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
pre {
background: #d8d8d8;
text-shadow: 1px 1px #fff;
border: 1px solid #bbbbbb;
padding: 7px;
margin: 5px 0;
border-radius: 7px;
}
code {
background: #d8d8d8;
text-shadow: 1px 1px #fff;
border: 1px solid #bbbbbb;
display: block;
padding: 7px;
margin: 5px 0;
border-radius: 7px;
}
ins {
background-color:#fdfc9b;
text-decoration:none;
}
mark {
background-color:#fdfc9b;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
hr {
height:1px;
background: #9f9f9f;
margin: 7px 0;
border: none;
clear: both;
float: none;
width: 100%;
}
input, select {
vertical-align:middle;
}
select {
border-radius: 4px;
border: 1px solid #ACACAC;
padding: 3px 4px;
}
.clear {
clear: both;
}
.clearfix:after {
display: block;
visibility: hidden;
content: ".";
clear: both;
text-indent: -9999px;
height: 0;
}
.remove-margin {
margin-right: 0 !important;
}
fieldset {
border: 1px solid #ccc;
margin: 0 0 1.4615em;
padding: 1.5385em;
}
table {
border-collapse:collapse;
border-spacing:0;
margin-bottom: 15px;
width: 100%;
}
th, tr, td {
vertical-align: middle;
}
.sticky-header th, .sticky-table th {
border-bottom: 3px solid #ccc;
padding-right: 1em;
text-align: left;
}
body {
margin:0 auto;
padding:0;
font-family:Tahoma,Georgia,Arial,sans-serif;
font-size:13px;
background:#eee url(images/body.png) no-repeat fixed center top;
line-height:1.5em;
}
a {
text-decoration: none;
color: #0593C7;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
a:hover {
text-decoration: none;
color: #0579A4;
}
p {
margin: 0 0 0.8em;
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
h1,h2, h3, h4, h5, h6 {
line-height:125%;
font-weight: bold;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 21px;
padding: 0 0 .8em 0;
}
h3 {
font-size: 19px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
.clear {
clear:both;
}
/* The Outer cover */
#wrapper {
width:1000px;
margin:0px auto;
padding:30px 0px;
}
.inwrap{
background:#fff;
-moz-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);
box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);
}
#content-container{
padding:0px;
margin:0px auto;
width:900px;
}
/* TOP */
#header-top{
margin:0px auto;
position:relative;
height:100%;
z-index:400;
}
.logo{
margin:0px 0px;
padding:25px 0 25px 50px;
width:920px;
float:left;
}
.logo #logoimg {
float:left;
margin:0;
padding:0 12px 0 0;
}
.logo .sitename {
float:left;
}
.logo .sitename h1{
font-size:46px;
font-family:BebasNeueRegular,Arial, serif;
font-weight:normal;
}
.logo .sitename h1 a:link, .logo .sitename h1 a:visited{
color:#333;
}
.logo .sitename h1 a:hover{
color:#666;
}
.logo .sitename h2 {
color:#888;
font-size:16px;
font-weight:normal;
}
/* Social bookmarks */
.social-icons {
float: right;
padding: 10px;
}
.social-icons li {
float: left;
font-size: 11px;
margin: 3px 5px;
padding: 5px;
text-transform: uppercase;
list-style: none;
}
/* PRIMARY NAVIGATION */
#menu-container{
height:40px;
text-transform:uppercase;
clear:both;
background:#333;
border-top:1px solid #111;
border-bottom:1px solid #000;
}
#main-menu {
width:925px;
margin: 0 auto 0;
}
#main-menu ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#main-menu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
line-height:40px;
font-family:BebasNeueRegular,Arial, serif;
font-size:18px;
}
#main-menu li a {
color: #bbb;
display: block;
margin: 0;
padding: 0px 10px;
text-transform: uppercase;
text-decoration: none;
position: relative;
text-shadow:1px 1px 0px #000;
}
#main-menu li a:hover, #main-menu li a:active, #main-menu .active-trail a, #main-menu li a.active {
color: #fff;
}
#main-menu li a.sf-with-ul {
padding-right: 10px;
}
#main-menu li a .sf-sub-indicator {
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 19px;
right: 5px;
}
#main-menu li li a, #main-menu li li a:link, #main-menu li li a:visited {
background: #444;
color: #ddd;
width: 148px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 0px 10px;
line-height:30px;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
text-transform: none;
position: relative;
font-size:12px;
}
#main-menu li li a:hover, #main-menu li li a:active {
background: #4a4a4a;
color: #fff;
}
#main-menu li li a .sf-sub-indicator {
top: 10px;
}
#main-menu li ul {
z-index: 400;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 1px 0px 0px 0px;
padding: 0;
}
#main-menu li ul a {
width: 150px;
}
#main-menu li ul a:hover, #main-menu li ul a:active {
}
#main-menu li ul ul {
margin: -31px 0 0 169px;
}
#main-menu li:hover ul ul, #main-menu li:hover ul ul ul, #main-menu li.sfHover ul ul, #main-menu li.sfHover ul ul ul {
left: -999em;
}
#main-menu li:hover ul, #main-menu li li:hover ul, #main-menu li li li:hover ul, #main-menu li.sfHover ul, #main-menu li li.sfHover ul, #main-menu li li li.sfHover ul {
left: auto;
}
#main-menu li:hover, #main-menu li.sfHover {
position: static;
}
/* HOME PAGE */
#slider{
position:relative;
width:900px;
margin:50px auto 25px;
padding-bottom:20px;
}
#front-welcome{
text-align:center;
padding:20px 0 0 0;
font-family:"YanoneKaffeesatzRegular",arial;
margin-bottom:-30px;
}
#front-welcome .block > h2{
color:#282c2f;
font-size:28px;
margin:0px auto;
font-family:"YanoneKaffeesatzRegular",arial;
font-weight:normal;
text-transform: none;
}
#front-welcome p{
padding:10px 0px;
color:#282c2f;
line-height:22px;
font-size:18px;
font-family:"YanoneKaffeesatzRegular",arial;
}
.sidepane {
background-color:#eeeeee;
padding: 5px 5px 0 5px;
}
/*------------------------------------------------*/
#page-container{
padding:30px 0 20px 0;
}
#content {
display: inline;
margin: 0;
}
/* 3 columns */
body.two-sidebars #content {
float: left;
margin: 0 0 0 25px;
padding: 0;
width: 450px;
}
/* 2 columns: sidebar-first */
body.sidebar-first #content {
float: right;
margin: 0;
padding: 0;
width: 675px;
}
/* 2 columns: sidebar-second */
body.sidebar-second #content {
float: left;
margin: 0;
padding: 0;
width: 675px;
}
body.two-sidebars #sidebar-first {
float: left;
margin: 0;
padding: 0;
width: 200px;
}
/* 3 columns: sidebar-second */
body.two-sidebars #sidebar-second {
float: right;
margin: 0;
padding: 0;
width: 200px;
}
/* 2 columns: sidebar-first */
body.sidebar-first #sidebar-first {
float: left;
margin: 0;
padding: 0;
width: 200px;
}
/* 2 columns: sidebar-second */
body.sidebar-second #sidebar-second {
float: right;
margin: 0;
padding: 0;
width: 200px;
}
.node {
margin-bottom: 20px;
padding-bottom: 20px;
}
#preface-wrapper {
margin: 0 auto;
}
#preface-wrapper .column {
float: left;
}
#preface-wrapper.in1 .column {
width: 100%;
}
#preface-wrapper.in2 .column {
width: 50%;
}
#preface-wrapper.in3 .column {
width: 33.3%;
}
#preface-wrapper .block {
padding-left: 15px;
padding-right: 15px;
}
#bottom-wrapper {
margin: 10px auto 0;
text-align: left;
width: 930px;
}
#bottom-wrapper .column {
float: left;
padding-bottom: 15px;
}
#bottom-wrapper.in1 .column {
width: 100%;
}
#bottom-wrapper.in2 .column {
width: 50%;
}
#bottom-wrapper.in3 .column {
width: 33.3%;
}
#bottom-wrapper.in4 .column {
width: 25%;
}
#bottom-wrapper .block {
padding-left: 15px;
padding-right: 15px;
}
.bottom{
background:#f4f4f4;
padding:10px 0px;
}
.bottom-container{
margin: auto;
width: 930px;
}
.bottom-container .column {
float: left;
}
.bottom-container.in1 .column {
width: 100%;
}
.bottom-container.in2 .column {
width: 50%;
}
.bottom-container.in3 .column {
width: 33.3%;
}
.bottom-container .block {
padding-left: 15px;
padding-right: 15px;
}
.bottom-container p{
padding:5px 0px;
color:#555;
line-height:20px;
}
#footer{
padding:10px 0px;
overflow:auto;
font-family:Arial;
color:#777;
}
.credit{
float:right;
margin:10px 20px;
}
.copyright{
float:left;
margin:10px 20px;
width:400px;
}
.block > h2{
font-family:BebasNeueRegular,Arial, serif;
padding: 0px 0px 4px 0px;
color:#555;
font-size:28px;
font-weight:normal;
margin:5px 0px;
text-transform:uppercase;
}
.sidebar .block{
float:left;
width:200px;
font-size:12px;
margin:0px 0px 30px 0px;
display:inline;
overflow:hidden;
}
.block{
margin:0px 0px 30px 0px;
}
.node h2.title, #page-title{
color: #555555;
font-family: BebasNeueRegular,Arial,serif;
font-size: 60px;
font-weight: normal;
padding: 0 0 0px;
}
.node h2.title a{
color: #555555;
}
.content {
color: #333333;
}
/* Slideshow */
#slideshow {
margin: 50px auto 25px;
position: relative;
width: 900px;
}
#slides {
clear: both;
position:relative;
width:900px;
margin: auto;
}
.slides_container {
width:900px;
height:400px;
overflow:hidden;
position:relative;
z-index: 1;
}
.slides_container a,
.slides_container img {
display: block;
width:900px;
height:400px;
}
#slides .next,
#slides .prev {
position:absolute;
top: 0;
left: 0px;
width:38px;
height:38px;
background-image:url(images/slides_arrows.png);
z-index:10;
}
#slides .next {
left:176px;
}
.slides_nav {
display: none;
}
.slides_nav a.prev {
background-position: 0 0;
margin: 181px 0 0 0px;
}
.slides_nav a:hover.prev {
background-position: 80px 200px;
}
.slides_nav a.next {
background-position: 160px 0;
margin: 181px 0 0 686px;
}
.slides_nav a:hover.next {
background-position: 40px 200px;
}
#slides ul.pagination {
border: 0;
position: absolute;
z-index: 10;
margin: -25px 0 0 15px;
}
#slides ul.pagination li {
float:left;
margin: 0 10px 0 0;
list-style:none;
}
#slides ul.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background: url(images/slides_arrows.png) 0 160px;
float:left;
overflow:hidden;
}
#slides ul.pagination li.current a {
background: url(images/slides_arrows.png) 188px 160px;
}
.submitted {
background: #dfdddd;
padding: 4px 9px;
border-radius: 4px;
color: #383838;
text-shadow: 1px 1px #fff;
clear: both;
display: block;
margin-bottom: 2px;
}
.links {
color: #000;
margin-top: 10px;
font-size: 14px;
}
.links li a {
background: #d3d1d1;
padding: 4px 5px;
border-radius: 4px;
color: #383838;
text-shadow: 1px 1px #fff;
font-weight: normal;
}
.links li a:hover {
color: #B81007;
}
.content ul, .content ol {
padding-left:20px;
}
.content table {
background: #ececec;
border: 1px solid #bbbbbb;
}
.content th {
background: #dbdbdb;
padding: 5px 4px;
text-shadow: 1px 1px #fff;
border-right: 1px solid #c8c7c7;
}
.content td {
background: #ebebeb;
color: #747474;
text-align: left;
padding-left: 4px;
border-right: 1px solid #c8c7c7;
border-bottom: 1px solid #c8c7c7;
}
/*-------------------------------------------*
/* Fix CKEditor style
/*-------------------------------------------*/
#content-container table.cke_editor {
background: transparent;
border: 0;
}
#content-container table.cke_editor td {
background: transparent;
padding: 0;
border: 0;
}
/*-------------------------------------------*
/* Poll, Buttons, Form
/*-------------------------------------------*/
.poll .vote-form .choices .title {
font-size: 14px;
font-weight: normal;
line-height: 2;
}
.poll .vote-form .choices {
margin: 0;
}
.form-submit {
-moz-transition: all 0.2s ease-in-out 0s;
border-radius: 5px;
cursor: pointer;
background: none repeat scroll 0 0 #575757;
border: 1px solid #000000;
color: #fff;
padding: 4px 6px;
text-shadow: 1px 1px 1px #300033;
margin-right: 4px;
margin-bottom: 5px;
font-weight: bold;
}
.form-submit:hover {
background: none repeat scroll 0 0 #454444;
}
input.form-checkbox, input.form-radio {
vertical-align: baseline;
}
.form-text {
border-radius: 3px;
border: 1px solid #acacac;
padding: 4px 5px;
}
/*-------------------------------------------*
/* Menus and item lists
/*-------------------------------------------*/
.item-list ul {
margin: 0;
padding: 0 0 0 1.5385em;
}
.item-list ul li {
margin: 0;
padding: 0;
}
ul.menu li {
margin: 0;
padding: 0;
}
ul.inline {
clear: both;
}
ul.inline li {
margin: 0;
padding: 0;
}
/*-------------------------------------------*
/* Admin Tabs
/*-------------------------------------------*/
.tabs-wrapper {
border-bottom: 1px solid #b7b7b7;
margin: 0 0 5px 0;
}
ul.primary {
border: none;
margin: 0;
padding: 0;
}
ul.primary li a {
background: none;
border: none;
display: block;
float: left;
line-height: 1.5385em;
margin: 0;
padding: 0 1em;
border-radius: 4px 4px 0 0;
margin-right: 5px;
}
ul.primary li a:hover, ul.primary li a.active {
background: #666;
border: none;
color: #fff;
}
ul.primary li a:hover {
background: #888;
text-decoration: none;
}
ul.secondary {
background: #666;
border-bottom: none;
clear: both;
margin: 0;
padding: 0;
}
ul.secondary li {
border-right: none;
}
ul.secondary li a, ul.secondary li a:link {
border: none;
color: #ccc;
display: block;
float: left;
line-height: 1.5385em;
padding: 0 1em;
}
ul.secondary li a:hover, ul.secondary li a.active {
background: #888;
color: #fff;
text-decoration: none;
}
ul.secondary a.active {
border-bottom: none;
}
/*-------------------------------------------*
/* Tabs and Tags
/*-------------------------------------------*/
.field-name-field-tags {
margin: 0 0 10px 0;
}
.field-name-field-tags a{
display: inline-block;
background: url(images/tag.png) no-repeat;
padding: 0px 8px 0 16px;
height: 22px;
color: #333;
text-shadow: 1px 1px #fff;
border-radius: 2px;
font-size: 12px;
}
.field-name-field-tags a:hover{
color: #205194;
}
.field-name-field-tags .field-item {
margin: 0 1em 0 0;
}
.field-name-field-tags div {
display: inline;
}
#content-container .field-label{
}
#content-container .field-items .field-item{
}
/*-------------------------------------------*
/* Profile
/*-------------------------------------------*/
.profile {
margin: 1.5385em 0;
}
.profile dd {
margin-bottom: 1.5385em;
}
.profile h3 {
border: none;
}
.profile dt {
margin-bottom: 0;
}
.password-parent {
width: 36em;
}
/*-------------------------------------------*
/* comment
/*-------------------------------------------*/
#comments {
clear: both;
margin-top: 14px;
padding: 5px;
border: 1px solid #dddddd;
border-radius: 8px;
}
.comment {
margin-bottom: 1.5em;
padding: 5px;
border-radius: 7px;
min-height: 150px;
border-bottom: 1px solid #d9d9d9;
}
h3.comment-title a{
margin-bottom: 5px;
font-size: 16px;
color: #67696d;
}
.comment .new {
color: red;
text-transform: capitalize;
margin-left: 1em;
}
.form-textarea-wrapper textarea {
border-radius: 3px;
border: 1px solid #acacac;
}
.comment .submitted {
display:inline;
background: #e5e5e5;
}
.comment .user-picture{
float: left;
padding: 4px;
border: 1px solid #d9d9d9;
margin-right: 7px;
margin-bottom: 7px;
}
.comment-new-comments{
display: none;
}
/*-------------------------------------------*
/* Navigation
/*-------------------------------------------*/
.item-list .pager {
}
.item-list .pager li {
background: #cfcfcf;
border-radius: 3px;
margin-right: 4px;
text-shadow: 1px 1px #fff;
}
/*-------------------------------------------*
/* Forum
/*-------------------------------------------*/
.field-name-taxonomy-forums div {
display: inline;
margin-top: 4px;
}
.field-name-taxonomy-forums .field-items {
}
#forum .title {
font-size: 16px;
}
#forum .submitted {
font-size: 12px;
font-family: Lucida Grande, Verdana, Arial, sans-serif;
background: transparent;
padding: 0;
}
#forum .container {
background: #a1a1a1;
color: #fff;
}
#forum .container a {
color: #000;
font-weight: bold;
}
#forum div.indent {
margin-left: 2px;
}
.forum-starter-picture {
float: left;
padding: 4px;
border: 1px solid #d9d9d9;
margin: 5px 7px 5px 0;
}
#forum th {
background: #434343;
text-shadow: none;
color: #fff;
}
#forum th a {
color: #fff;
}
#forum td.forum .icon, #forum .icon div {
background: url(images/no-new-posts.png) no-repeat;
width: 35px;
height: 35px;
}
#forum .name a{
font-size: 16px;
}
=-=
in future when you want to share the entirety of the contents of a file, please use pastebin.com and link to the paste.
That said your stylesheet won't aid in this situation since the declarations for panels/views and other contrib modules aren't typically included by default in a theme style.css file. I highly suggest utilzing firebug for firefox or chromes developer tools to inspect the elements in question and provide for you the ability to edit css in real time. The HTML being rendered is equally as important as the CSS. As without the HTML, the CSS has nothing to work with.
http://london2011.drupal.org/conference/sessions/forensic-theming-key-te... will aid in better understanding how to work with HTML and CSS in drupal from a forensic perspective. Else, you will need to provide a link to the site.
Thanks & Update: Panels built-in feature
I appreciate the links. Sorry about the long post.
I realized that pane styles can be customized right in the panels module without even touching code. This solves a lot of my problems, but the options are limited, so I can't change the look of my links.
I'm going to edit what I can and then will post again with the info you requested if I can't figure it out. Thanks again.