Lightbox Ultimate – Anchor text forces line break

[bobk]

Just purchased and installed Lightbox Ultimate.

When I use a text anchor (to an html page), it forces a line break. I tried modifying the width of

.lightbox_ultimate_text_anchor

using CSS, but that didn’t work. When I hover over the word format in Safari’s Web Inspector, it displays the dimensions I entered numerically, but the blue box showing the div is still as wide as it was before the change.

Here’s the page: http://bobkarty.pairsite.com/listen_and_buy/leader_solo_artist/

There are 3 audio players. The top one is the problematic one.

The bottom two show how I want it to look, with no line break – i.e., the price, the words ‘choose format’, the drop-down menu, and the ‘add to cart’ button are all on the same line.

Thanks!

Bob

[bobk]

Resolved!

Added the following CSS to my child theme:

.lightbox_ultimate_text_anchor {

display: inline;

}

[wpCommerce]

Hi, we don’t have any CSS defined in the plugin to force line break for the anchor text. It depends on how your theme want the text to look like.

Anyway, I’m glad that the issue has been resolved.

[bobk]

A web developer friend provided the solution; if I recall correctly, he said the plugin contains the anchor text in a div, which by default is displayed as a block element, and that caused the line break.

[wpCommerce]

Hi, Sorry for the mistake. I get it now. Yes, the anchor text is inside an empty div. This is so you can customize it on your own.

[njkalm]

Hi, I’m having the same problem too. I think I understand the problem in principle, but I’m not sure what the solution is. I tried adding the “display: inline” code to my theme’s CSS, but it doesn’t resolve the problem. It appears that there is a <p></p> set of tags preceding the text anchor code that is causing the line break that I can’t figure out how to get rid of.

Any ideas?

[wpCommerce]

Hi, You don’t need to modify the theme’s CSS. Just open the wp_lightbox_ultimate_custom.css file (It’s in the root directory of the plugin) and add the following CSS:

.lightbox_ultimate_text_anchor {

display: inline;

}

The template for the CSS class is already there. All you need to do is specify the attribute for it (display: inline;).

Let me know how it goes.

[njkalm]

Thanks so much for the reply. It’s the darndest thing; I tried the suggestion but the <p> tags remain and there is still a line break. I’ve uploaded a picture here: http://s16.postimage.org/o7ha20okl/Screen_Shot_2012_05_01_at_2_20_33_PM.png

Any idea what is causing those <p> tags?

[wpCommerce]

Hi, could you post a link to the page where you are using the shortcode?

[njkalm]

Sure, the actual page is behind a member wall, but here’s a test page I set up: http://www.bulletproofmusician.com/test-4/

Thanks for looking into it!

[wpCommerce]

Hi, the anchor text doesn’t have any <p> or <br> tag associated with it. If you revert the CSS back (display:inline) you will see that there is not additional gap between the anchor text and the following line:

), but either way it’s always nice to get started off on the right foot.

So I think it has something to do with the line before (It’s a little like opening a box from IKEA. It might seem obvious what to do) or after (Speaking of which, if you run into something that confuses you, or need a bit of advice or) the anchor text. They both seem to have a <p> tag. I don’t know if your theme has any CSS defined that <p> tag will keep that much gap with other elements.

/*Update*/

I think I just found something. If you use firebug you will see that the following CSS attribute is causing this big gap:

.format_text p {

margin-bottom: 1.467em;

}

I believe It’s coming from gzip.php?css=....... As soon as I turned that off all the elements look normal.

[njkalm]

Indeed, removing that bit of CSS does fix the problem, but unfortunately causes a bigger problem, in that I’d have to go back through every page and post and manually add paragraph breaks for every paragraph.

But in playing around with your suggestion, I think I may have found a solution/workaround.

If I surround that paragraph and the following paragraph with a set of <div> tags, the problem is solved. I’m not sure if I understand why that works, but hey, it works. Yay!

Thanks again for all your help!

[wpCommerce]

You’re welcome

[bobk]

UPDATE:

When I updated WP eStore and Lightbox ultimate a few months ago, the unwanted line break reported in my initial post came back.

The CSS I added (as described on the previous page of this thread) resulted in the variation menu and ‘add to cart’ button being on the same line as the text ‘$1.00’ and ‘choose format’.

http://bobkarty.pairsite.com/listen_and_buy/leader_solo_artist/

The ‘display inline’ css is still present in the custom CSS of the child theme I’m using (‘Dynamik’, by Catalyst Theme), and I also tried adding it directly to the wp_lightbox_ultimate_custom.css file. That didn’t help.

How can I fix this?

Thanks in advance!

WordPress version: 3.4.2

WP eStore version: 6.9.4

Lightbox Ultimate version: 1.8.4

As best I can recall, I had not made any modifications to my site (i.e, the WordPress theme or the audio player plugin) when this issue returned.

[wpCommerce]

Hi, We haven’t made any changes to Lightbox Ultimate plugin that will affect this. However, you can try another method for removing the line break.

Step 1: Keep the CSS class lightbox_ultimate_text_anchor empty (remove all the css attributes inside it).

Step 2: Create your own CSS class and put it in the wp_lightbox_ultimate_custom.css file. For example:

.my_test_class{

display: inline;

}

Step 3: Pass the CSS class name through the lightbox ultimate shortcode. For example:

[wp_lightbox_anchor_text_display_external_page link="http://bobkarty.pairsite.com/audio-format-basics/" width="740" height="740" title="Audio Format Basics" text="(?)" class="my_test_class"]

Now you don’t have to globally set it for all the anchor text shortcodes. You can customize each shortcode (including the anchor image one) with your own way.

Let me know if it works for you.

[Author]

Posts