Tricked Out News

Welcome to TON. This site is dedicated to development of addons for the RavenNuke™ CMS
Follow Us:
Tricked Out Mods: Forums

 Forum FAQForum FAQ   SearchSearch   UsergroupsUsergroups   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Allow captions on two lines
 
 
Post new topic   Reply to topic   print    Tricked Out News Forum Index -> Colorbox addon
View previous topic :: View next topic  
Author Message
jakec
Regular
Regular


Joined: Oct 04, 2009
Posts: 12

Reputation: 400Reputation: 400
PostPosted: Mon Jan 25, 2010 7:44 am 
Post subject: Allow captions on two lines		 Reply with quote
Hi,

Just a quick question, I've had a quick look but struggling to find the right bit to edit.

What I want to do is increase the length of the caption text by allowing it to wrap onto two lines, or more. At the moment the text does wrap, but it overwrites the text showing the number of images.

Thanks in advance

jakec
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Mon Jan 25, 2010 7:53 am 
Post subject: 		Reply with quote
I will look at the colorbox css and see what can be done. I noticed the same thing about a week ago and was needing a longer description too...
_________________
Tricked Out News
  
Back to top
View user's profile Send private message
jakec
Regular
Regular


Joined: Oct 04, 2009
Posts: 12

Reputation: 400Reputation: 400
PostPosted: Mon Jan 25, 2010 7:55 am 
Post subject: 		Reply with quote
Cool glad I am not just being awkward.

Thanks for your help
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Mon Jan 25, 2010 9:23 am 
Post subject: 		Reply with quote
Try replacing the includes/jquery/css/colorbox.css with this.
Code:
/*


    ColorBox Core Style


    The following rules are the styles that are consistant between all ColorBox themes


*/


<a href="hashtag-results-colorbox.html">#colorbox</a>, <a href="hashtag-results-cboxOverlay.html">#cboxOverlay</a>, <a href="hashtag-results-cboxWrapper.html">#cboxWrapper</a>{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}


<a href="hashtag-results-cboxOverlay.html">#cboxOverlay</a>{position:fixed; width:100%; height:100%;}


<a href="hashtag-results-cboxMiddleLeft.html">#cboxMiddleLeft</a>, <a href="hashtag-results-cboxBottomLeft.html">#cboxBottomLeft</a>{clear:left;}


<a href="hashtag-results-cboxContent.html">#cboxContent</a>{position:relative; overflow:visible;}


<a href="hashtag-results-cboxLoadedContent.html">#cboxLoadedContent</a>{overflow:auto;}


<a href="hashtag-results-cboxLoadedContent.html">#cboxLoadedContent</a> iframe{display:block; width:100%; height:100%; border:0;}


<a href="hashtag-results-cboxTitle.html">#cboxTitle</a>{margin:1px;}


<a href="hashtag-results-cboxLoadingOverlay.html">#cboxLoadingOverlay</a>, <a href="hashtag-results-cboxLoadingGraphic.html">#cboxLoadingGraphic</a>{position:absolute; top:0; left:0; width:100%;}


<a href="hashtag-results-cboxPrevious.html">#cboxPrevious</a>, <a href="hashtag-results-cboxNext.html">#cboxNext</a>, <a href="hashtag-results-cboxClose.html">#cboxClose</a>, <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>{cursor:pointer;}








/* 


   ColorBox example user style


   The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, 


   in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com


*/


<a href="hashtag-results-cboxOverlay.html">#cboxOverlay</a>{background:#000;}





