How and where to style the Colorbox [#1489638]

I'am using the FullCalendar. When clicked a event the colorbox pops up. But there is a horizontal scrollbar and there is a lot of space to scroll to.
I've been looking all over the place but I don't seem to find out where I can style the colorbox.
I see an option in a view that is part of the contenttype called Event. This is to be found on Display settings >> Colorbox options. Here I can width and height but they don't seem to work.
Than I tried colorbox_default_style.css which doesn't seem to work either.

Or shoulld I style the specific content type..?! But where?!

I've been roaming the net to search for an answer but not able to find what I'am looking for.

Help very much appreciated.

Namaste

Comment	File	Size	Author
#23	colorbox-Expand_Instructions_for_Custom_Style-1489638.patch	1.42 KB	dolly nyc
#22	colorbox-Expand_Instructions_for_Custom_Style-1489638.patch	0 bytes	dolly nyc
#18	Picture 6.png	215.19 KB	misscosmic
#11	colorbox_problemz.jpg	183.47 KB	misscosmic

Comments

Comment #1

tim.plunkett

he/him

English

Philadelphia

commented 19 March 2012 at 14:19

Project:	FullCalendar	» Colorbox
Version:	7.x-1.3	» 7.x-1.x-dev
Component:	FullCalendar Colors	» Miscellaneous

FullCalendar just integrates with Colorbox, I'm moving this to their queue for more support.

Comment #2

lsolesen commented 25 June 2012 at 08:37

Assigned:

misscosmic

» Unassigned

Comment #3

jdwfly commented 29 June 2012 at 15:38

Are there any javascript errors on the page? Setting the width and height of the colorbox does work for me with the latest version. I'd make sure your colorbox module is up to date and also make sure that you have the latest colorbox plugin as well.

Comment #4

misscosmic commented 29 June 2012 at 16:30

No JS errors.
Yes the latest versions.
Changing the size I have managed to do no because it is an option in the admin>configuration>colorbox.

But what about changing the background ect. Which file?
Or how to make it so that an other CSS file is responsable for the design of the colorbox instead of the CSS that shapes the intire site as it seems to be now..?

Comment #5

lsolesen commented 3 July 2012 at 12:26

Status:

Active

» Postponed (maintainer needs more info)

Have you read this: http://drupalcode.org/project/colorbox.git/blob/refs/heads/7.x-1.x:/READ...

Comment #6

misscosmic commented 4 July 2012 at 15:39

Thanks for the energy you put in my issue Isolesen. I don't seem to get it to work. The problem I often encounter is that I see much more options and it often seems to be about which file I need to path-to or edit.

Same in this case, the link you gave me, which sounds promising clear and exactly what I would like give me the same problem. Namely path, yes but to which file..?!

"Add a custom Colorbox style to your theme:
74 ----------------------------------------
75 The easiest is to start with either the default style or one of the
76 example styles from the Colorbox plugin. Simply copy the whole
77 style folder to the theme and rename it and the files to
78 something logical.
79
80 Add entries in the themes info file for the Colorbox CSS/JS files.
81
82 In the Colorbox settings select "None" as style. This will leave the
83 styling of Colorbox up to your theme."

The/my problem is #80. Is the entry
- the path to the Colorbox module in the sites/all/libraries/colorbox
- or to the files in sites/all/libraries/colorbox/colorbox (which is there and has to be there also)
- or is it to the files I just copied in my themes folder (#76)

Comment #7

lsolesen commented 4 July 2012 at 16:23

could you attach the style you are trying to get to work

Comment #8

lsolesen commented 4 July 2012 at 16:23

could you attach the style you are trying to get to work

Comment #9

misscosmic commented 4 July 2012 at 17:58

... but it still it shows the background and the hole layout of a normal page..

I found thislink. In which is:

  // Add JS and CSS based on selected style.
  switch ($style) {
    case 'none':
      break;
    case 'default':
      drupal_add_css($path . '/styles/default/colorbox_default_style.css');
      drupal_add_js($path . '/styles/default/colorbox_default_style.js');
      break;
    case 'stockholmsyndrome':
      drupal_add_css($path . '/styles/stockholmsyndrome/colorbox_stockholmsyndrome.css');
      drupal_add_js($path . '/styles/stockholmsyndrome/colorbox_stockholmsyndrome.js');
      break;
    default:
      drupal_add_css($style . '/colorbox.css');
  }

I would like to try this script, but than (again) my ever (endless) lasting issue, in which file do I put this script..?

Comment #10

lsolesen commented 4 July 2012 at 18:40

We can only help you if we get the whole source for the style, you are trying to create and some screenshots of what is going wrong.

Comment #11

misscosmic commented 5 July 2012 at 11:43

Status	File	Size
new	colorbox_problemz.jpg	183.47 KB

In the red frame is the colorbox pop-up.
The layout and size is exactly as the site itself, althought I made a path to a css for the colorbox.

Comment #12

lsolesen commented 5 July 2012 at 13:33

we need the entire code.

Comment #13

misscosmic commented 5 July 2012 at 14:10

See this is my problem..I feel damn silly.. What do you mean by the entire code? The 'view source' of colorbox pop-up in the browser? A php file, the css?

Comment #14

misscosmic commented 5 July 2012 at 14:16

style.css of the theme:

body { font: 0.8em/165% "Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; margin:0; padding:0; color: #323232; outline:0 none; vertical-align:baseline; 
background:#133011; height: 100%;}

h1, h2, h3, h4, h5, h6 { margin:25px 0 20px 0; line-height:120%; text-shadow: 1px 1px 1px #EAF1EA; color:#6E930D; font-family: Myriad Pro,"Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; }

h1 {
 font-size: 24px; margin:0 0 20px 0; }

h2 { font-size: 20px; color:#6E930D; font-weight:normal;
	margin-top: 10px;
	margin-bottom: 10px;
}

h3 { font-size: 130%;
	margin-top: 5px;
	margin-bottom: 5px;
}

h4 { font-size: 110%; }

.front .node h1 { font-size:30px; color:#494d4f; font-weight:normal; }

.front .node h1.front-heading { margin-bottom:0; color:#6E930D; font-weight:bold; }

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer-bottom h1, #footer-bottom h2, #footer-bottom h3, #footer-bottom h4, #footer-bottom h5, #footer-bottom h6 { text-shadow:none; }

.subtitle { padding:5px 0 15px 0; font-size:18px; color:#494d4f; font-family: Myriad Pro,"Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; }

p { margin:0 0 25px 0;
}

a, li a.active { color:#596F1F; text-decoration:none;
}

#footer a, #footer li a.active, #footer-bottom a, #footer-bottom li a.active { color:#ffffff; }

#footer a:hover, #footer li a.active:hover, #footer-bottom a:hover, #foote-bottom li a.active:hover { color:#6E930D; }

a img { border:none; outline: none; display:block; overflow:hidden; border-top-left-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-top-right-radius: 10px 10px; }

img.masked, .field-type-image img { background:transparent url('images/pattern.png'); border:1px solid #d8d8d8; padding:10px; margin:10px 0; }

code { font-family: "Courier New", Courier, monospace; }

blockquote { background:transparent url('images/blockquote.png') no-repeat top left; margin: 40px 0; padding: 0 55px; }

.breadcrumb { padding:0 10px 20px 0; }

.breadcrumb-separator { padding:0 8px 0 4px; }

.submitted { font-size: 85%; text-transform: uppercase;
	margin: -10px 0 9px;
}

.region-sidebar-first .block h2 {  
margin: 0 0 0 0; 
padding:0 0 5px 0;
	color: #2a3626;
	font-weight: bold;
}

.region-content { line-height:155%;} 

#header a { color: #86008b; }


#site-name { font-size:120%;
}

#slogan { color:#d5d5d5; }

/* 
* Layout 
*/
#header { clear:both;
	border-left: 88px solid #133011;
	border-right: 88px solid #133011;

/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f2f2f', endColorstr='#1b1a1a');
}

#header-inside { width: 960px; margin: 0 auto; padding:40px 0; overflow:hidden;
	background: #fff url(../../sites/default/files/images/ortie_vrijstaand_petit.png) no-repeat left;
} 

#header-menu { clear:both; background: #596F1F; border-top:0px solid #353535;
	color: #fff;
	border-bottom-style: solid;
	border-bottom-width: 0px;
	border-left: 88px solid #133011;
	border-right: 88px solid #133011;
	padding-left: 30px;
}

#header-menu-inside { width: 960px; margin: 0 auto; height:45px; line-height:46px;
} 

#header-inside-left { float:left; width: 620px; margin:0;
	left: 20px;
	padding: 0 0 0 180px;
}

#header-inside-right { float:left; width: 280px; padding:0; }

#logo { float:left; width:336px; display:block; overflow:hidden; padding: 0 0 0 20px; margin:0; }

#logo a{ padding:0; margin:0; display:block; overflow:hidden; }

#logo img { padding:0; margin:0; display:block; overflow:hidden; }

#banner  { clear:both; border-bottom:1px solid #ffffff; overflow: hidden;
background: #efeeee;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #efeeee 0%, #dadada 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #efeeee 0%, #dadada 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #efeeee 0%, #dadada 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efeeee), color-stop(1, #dadada));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #efeeee 0%, #dadada 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #efeeee 0%, #dadada 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efeeee', endColorstr='#dadada'); }

#content { clear: both; text-align: left;  	min-height: 100%;  margin-left: auto;
   margin-right: auto;
background: #e8e8e8;
	border-left: 88px solid #133011;
	border-right: 88px solid #133011;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #e8e8e8 0%, #efefef 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #e8e8e8 0%, #efefef 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #e8e8e8 0%, #efefef 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8), color-stop(1, #efefef));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #efefef 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #e8e8e8 0%, #efefef 100%); 

/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#efefef');
	width: 960px; min-height: 100%;

}

#content-inside { width: 960px; min-height: 100%;
 margin: 0 auto; padding: 10px 0 60px 10px; display:block;
	background-image: url(../../sites/default/files/images/ortilfond.jpg); overflow-x: auto; overflow-y: hidden;


} 

