Solved

Drupal Colorbox - move the text

Posted on 2014-01-05
4
435 Views
Last Modified: 2014-01-20
In this colorbox "slideshow", when you click on the image and get the colorbox, the text description is overlaying part of the image, which on a few of the images hides the important part of the image.
http://spirituality.server302.com/pre-post-images
If I try to just move the text, it doesn't show at all because it goes outside the pop up window. Is there some way for me to show the text to the right of the image in a separate pop-up window that changes with the image, or maybe at the bottom of the pop up window? Hopefully there is a way to do this with just CSS, or does it need some javascript?
0
Comment
Question by:nanharbison
  • 2
  • 2
4 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39765788
The z-index on the opaque overlay that dims the page is set at 9999 (excessively high).  If you give the text a higher z-index than the opaque overlay, then you should be able to display the text outside of the colorbox.

Cd&
0
 
LVL 17

Author Comment

by:nanharbison
ID: 39766620
I changed the z index of the colorbox to 700, enough to make it be the top and then I set the title to be 800, and I set overflow to be visible. This isn't exactly working though.
#colorbox, #cboxOverlay, #cboxWrapper{
	position:absolute; 
	top:0; 
	left:0; 
	z-index:700;
	overflow:visible;
	}
div#cboxTitle {
	position:absolute;
	overflow:visible;
	top:0px;
	left:0px;
	z-index:800;
	margin-left:300px;
	background-color:#FFF;
	color:#333;
	width:300px;
	height:150px;
}

Open in new window

Also, I am not sure how to make sure this effect happens only on this page. There are several other colorboxes.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39768570
The title is inside cboxcontent.  You need to remove the overflow attribute from both cboxcontent and cboxloadedcontent to let the overflow default, and that should let the title display.

As for what happens on other pages; I have no idea. When you use common templates there are frequently unintended consequences, and it is even more of an issue when you are locked in to third party code.  So you may have to do some tweaking of the styleshees to get everything working correctly.  I suggest you move the inline styling into stylesheets to make changes easier to manage.

Cd&
0
 
LVL 17

Author Closing Comment

by:nanharbison
ID: 39793965
I gave up  on this, I couldn't get it to work.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now