<a href="hashtag-results-colorbox.html">#colorbox</a>{}


   <a href="hashtag-results-cboxTopLeft.html">#cboxTopLeft</a>{width:14px; height:43px; background:url(images/controls.png)  0 0  no-repeat;}


   <a href="hashtag-results-cboxTopCenter.html">#cboxTopCenter</a>{height:43px; background:url(images/border.png) top left repeat-x;}


   <a href="hashtag-results-cboxTopRight.html">#cboxTopRight</a>{width:14px; height:43px; background:url(images/controls.png) -36px  0  no-repeat;}


   <a href="hashtag-results-cboxBottomLeft.html">#cboxBottomLeft</a>{width:14px; height:43px; background:url(images/controls.png) 0 -32px no-repeat;}


   <a href="hashtag-results-cboxBottomCenter.html">#cboxBottomCenter</a>{height:43px; background:url(images/border.png) bottom left repeat-x;}


   <a href="hashtag-results-cboxBottomRight.html">#cboxBottomRight</a>{width:14px; height:43px; background:url(images/controls.png) -36px -32px no-repeat;}


   <a href="hashtag-results-cboxMiddleLeft.html">#cboxMiddleLeft</a>{width:14px; background:url(images/controls.png) -175px 0 repeat-y;}


   <a href="hashtag-results-cboxMiddleRight.html">#cboxMiddleRight</a>{width:14px; background:url(images/controls.png) -211px 0 repeat-y;}


   <a href="hashtag-results-cboxContent.html">#cboxContent</a>{background:#fff;}


      <a href="hashtag-results-cboxLoadedContent.html">#cboxLoadedContent</a>{margin-bottom:5px;}


      <a href="hashtag-results-cboxLoadingOverlay.html">#cboxLoadingOverlay</a>{background:url(images/loading_background.png) center center no-repeat;}


                <a href="hashtag-results-cboxLoadingGraphic.html">#cboxLoadingGraphic</a>{background:url(images/loading.gif) center center no-repeat;}


                <a href="hashtag-results-cboxTitle.html">#cboxTitle</a>{position:absolute; bottom:-29px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}


                <a href="hashtag-results-cboxCurrent.html">#cboxCurrent</a>{position:absolute; top:-25px; left:58px; font-weight:bold; color:#7C7C7C;}


                


                <a href="hashtag-results-cboxPrevious.html">#cboxPrevious</a>, <a href="hashtag-results-cboxNext.html">#cboxNext</a>, <a href="hashtag-results-cboxClose.html">#cboxClose</a>, <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>{position:absolute; top:-29px; background:url(images/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;}


                <a href="hashtag-results-cboxPrevious.html">#cboxPrevious</a>{left:0px; background-position: -51px -25px;}


                <a href="hashtag-results-cboxPrevious.html">#cboxPrevious</a>.hover{background-position:-51px 0px;}


                <a href="hashtag-results-cboxNext.html">#cboxNext</a>{left:27px; background-position:-75px -25px;}


                <a href="hashtag-results-cboxNext.html">#cboxNext</a>.hover{background-position:-75px 0px;}


      <a href="hashtag-results-cboxClose.html">#cboxClose</a>{right:0; background-position:-100px -25px;}


      <a href="hashtag-results-cboxClose.html">#cboxClose</a>.hover{background-position:-100px 0px;}





                .cboxSlideshow_on <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>{background-position:-125px 0px; right:27px;}


                .cboxSlideshow_on <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>.hover{background-position:-150px 0px;}


                .cboxSlideshow_off <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>{background-position:-150px -25px; right:27px;}


                .cboxSlideshow_off <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>.hover{background-position:-125px 0px;}

_________________
Tricked Out News
  
Back to top
View user's profile Send private message
jakec
Regular
Regular


Joined: Oct 04, 2009
Posts: 12

Reputation: 400Reputation: 400
PostPosted: Mon Jan 25, 2010 9:39 am 
Post subject: 		Reply with quote
That's great, thanks Bobby.

Is it possible to remove the grey line at the top it's merging with the icons, although it may look better I guess to increase the width of the line to match the bottom.


Thanks again
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Mon Jan 25, 2010 9:44 am 
Post subject: 		Reply with quote
I will look at it in a little while after I get a break at work..
_________________
Tricked Out News
  
Back to top
View user's profile Send private message
jakec
Regular
Regular


Joined: Oct 04, 2009
Posts: 12

Reputation: 400Reputation: 400
PostPosted: Mon Jan 25, 2010 9:48 am 
Post subject: 		Reply with quote
No probs.
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Mon Jan 25, 2010 11:56 am 
Post subject: 		Reply with quote
This works much better unless the colorbox image is really small. The image needs to be around 550px wide.

Code:
/*


    ColorBox Core Style


    The following rules are the styles that are consistant between all ColorBox themes


*/


<a href="hashtag-results-colorbox.html">#colorbox</a>, <a href="hashtag-results-cboxOverlay.html">#cboxOverlay</a>, <a href="hashtag-results-cboxWrapper.html">#cboxWrapper</a>{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}


<a href="hashtag-results-cboxOverlay.html">#cboxOverlay</a>{position:fixed; width:100%; height:100%;}


<a href="hashtag-results-cboxMiddleLeft.html">#cboxMiddleLeft</a>, <a href="hashtag-results-cboxBottomLeft.html">#cboxBottomLeft</a>{clear:left;}


<a href="hashtag-results-cboxContent.html">#cboxContent</a>{position:relative; overflow:visible;}


<a href="hashtag-results-cboxLoadedContent.html">#cboxLoadedContent</a>{overflow:auto;}


<a href="hashtag-results-cboxLoadedContent.html">#cboxLoadedContent</a> iframe{display:block; width:100%; height:100%; border:0;}


<a href="hashtag-results-cboxTitle.html">#cboxTitle</a>{margin:0px;}


<a href="hashtag-results-cboxLoadingOverlay.html">#cboxLoadingOverlay</a>, <a href="hashtag-results-cboxLoadingGraphic.html">#cboxLoadingGraphic</a>{position:absolute; top:0; left:0; width:100%;}


<a href="hashtag-results-cboxPrevious.html">#cboxPrevious</a>, <a href="hashtag-results-cboxNext.html">#cboxNext</a>, <a href="hashtag-results-cboxClose.html">#cboxClose</a>, <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>{cursor:pointer;}





/* 


   ColorBox example user style


   The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, 


   in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com


*/