#main { float:left; width: 660px; padding: 0 30px 0 20px; margin:0;
	min-height: 100%; overflow-y: hidden; overflow-x: auto; scroll: no-scroll;}

#sidebar { float: left; width: 210px; padding: 10px 0 0; } 

.no-sidebars #main { width:670px; padding:0; margin:0; }

.no-sidebars #sidebar { display:none; }

.node .links,
.comment .links { display:none;

}

.meta-data { font-size:75%; text-transform:uppercase; color:#545454; margin:5px 0 20px 0; display:block; overflow:hidden; clear:both; }

/* 
#footer { clear:both; overflow:hidden; background:#133011; padding:20px 0 50px 0;}
*/ 
#footer-inside { width: 960px; margin: 0 auto; } 

.footer-area { width:280px; float:left; padding:0 50px 0 0; }

.footer-area.first { width:280px;}

.footer-area.second { width:300px; }

.footer-area.third { width:280px; padding:0; }

.node.node-teaser { margin-bottom:60px; }

#footer-bottom { clear:both; overflow:hidden; padding:40px 0;
background: #7E7971;
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#262626', endColorstr='#1a1a1a'); }

#footer-bottom-inside { width: 960px; margin: 0 auto; } 

#footer-bottom-left { float:left; width: 620px; padding:0 60px 0 0; margin:0; }

#footer-bottom-right { float:left; width: 280px; padding:0; }

/*
* Sidebar Blocks - Menus
*/
.region-sidebar-first .block .content { 
border:1px solid #ffffff; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
overflow:hidden; 
background:#ffffff; 
margin: 0 0 5px;
 /* shadow */
-webkit-box-shadow: 0 2px 6px #efefef inset;  -moz-box-shadow:0 2px 6px #efefef inset;  box-shadow:0 2px 6px #efefef inset;
	padding-bottom: 10px;
	padding-left: 6px;
}

.region-sidebar-first #block-block-2.block .content { background:none; border:none; padding:0; -webkit-box-shadow: none;  -moz-box-shadow:none;  box-shadow:none; }

.region-sidebar-first ul.menu {  margin:0; padding:0; }

.region-sidebar-first ul.menu li { list-style:none; margin:0; padding:0; list-style-image:none; }

.region-sidebar-first ul.menu li a { border-bottom:1px solid #e7e7e7; display:block; padding:5px;
	font-size: 14px;
}

.region-sidebar-first ul.menu li a:hover{ border-bottom:1px solid #e7e7e7; display:block; padding:5px;
	color: #FFFFFF;
	background-color: #EDA400;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomtop: 20px;
-moz-border-radius-topleft: 20px;
border-bottom-right-radius: 20px;}

.region-sidebar-first ul.menu ul.menu { padding:0 0 0 15px; }


/* 
* Contact 
*/
.contact-form { margin:10px 0;
	background-color: #fb68dd;
	color: #d95eff;
}

.contact-form label, .comment-form label { font-weight:bold; }

.contact-form input.form-text, .comment-form input.form-text { background:#e8e8e8; border:1px solid #f2f2f2;
font-family: "Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; height:25px; line-height:25px; margin:0 0 10px 0; padding:5px; width:350px; color:#5f6a5f; 
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
 /* shadow */
-webkit-box-shadow: 0px 2px 3px #bcbcbc inset;  -moz-box-shadow: 0px 2px 3px #bcbcbc inset;  box-shadow: 0px 2px 3px #bcbcbc inset; }

.contact-form input.form-text.error { border:2px solid red; }

.contact-form textarea, .comment-form textarea { background:#e8e8e8; border:1px solid #f2f2f2;
font-family: "Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif;
margin:0 20px 10px 0; padding:10px 5px; height:155px; font-size:100%; color:#5f6a5f; 
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
 /* shadow */
-webkit-box-shadow: 0px 2px 3px #bcbcbc inset;  -moz-box-shadow: 0px 2px 3px #bcbcbc inset;  box-shadow: 0px 2px 3px #bcbcbc inset;}

.filter-wrapper { border:1px solid #DDDDDD; border-top:none; }

.user-picture { float:left;  padding:0 20px 10px 0; }

/*
* About
*/
.about-features { padding:60px 0 0 0; }

.about-feature { float:left; padding:0 20px 0 0; margin:0 20px 0 0; border-right:1px solid #e5e5e5; width:290px; }

.about-feature.last { float:left; padding:0; margin:0; border-right:none; }

.about-members { clear:both; padding:10px 0 0 0;}

.about-member { background:transparent url('images/pattern.png'); border:1px solid #e4e4e4; padding:15px; float:left; width:418px; margin:0 0 60px 0; }

.about-member p { margin:0; }

.about-member.left { margin-right:60px; }

/*
* Products
*/
.product { float:left; width:280px; margin:0 60px 60px 0;  }

.product.last{ margin:0 0 60px 0; }

.product h2 { margin:0 0 5px 0; }

.product-subtitle { padding:0 0 10px 0; }

/*
* Services
*/
.services { clear:both; padding:20px 0; }

.service-left { float:left; width:450px; padding:0 30px 0 0; }

.service-right { float:left; width:450px; padding:0 0 0 30px; }

/*
* Testimonials
*/
.testimonial { display: block; overflow: hidden; position: relative; clear:both; }

.testimonial-inner { outline:none; border:1px solid #ffffff; 
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
padding: 20px; overflow:hidden; background:#ffffff; margin:25px 0 0 0; font-style:italic;
 /* shadow */
-webkit-box-shadow: 0 2px 3px #efefef inset;  -moz-box-shadow:0 2px 3px #efefef inset;  box-shadow:0 2px 3px #efefef inset; }

.testimonial-submitted { background: url("images/testimonial.png") no-repeat scroll 95% 0 transparent; text-align:right; padding:20px 0 0 0; }

/* 
* Main-menu 
*/
/* 1st Level */
#header-menu ul.menu  { display:block; padding:0; margin:0; position:relative; z-index:100; }

#header-menu ul.menu li { display:inline-block; float:left; vertical-align: middle; padding:0; margin:0; }

#header-menu ul.menu li a { outline:none; text-decoration: none; margin:0 35px 0 0; color:#ffffff; font-size:14px; font-weight:normal; text-align:center; text-transform:uppercase; 
font-family: Myriad Pro,"Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; display:block; }

#header-menu ul.menu li a:hover, #header-menu ul.menu li a.active { color: #e844f9;
}

#header-menu ul.menu li a:after { content: none; }

#header-menu ul.menu li.expanded { position: relative; }

#header-menu ul.menu li.expanded a { background:transparent url('images/main-menu-expanded.png') no-repeat center right; padding:0 15px 0 0; }

/* 2nd Level */
#header-menu ul.menu li.expanded ul.menu { width: 150px; z-index:100; padding:0; background: #222222; display: none; position: absolute;}

#header-menu ul.menu li.expanded:hover, #header-menu ul.menu li.expanded:hover > ul.menu { display:block;  }

#header-menu ul.menu li.expanded ul.menu li a { padding:10px; margin:0; display:block; width:130px; text-align:left; line-height:130%; background:none; font-size:12px; border-bottom:1px solid #353535;}

#header-menu ul.menu li.expanded ul.menu li.expanded { background:transparent url('images/main-menu-arrow.png') no-repeat center right; }

#header-menu ul.menu li ul.menu li a:hover {  background:#1b1b1b; color: #f13ed4; }

#header-menu ul.menu li.expanded ul.menu li.expanded a:hover { background:#1b1b1b url('images/main-menu-arrow.png') no-repeat center right; width: 150px
}

#header-menu ul.menu li.expanded ul.menu li.leaf a:hover { background:#1b1b1b;  width: 130px;

}

/* 3rd, 4th, 5th, (...) level  */
#header-menu ul.menu li.expanded ul ul { display: none; left: 120px; top:0; padding:0; width: 150px}

/* Footer menu */
#footer .block ul.menu { margin: 0; padding: 0; }

#footer .block ul.menu ul.menu { margin: 0 0 0 15px; }

#footer .block ul.menu li { list-style:none; margin:0; padding:0; list-style-image:none; }

#footer .block ul.menu li a { border-bottom: 1px solid #353535; display: block; padding:5px; }

/* 
* Footer-bottom menu 
*/
ul.secondary-menu, #footer-bottom ul.menu { padding:0; margin:0 0 10px 0; display:block; overflow:hidden; }

ul.secondary-menu li, #footer-bottom ul.menu li { border-right:1px solid #353535; display:block; float:left; list-style-type:none; overflow:hidden; padding:0 10px; margin:0; }

ul.secondary-menu li.first, #footer-bottom ul.menu li.first { padding:0 10px 0 0; margin:0; }

ul.secondary-menu li.last, #footer-bottom ul.menu li.last { border-right:none; margin:0; }

#footer-bottom ul.menu ul.menu { display:none; }

/* 
* Comments 
*/
#comments { padding:20px 0 0 0; }

.comment { border:1px solid #ffffff; 
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
padding: 20px; overflow:hidden; background:#ffffff; margin:0 0 30px 0;
 /* shadow */
-webkit-box-shadow: 0 2px 6px #efefef inset;  -moz-box-shadow:0 2px 6px #efefef inset;  box-shadow:0 2px 6px #efefef inset;}

#comments-title { border:1px solid #e7e7e7; padding:5px 10px; display:block; overflow:hidden; margin:0 0 30px 0;
/* background */
background: #fdfdfd;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdfdfd), color-stop(1, #efefef));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#efefef');
/* radius */
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
}

#comments-title h2 { padding:0; margin:0; }

#comments-title-left { float:left; width:50%; }

#comments-title-right { float:right; width:50%; text-align:right; }

#comments-title-right .counter { color:#979696; font-weight:bold; font-size:20px; 
background:transparent url('images/comments.png') no-repeat center left; padding:0 0 0 35px; }

#comments h3 { margin:0; padding:10px 0 20px 0; font-weight:normal; }

#comments ul.links { display:block; }

#comments ul.links li a { color:#ffffff; padding:5px 10px; margin:0 0 0 2px; text-shadow: 0 1px 1px #003547; font-weight:bold; border:none;
font-family: "Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; cursor:pointer;
/* background */
background: #0093c5;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0093c5), color-stop(1, #0079a2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0093c5', endColorstr='#0079a2');
/* radius */
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
/* shadow */
-webkit-box-shadow: 0px 1px 2px #939da2; -moz-box-shadow: 0px 1px 2px #939da2; box-shadow: 0px 1px 2px #939da2; }

#comments ul.links li a:hover {  background: #008ab8; text-decoration:none; }

/*
* Poll
*/
.poll .bar .foreground { background-color: #0092c3; }

.poll .title { padding:0 0 20px 0; }

/*
* Recent content block
*/
#block-node-recent table, #block-node-recent td { border:none; }

#block-node-recent table tbody { border:none; }

#block-node-recent tr.even, #block-node-recent tr.odd { border-bottom:1px solid #e7e7e7; }

/*
* Search
*/
#block-search-form { background:#e8e8e8; border:none; overflow:hidden;
/* Radius */
 -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
 /* shadow */
-webkit-box-shadow: 0px 2px 5px #c8c8c8 inset;  -moz-box-shadow: 0px 2px 5px #c8c8c8 inset;  box-shadow: 0px 2px 5px #c8c8c8 inset; }

#block-search-form .form-item { margin:0; padding:0; }

#block-search-form input.form-text { background:none; border:none; outline:none; text-decoration: none; color:#9f9f9f; float:left; width:218px; padding:10px; 
font-family: "Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; height:15px; line-height:15px; }

#block-search-form input.form-submit { background:none; border:none; outline:none; padding:6px 10px 0 10px; }

.region-sidebar-first #block-search-form { -webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none; }

.region-sidebar-first #block-search-form.block  { background:none; }

.region-sidebar-first #block-search-form.block .content  { background:#ffffff; border:1px solid #FFFFFF; overflow:hidden; padding:0; }

/* 
* Messages
*/
div.messages.status { background:#52ac61; border:1px solid #46a055; padding:10px; margin:0 0 15px 0; color:#ffffff; }

div.messages.error { background:#d30000; border:1px solid #b50000; padding:10px; margin:0 0 15px 0; color:#ffffff; }

div.messages.warning { background:#dd6e0c; border:1px solid #d2ac7f; padding:10px; margin:0 0 15px 0; color:#ffffff; }

div.messages.status a, div.messages.error a, div.messages.warning a { color:#ffffff; text-decoration:underline; }

/* 
* Javascript Slideshow 
*/
#slideshow { display:block; position:relative; overflow: hidden; width: 100% !important; background:transparent; }

.slider-item { width:100% !important; background:transparent !important; }

.slider-item .content { width:960px; margin:0 auto; padding:30px 0 0 0; position:relative; }

.slider-item a { outline:none; }

#slider-controls-wrapper { width:960px; margin:0 auto; padding:20px 0; display:block; } 

#slider-controls { display:block; text-align:center; width:960px; } 

#slider-controls ul { display:block; overflow:hidden; margin:0; padding:0; text-align:center; }

#slider-controls ul li { display:inline; margin:0; padding:0; list-style:none; }

#slider-controls ul li a { width:25px; height:32px; background:url('images/inactive-slide.png') no-repeat center center; display:inline-block; padding:0; margin: 0 5px 0 0; outline:none; }

#slider-controls ul li a:focus { outline:none; }

#slider-controls ul li.activeSlide a:hover, #slider-controls ul li.activeSlide a { background:url('images/active-slide.png') no-repeat center center; }

/* 
* Slideshow Typography
*/
#slideshow h2 { margin:0 0 10px 0; color:#222222; font-size:30px; font-weight:bold; }

#slideshow img {  }

/*  
* Tables
*/
table { border-collapse: collapse; width:100%; }

table, td { border: 1px solid #bbbbbb; }

table th { background:#222222; color:#ffffff; font-weight:bold; border:none; }

table tr.odd { background:transparent; }

table tr.even { background:#ffffff; }

table td, table th { padding:5px; }

/* 
* Lists 
*/
ol { list-style-type:decimal; }

ol ol { list-style-type:upper-alpha; }

ol ol ol {list-style-type:lower-alpha; }

li { display:list-item; }

.pager-current { font-weight:bold; color:#7c713f; }

ul.tabs { clear:both; margin:20px; white-space: normal }

ul.tabs li { padding:10px 0; line-height:130%; }

.links { display: block; text-align:right; }

.links li { list-style-type:none; }

.item-list ul { margin:0 0 0.25em 1em; padding:0; }

.item-list ul li { margin:0 0 0 5px; padding:0 0 5px 5px; }

ol.search-results { padding:0; }

.links ul li a, a.more, #edit-submit, #edit-preview, input.form-submit { color:#ffffff; padding:7px 15px; text-shadow: 0 1px 1px #003547; font-weight:bold; border:none;
font-family: "Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; cursor:pointer;
/* background */
background: #0095c7;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0093c5), color-stop(1, #0079a2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0093c5', endColorstr='#0079a2');
/* radius */
-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; 
/* shadow */
-webkit-box-shadow: 0px 1px 2px #939da2; -moz-box-shadow: 0px 1px 2px #939da2; box-shadow: 0px 1px 2px #939da2; }

.links ul li a:hover, a.more:hover, #edit-submit:hover, #edit-preview:hover, input.form-submit:hover {  background: #008ab8; text-decoration:none; }

.resizable-textarea .grippie { border:1px solid #dddddd; }

#edit-submit, #edit-preview { margin:0 10px 0 0; }

#block-search-form input.form-submit { margin:0; border:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; background:none; filter:none; }

ul.inline li { display: inline-block; margin: 0; padding: 10px 5px; zoom: 1; *display: inline;
}

input.form-submit { margin:0 10px 0 0; }

/*
* Social
*/
ul.social-bookmarks { margin:0; padding:0; }

ul.social-bookmarks li {display:inline-block; float:left; list-style-type:none; margin:0; cursor:pointer; }

ul.social-bookmarks li a { display:inline-block; width:25px; height:24px; padding:0 3px;  margin:0 auto; text-align:center; overflow:hidden; outline:none; }

ul.social-bookmarks li.label { padding:0 15px 0 0; }

ul.social-bookmarks li.facebook a { background:url('images/social-media-facebook.png') no-repeat center bottom; }

ul.social-bookmarks li.twitter a { background:url('images/social-media-twitter.png') no-repeat center bottom; }

ul.social-bookmarks li.rss a { background:url('images/social-media-rss.png') no-repeat center bottom; }

ul.social-bookmarks li.linkedin a { background:url('images/social-media-linkedin.png') no-repeat center bottom; }

ul.social-bookmarks li.delicious a { background:url('images/social-media-delicious.png') no-repeat center bottom; }

/*
* Forum
*/
#forum { padding:20px 0; }



/*
* Twitter updates
*/
.twtr-hd, .twtr-ft { display:none; }

.twtr-bd { display:block; overflow:hidden; }

.twtr-widget .twtr-tweet { border-bottom: 1px solid #353535 !important; padding: 0 0 5px 0; margin: 0 0 5px 0;  }

.views-slideshow-controls-bottom .views-slideshow-pager-field-item { float: left;
	margin-bottom: 20px;
	margin-top: 7px;
	margin-right: 7px;
}
html, body {
height: 100%;

}

php.tpl.php of the theme:

if ($logo):
print check_url($front_page); " title=" print t('Home'); "> print $logo; " alt=" print t('Home'); " />
endif;

if ($site_name || $site_slogan):

-->
if ($site_name):
print check_url($front_page); " title=" print t('Home'); "> print $site_name;
endif;
if ($site_slogan):
print $site_slogan;
endif;

endif;

print render($page['search_area']);

          if($page['menu_block']) {
              print render($page['menu_block']);
          } else {
              $main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu'));
              print drupal_render($main_menu_tree);
          }

if (theme_get_setting('breadcrumb_display','corporateclean')): print $breadcrumb; endif;

if ($page['highlighted']):

print render($page['highlighted']);

endif;

if ($messages):

print $messages;

endif;

if ($page['help']):

print render($page['help']);

endif;

if ($action_links):

print render($action_links);

endif;

print render($title_prefix);
if ($title):

print $title

endif;
print render($title_suffix);

if ($tabs): print render($tabs); endif;

print render($page['content']);

Comment #15

dolly nyc commented 5 July 2012 at 14:33

misscosmic -- the easiest way is to copy the entire "default" or "stockholmsyndrome" folder from the styles folder in the colorbox module folder INTO your theme's folder. Rename the folder to something you'll recognize like "mycolorbox." Inside that folder is a .css file and a .js file (and an images folder). Rename both the .css and .js files to match your folder name: i.e. "colorbox_mycolorbox.css" and "colorbox_mycolorbox.js"

Then, you need to add a line to the info file of your theme -- "yourtheme.info" -- so your theme knows to use the stylesheet from "mycolorbox"

stylesheets[all][] = mycolorbox/colorbox_mycolorbox.css

(It's around line 49 in my theme which is based on Zen--you need to search the .info file for the other stylesheets[all][] which allow the them to override any module's css)

Make sure you have the style set to "None" in the Admin->Configuration->Colorbox settings page under "Styles and Options"

Then make any css adjustments to your "colorbox_mycolorbox.css" file

Comment #16

lsolesen commented 5 July 2012 at 16:47

@dolly nyc Could you make a patch for the README with your extensive explanation?

Comment #17

dolly nyc commented 5 July 2012 at 17:07

I'll try -- never made a patch before so have to read how to do that properly :)

Comment #18

misscosmic commented 5 July 2012 at 17:25

Status	File	Size
new	Picture 6.png	215.19 KB

Thnks dolly nyc.
I do exactly what you say and still the layout is influenced by the style.css and not the colorbox_style.css.
As you can see in the screendump firebug shows both style.css and colorbox_xtyle.css.

I imagin that I had to leave the style.css in the .info aswell..?! Otherwise the normal pages read the color_style.css which of course I don't want.
So in the .info now there is both:
stylesheets[all][] = style.css
stylesheets[all][] = colorbox_style/colorbox_style.css

Is it something in the content type..? Do I have to add or remove field. A filter..?

Comment #19

lsolesen commented 5 July 2012 at 17:50

@dolly nyc --> http://drupal.org/node/707484

Comment #20

dolly nyc commented 7 July 2012 at 21:28

@isolesen -- thanks, working on it

@misscosmic

i forgot to write that you need to add this line to the info file too:

scripts[] = mycolorbox/colorbox_mycolorbox.js

Again, look for a similar line in the .info file so it's easy for you to find again

you shouldn't delete any of the other style sheets that are mentioned in the .info file since most likely they were put there by your theme (unless you added them too)

it looks like you're trying to open a node in the colorbox? look through the issues for the information on that, there are a lot of different solutions that will help you to format the node properly (or maybe you even want to look at http://drupal.org/project/colorbox_node -- i don't know anything about that module but it might solve your problems)

Comment #21

misscosmic commented 8 July 2012 at 19:34

@isolesen, @dolly nyc thanks for all your help. I don't seem to be able to make it work. The colorbox keeps on being influenced by the style.css no matter what I try..

Comment #22

dolly nyc commented 24 July 2012 at 23:12

Component:	Miscellaneous	» Documentation
Status:	Postponed (maintainer needs more info)	» Needs review

Status	File	Size
new	colorbox-Expand_Instructions_for_Custom_Style-1489638.patch	0 bytes

Sorry for the delay -- my first patch, I hope I did this correctly. (At least it's only to the README file, can't break too much there...)

Comment #23

dolly nyc commented 24 July 2012 at 23:19

Status	File	Size
new	colorbox-Expand_Instructions_for_Custom_Style-1489638.patch	1.42 KB

Oops here it is :0

Comment #24

frjo commented 25 July 2012 at 12:00

Status:

Needs review

» Fixed

Thanks @dolly nyc. Committed with some minor changes to both 6-dev and 7-dev.

Comment #25

misscosmic commented 27 July 2012 at 11:28

Thanks dolly. It will be my first time a apply a patch, which makes me a little nervous.. but I'll do my best

Comment #26

dolly nyc commented 28 July 2012 at 16:47

@misscosmic -- the patch is just for the README, it's the same as the instructions I wrote above in #15 above. Look at http://drupal.org/project/colorbox_node because that might solve your problems if you're trying to open a single node within the colorbox.

Comment #27

11 August 2012 at 16:51

Status:

Fixed

» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

How and where to style the Colorbox

Comments

Comment #1

Comment #2

Comment #3

Comment #4

Comment #5

Comment #6

Comment #7

Comment #8

Comment #9

Comment #10

Comment #11

Comment #12

Comment #13

Comment #14

Comment #15

Comment #16

Comment #17

Comment #18

Comment #19

Comment #20

Comment #21

Comment #22

Comment #23

Comment #24

Comment #25

Comment #26

Comment #27

News items

Our community

Documentation

Drupal code base

Governance of community