Title: [Plugin: Meteor Slides] Overlapping caption
Last modified: August 20, 2016
---
# [Plugin: Meteor Slides] Overlapping caption
* Resolved [rsetonaknik](https://wordpress.org/support/users/rsetonaknik/)
* (@rsetonaknik)
* [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-meteor-slides-overlapping-caption/)
* Hi Josh,
* 1. Failed to split captions — Please have a look at [pernakpernik.onlinelibrary.web.id](http://pernakpernik.onlinelibrary.web.id/).
Captions in header are overlapped. Captions (title & description) are taken from
image data.
* I put scripts carefully into their corresponding .css and .php files as suggested
in the forum, reread and redo again, using main theme and child theme, with no
success.
* 2. You also proposed better get the ‘Slide’ title and its description for caption.
Is script universal, where to put? If need to modify which part?
* 3. How do you align more than 1 slideshows side by side next to each other?
* 4. Create tranparent background for text/caption — How do you create this .png
file? (degree of transparency, dimension, etc.)
* 5. Library of short code metadata for Meteor Slides — is there a list of metadata
available?
* Sorry for bothering you raising so many questions, Josh. Thank you.
* [http://wordpress.org/extend/plugins/meteor-slides/](http://wordpress.org/extend/plugins/meteor-slides/)
Viewing 7 replies - 1 through 7 (of 7 total)
* Plugin Author [Josh Leuze](https://wordpress.org/support/users/jleuze/)
* (@jleuze)
* [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-meteor-slides-overlapping-caption/#post-3045862)
* **1.** you need to set a line height for the captions:
* ```
.meteor-slides p {
line-height: 20px;
}
```
* **2.** You can use the slide image metadata, but it is harder to update. I like
to use the slide title as the caption. Or if you need a title and except, add
support for excepts to Meteor Slides by adding this to your theme’s functions.
php file:
* ```
// Add excerpts to Meteor Slides
add_post_type_support('slide', 'excerpt');
```
* Then you just need to output the title and excerpt in your [custom slideshow template](http://www.jleuze.com/plugins/meteor-slides/customizing-the-slideshow-template/)
like this:
* ```
```
* And style it, maybe like this:
* ```
.meteor-caption {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: #000;
line-height: 20px;
margin: 0;
padding: 5px;
position: absolute;
text-align: center;
width: 100%;
}
```
* **3.** You need to float the slideshows to the left:
* ```
div.meteor-slides {
float: left;
}
```
* **4.** You can make it however you want, whatever works best with your slides
and design. I created a 1×1 pixel image in Photoshop that was black, with a 50%
opacity, and repeated that for the background.
* **5.** You can [use metadata](http://www.jleuze.com/plugins/meteor-slides/using-metadata/)
to change any of the [jQuery Cycle options](http://jquery.malsup.com/cycle/options.html).
* Thread Starter [rsetonaknik](https://wordpress.org/support/users/rsetonaknik/)
* (@rsetonaknik)
* [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-meteor-slides-overlapping-caption/#post-3045896)
* Hi Josh,
* I followed your advice step-by-step and had a very great great learning experience.
Your answers encouraged me to think and explore further. Here are the results,
not sure whether it is rightly done.
* Advice #1 and #2.1 are not used, has no significant effect.
* Advice #2.2 and #2.3 (and code put in the header.php, of course) are keys to
show the captions (title, excerpt) up. Make a copy of #2.3 for excerpt and add
an extra ‘p’ as prefix like this, ‘.meteor-caption p{‘.
* It worked well except the ‘Continue reading’ (link) in excerpt also shows up.
Disable this code (line 364-370) in functions.php solves the problem.
* Advice #3 and #5 pending; advice #4 since I don’t know Photoshop I replace the
background with this simple code:
* ```
background: rgba(0,0,0,0.5);
```
* Doing all these I am happy the goal has been sucessfully accomplished, [pernakpernik.onlinelibrary.web.id](http://pernakpernik.onlinelibrary.web.id)
* I documented the experiment and share it with my readers. I am sure there must
be mistakes. Please do me a favor which part did I do wrong by ignoring the codes
proposed and adding my own (intuitive) codes, and possibly the negative effects
they may caused.
* Thank you again ‘guru’ Josh.
5★ for Meteor Slide, 5★ for documentation, 5★ for
1-on-1 excellent support, 5★ for you, and 5★ for me (may I? for getting smarter).
* Plugin Author [Josh Leuze](https://wordpress.org/support/users/jleuze/)
* (@jleuze)
* [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-meteor-slides-overlapping-caption/#post-3045918)
* Ha, thanks, I’m glad you learned something!
* It can be tricky working with excerpts if your theme is customizing them, but
removing those filters like you did works. You can also wrap those excerpt customizations
in a conditional that checks the post type being used and doesn’t load if it
is the slide post type.
* Setting semi-transparent background with CSS totally works, I’m just doing it
old school to support more browsers, but you could always fall back on an opaque
background color to keep it fully CSS.
* Thread Starter [rsetonaknik](https://wordpress.org/support/users/rsetonaknik/)
* (@rsetonaknik)
* [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-meteor-slides-overlapping-caption/#post-3045928)
* Hi Josh,
* What code for the conditional check? Seems I have to put the code in the header.
php only, not in meteor-slide.php or meteor-slideshow.php… (hope you enjoy the
coffee sent last week, why not take a break and have the real Java coffee in
my country?)
* Plugin Author [Josh Leuze](https://wordpress.org/support/users/jleuze/)
* (@jleuze)
* [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-meteor-slides-overlapping-caption/#post-3045930)
* An extended coffee break sounds like a great idea!
* The [conditional check](http://codex.wordpress.org/Conditional_Tags#A_Post_Type)
would go in your functions.php file or where ever the excerpt filter is.
* Here’s a simple example that adds a read more link to only blog post excerpts:
* ```
function new_excerpt_more($more) {
global $post;
if ( 'post' == get_post_type() ) {
return ' Read the Rest...';
}
}
add_filter('excerpt_more', 'new_excerpt_more');
```
* Thread Starter [rsetonaknik](https://wordpress.org/support/users/rsetonaknik/)
* (@rsetonaknik)
* [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-meteor-slides-overlapping-caption/#post-3045933)
* Thank you Josh,
* Give me a try and will let you know soon whether I pass the exam…
* Plugin Author [Josh Leuze](https://wordpress.org/support/users/jleuze/)
* (@jleuze)
* [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-meteor-slides-overlapping-caption/#post-3045949)
* No problem, I hope it helped!
Viewing 7 replies - 1 through 7 (of 7 total)
The topic ‘[Plugin: Meteor Slides] Overlapping caption’ is closed to new replies.
* 
* [Meteor Slides](https://wordpress.org/plugins/meteor-slides/)
* [Frequently Asked Questions](https://wordpress.org/plugins/meteor-slides/#faq)
* [Support Threads](https://wordpress.org/support/plugin/meteor-slides/)
* [Active Topics](https://wordpress.org/support/plugin/meteor-slides/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/meteor-slides/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/meteor-slides/reviews/)
## Tags
* [background](https://wordpress.org/support/topic-tag/background/)
* [caption](https://wordpress.org/support/topic-tag/caption/)
* [excerpt](https://wordpress.org/support/topic-tag/excerpt/)
* [metadata](https://wordpress.org/support/topic-tag/metadata/)
* [overlap](https://wordpress.org/support/topic-tag/overlap/)
* [title](https://wordpress.org/support/topic-tag/title/)
* [Transparency](https://wordpress.org/support/topic-tag/transparency/)
* [transparent](https://wordpress.org/support/topic-tag/transparent/)
* 7 replies
* 2 participants
* Last reply from: [Josh Leuze](https://wordpress.org/support/users/jleuze/)
* Last activity: [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-meteor-slides-overlapping-caption/#post-3045949)
* Status: resolved