<a href="hashtag-results-cboxOverlay.html">#cboxOverlay</a>{background:#000;}





<a href="hashtag-results-colorbox.html">#colorbox</a>{}


   <a href="hashtag-results-cboxTopLeft.html">#cboxTopLeft</a>{width:14px; height:14px; background:url(images/controls.png) 0 0 no-repeat;}


   <a href="hashtag-results-cboxTopCenter.html">#cboxTopCenter</a>{height:14px; background:url(images/border.png) top left repeat-x;}


   <a href="hashtag-results-cboxTopRight.html">#cboxTopRight</a>{width:14px; height:14px; background:url(images/controls.png) -36px 0 no-repeat;}


   <a href="hashtag-results-cboxBottomLeft.html">#cboxBottomLeft</a>{width:14px; height:43px; background:url(images/controls.png) 0 -32px no-repeat;}


   <a href="hashtag-results-cboxBottomCenter.html">#cboxBottomCenter</a>{height:43px; background:url(images/border.png) bottom left repeat-x;}


   <a href="hashtag-results-cboxBottomRight.html">#cboxBottomRight</a>{width:14px; height:43px; background:url(images/controls.png) -36px -32px no-repeat;}


   <a href="hashtag-results-cboxMiddleLeft.html">#cboxMiddleLeft</a>{width:14px; background:url(images/controls.png) -175px 0 repeat-y;}


   <a href="hashtag-results-cboxMiddleRight.html">#cboxMiddleRight</a>{width:14px; background:url(images/controls.png) -211px 0 repeat-y;}


   <a href="hashtag-results-cboxContent.html">#cboxContent</a>{background:#fff;}


      <a href="hashtag-results-cboxLoadedContent.html">#cboxLoadedContent</a>{margin-bottom:5px;}


      <a href="hashtag-results-cboxLoadingOverlay.html">#cboxLoadingOverlay</a>{background:url(images/loading_background.png) center center no-repeat;}


                <a href="hashtag-results-cboxLoadingGraphic.html">#cboxLoadingGraphic</a>{background:url(images/loading.gif) center center no-repeat;}


                <a href="hashtag-results-cboxTitle.html">#cboxTitle</a>{position:absolute; bottom:-28px; left:33px; text-align:center; font-weight:bold; padding-left:59px; padding-right:59px; color:#7C7C7C;}


                <a href="hashtag-results-cboxCurrent.html">#cboxCurrent</a>{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}


                


                <a href="hashtag-results-cboxPrevious.html">#cboxPrevious</a>, <a href="hashtag-results-cboxNext.html">#cboxNext</a>, <a href="hashtag-results-cboxClose.html">#cboxClose</a>, <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>{position:absolute; bottom:-29px; background:url(images/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;}


                <a href="hashtag-results-cboxPrevious.html">#cboxPrevious</a>{left:0px; background-position: -51px -25px;}


                <a href="hashtag-results-cboxPrevious.html">#cboxPrevious</a>.hover{background-position:-51px 0px;}


                <a href="hashtag-results-cboxNext.html">#cboxNext</a>{left:27px; background-position:-75px -25px;}


                <a href="hashtag-results-cboxNext.html">#cboxNext</a>.hover{background-position:-75px 0px;}


      <a href="hashtag-results-cboxClose.html">#cboxClose</a>{right:0; background-position:-100px -25px;}


      <a href="hashtag-results-cboxClose.html">#cboxClose</a>.hover{background-position:-100px 0px;}





                .cboxSlideshow_on <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>{background-position:-125px 0px; right:27px;}


                .cboxSlideshow_on <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>.hover{background-position:-150px 0px;}


                .cboxSlideshow_off <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>{background-position:-150px -25px; right:27px;}


                .cboxSlideshow_off <a href="hashtag-results-cboxSlideshow.html">#cboxSlideshow</a>.hover{background-position:-125px 0px;}

_________________
Tricked Out News
  
Back to top
View user's profile Send private message
jakec
Regular
Regular


Joined: Oct 04, 2009
Posts: 12

Reputation: 400Reputation: 400
PostPosted: Tue Jan 26, 2010 4:33 pm 
Post subject: 		Reply with quote
Thanks for all the help Bobby.

Just in case someone else has the same, or similar question with help from Bobby we altered the following line:

Code:
#cboxTitle{position:absolute; bottom:-28px; left:120px; right:59px; text-align:center; font-weight:bold; padding-left:20px; padding-right:20px; color:#7C7C7C;}
  
Back to top
View user's profile Send private message
Display posts from previous:       
Post new topic   Reply to topic   print    Tricked Out News Forum Index -> Colorbox addon All times are GMT - 5 Hours
 
 Page 1 of 1

 
Jump to:   
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum

Powered by phpBB © 2001-2008 phpBB Group
Forums ©
[ Legal Notice | Privacy Policy | Terms of Use | Comments ]

Theme by Nuken
Page Generation: 0.25 Seconds