Lightbox Ultimate – Anchor text forces line break

[bobk]

I started with the first step – I deleted the ‘display: inline;’ attribute, per your suggestion.

Then I reloaded the page.

The result: There was ANOTHER line break – this one was after the word ‘format’.

In other words, now there were three lines of stuff below the topmost mp3 player:

1. The text ‘$1.00 Choose format’ on the first line.

2. The text ‘(?)’ on the second line.

3. The colon ( : ), the variation drop-down menu and the ‘add to cart’ button on the third line.

So… the ‘display: inline’ attribute was still working – it was preventing a line break BEFORE the Lightbox Ultimate text link.

The line break in question – AFTER the Lightbox Ultimate text link (i.e., between the text link and the colon) is a new, separate issue.

Now the question is ‘what’s causing this new line break?’ Since the colon is automatically inserted by Lightbox Ultimate, I’m still wondering if there’s something in the plugin that could be causing this.

I restored the ‘display: inline’ attribute, so now it’s back to just one unwanted line break.

Thoughts?

[wpCommerce]

Hi, the colon is not actually coming from Lightbox Ultimate. Lightbox Ultimate only creates a lightbox link for the anchor text or image you provide via shortcode. So when you specify “display: inline” attribute Lightbox Ultimate can only make sure that the content (anchor text or image) passed through the shortcode is wrapped with that CSS property. It cannot control anything before of after the shortcode content.

If you check the page source (right click on your mouse and select “view source”) you will see that the “:” is wrapped with another empty div in which there is a form class called “eStore-button-form”.

[bobk]

Thanks for the clarification.

I get that Lightbox Ultimate is not causing the line break, but can you please help me understand what IS causing it?

The colon is in a ‘span’ element within the eStore-button-form:

<span class=”eStore_variation_name” > : </span>

The eStore-button-form already has a ‘display: inline’ attribute.

I don’t know how to proceed from here. Is there something I can do to get rid of that break?

[bobk]

I’ll post this in the eStore forum, since it appears to involve that plugin…

[bobk]

I’m having another line break problem.

This time it’s on this page: http://bobkarty.pairsite.com/press/

See the text link ‘Critic’s Pick’ a little more than half way down the page.

Lightbox Ultimate seems to be causing the following problems:

1. The line break between ‘Gilbert,’ and the link.

2. For the text link ‘Critic’s Pick’ and the text that follows, the font size is reduced from 14px to 13px and the font color is changed to black.

Also: does the plugin prohibit styling of the link text via the WP editor? I’d like to make the text link bold.

WordPress: 3.4.2

Lightbox Ultimate: 1.8.8

[wpCommerce]

Hi, A div always starts and ends with a new line. When you apply the “display: inline” property on a div it makes sure that the next element doesn’t go to a new line. However the starting newline will still be there.

Since you are starting a new paragraph with Andrew Gilbert, you can easily solve this issue by making this piece of text inline. For example:

<div style="display: inline;">Andrew Gilbert,</div> Lightbox Ultimate shortcode...

If you want to style the anchor text you need to use CSS (you can define your own CSS in the wp_lightbox_ultimate_custom.css file). Suppose, you have created a CSS class

.my_bold_text

{

font-weight: bold;

}

Now copy the name of the class and specify it in the shortcode parameter. For example:

[wp_lightbox_prettyPhoto_anchor_text_image link="http://www.example.com/overlay-image.jpg" text="Critic's Pick" description="Image description goes here" class="my_bold_text"]

You can learn more about shortcode anchor styling here:

https://support.tipsandtricks-hq.com/forums/topic/how-do-you-align-shortcode-embed-images-horizontally

[bobk]

I get the part about creating a custom class for the anchor text – thanks.

I figured out a solution to remove the line breaks, but it’s different from the code you posted.

I removed the paragraph tags and tried the div as you described, but that didn’t change anything.

Instead of closing the div at the end of ‘Andrew Gilbert’, I closed it at the very end of the text following ‘critic’s pick’. That removed the line breaks.

Is there anything incorrect about what I did? It seems to have worked…

What I’m confused about is that you said that divs always start and end on a new line. If I understand correctly, the LU shortcode creates a div for the text link (right?), and that’s now enclosed in the other div I created. So why did the line break go away?

[wpCommerce]

You’re right. Each lightbox ultimate shortcode is enclosed with a div. That means the anchor text/image you specify in the shortcode is also inside a div.

Well, the linebreak actually didn’t go away. Let me explain it to you.

This is what was happening before:

1. You created a new paragraph with “Andrew Gilbert,” and placed the shortcode text “critic’s pick” right after. By default the content is supposed to look like the following:

Previous content...



Andrew Gilbert,

<div>

critic's pick

</div>

....next content...

2. Since you forced the div containing “critic’s pick” to be inline the content looked like the following:

Andrew Gilbert,

<div>

critic's pick</div>....next content...

“Andrew Gilbert” was already on a separate section (paragraph) so It wouldn’t matter if there was a linebreak before. But we could make it so “critic’s pick” (the content right after) wouldn’t go to a new line. My suggestion was:

<div style="display: inline;">Andrew Gilbert,</div> Lightbox Ultimate shortcode...

And that should have worked.

This is what is happening now:

1. You created a new paragraph with “Andrew Gilbert,” and placed the shortcode text “critic’s pick” right after. By default the content is supposed to look like the following:

Previous content...



Andrew Gilbert,

<div>

critic's pick

</div>

....next content...

2. Since you have created a new inline div containing “Andrew Gilbert, critic’s pick” the content now looks like the following:

previous content..



<div>Andrew Gilbert, critic's pick</div>....next content...

There is nothing wrong with what you did.

[Hazard]

In response to this suggestion that was posted in the chain:

_________________________

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.

_________________________________________

What happens when the plugin gets updated? This manual change gets overwritten, correct? So one would have to manually go back and change it each time there is an update, correct? Is there a better, more permanent way to do this?

I am using TwentyTwelve, and I have a child theme. When I put the code above into my child theme as also suggested in this discussion, it did not solve the problem. The insertion of Link Text caused a line break.

Thanks!

Haz

[http://www.aquariumcarebasics.com/]

[wpCommerce]

@Hazard, there is a better way to apply CSS using our Custom CSS plugin:

http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

Can you please provide a link to the page in question so I can take a look?

[Hazard]

Yes, please check out this link. Its supposed to be one paragraph, with full justification. When I put the linktext shortcode in, the paragraph breaks.

[http://www.aquariumcarebasics.com/cherry-shrimp/]

Please let me know what you think.

Thanks!

Haz

[wpCommerce]

Hi, have you removed the shortcode? I couldn’t find it anywhere on that page.

[Hazard]

No its still there on this page: [http://www.aquariumcarebasics.com/cherry-shrimp/]

[Redacted By Moderator]

[wpCommerce]

Hi, actually there is nothing wrong with the following CSS:

.lightbox_ultimate_text_anchor {

display: inline;

}

WordPress automatically does some formatting before printing the content on the screen (example: adding <p></p> tag). So as soon as it comes across the first div block of the lightbox shortcode its closing the paragraph (</p>) causing a line break just before the anchor text.

There are options to make the wpautop function (which WordPress uses to format the content) work in a certain way but I don’t think we should modify it. And after some testing I found a simple trick that you might be able to apply to get around this issue:

1) Switch to the “text” editor

2) create an empty div and wrap the full post/page content inside it. For example:

<div>content goes here...</div>

3) Publish/Update it.

let me know if it works for you.

[Author]

Posts