How do I Align Anchor Text to my paragraph.

[jruden]

Hi,

I would like to align the anchor text to into my paragraph. Right now the “Watch the video” anchor text breaks out on a separate line. How can I align the text to keep it in line with my paragraph. See link below as an example.

I did find some CSS code (below) on the forum, but it did not work:

.lightbox_ultimate_text_anchor {

display: inline;

}

You can see the example here:

[http://184.154.228.2/~grassr03/our-programs/the-childsafe-school/]

Thanks,

Jordan

[wpCommerce]

Hi, you can do that easily using these instructions (Align the anchor image to the left section):

https://support.tipsandtricks-hq.com/forums/topic/lightbox-ultimate-how-to-add-css-styles-to-a-lightbox-anchor-text-or-image

[jruden]

Thanks for the quick reply.

I was able to align the text right, left or center, like an image. However I would like to try and keep the text in line or in the middle of a sentence in a paragraph. It seems to create space and padding around it.

Thanks,

Jordan

[wpCommerce]

In that case please do the following:

1) Switch to “text” editor and wrap your paragraph (containing lightbox shortcode) inside a div. For example:

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

2) Install our WP Custom CSS plugin: http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

3) Specify this CSS code in the settings menu of the plugin:

.lightbox_ultimate_text_anchor {

display: inline;

}

[hugoalberts]

Hi,

I have the same question. However, when I use the instructions you gave, the alignment problem is indeed fixed, but the layout of my page is completedly ruined. Anu idea how to fix this? Thanks,

Hugo

[wpCommerce]

@hugoalberts, Please provide a link to the page in question so I can take a look.

[hugoalberts]

Hi, probably did something wrong; it works now, thanks!

[johnny dollar]

Brand new to WP and this plug-in, and have been poking around looking for a solution to the inline/line-break problem. Implemented everything suggested here without success. Using the “wp lightbox anchor text display external page” I would still get line-breaks even with the custom CSS. Then looking at the resulting source code I found that even though it’s a code for inserting text, the div class applied read image anchor and that of course didn’t match the CSS. But by manually adding class=”lightbox_ultimate_text_anchor” to the code, that tied it up to the custom CSS snippet and I got everything on one line…as part of a bullet list no less. Took me a while but I finally got there.

Site: [http://johnnydollar.us/20150516/weekend-links-and-open-thread-24/] (the ‘Your Buzz’ line is all light boxed video links)

[wpCommerce]

@johnny, Alternatively you can specify one of the predefined classes in the shortcode (Under More Examples section):

https://support.tipsandtricks-hq.com/forums/topic/lightbox-ultimate-how-to-add-css-styles-to-a-lightbox-anchor-text-or-image

[johnny dollar]

Thanks for that additional info. Not quite sure I understand how to apply it to a text link just yet but I’m working on it.

I found that appending class=”lightbox_ultimate_text_anchor” to the shortcode doesn’t always work. Up to this point it’s doing fine with me because so much of what I post is in bullet lists, and apparently it works fine in bullet lists. But when it’s just plain text in a paragraph it wants to insert a break before the target text even with the custom CSS added as recommended above. I’m working on a future post and my workaround right now is making one line an unordered, unstyled list. Luckily the line stands alone so it’ll do, but what if a want several text targets in one of several paragraphs of text? I’m not there yet so I don’t have an example to produce but I’m just trying to bank that curve before I run into it. Thank you so much.

[wpCommerce]

Thanks for that additional info. Not quite sure I understand how to apply it to a text link just yet but I’m working on it.

– You just need to apply a class parameter to your anchor text shortcode.

I can help you apply CSS to the shortcode. Please reply to the email I sent you with your wp-admin credentials.

[johnny dollar]

Thanks for the quick and effective reply. Problem solved!

Have a good Memorial Day weekend too.

[mactelesis]

I purchased your plugin specifically to reliably open PDFs in a lightbox – and yours works wonderfully – except I cannot get a simple inline text link to format properly within a paragraph without line breaks and text formatting problems.

I have tried all of the above fixes and I can NOT get a simple text link WITHIN a paragraph to format correctly with same font size as surrounding text and without a line break BEFORE the text link.

I inserted the custom CSS code:

.lightbox_ultimate_anchor{

display: inline;

}

and that solved the line bread AFTER the link.

I have tried adding <div></div> around the paragraph with the popup link in it – but that didn’t do anything.

Please help – I can’t believe that this can be so UNintuitive – a simple text link to popup the lightbox – without screwing up the text formatting.

Here is the link: [http://www.osmpedia.com/founders-cv/] – see #2. 1972 – the link is “Dr. Joseph D. Park” – and you can see the line break before and the text format change to a smaller font after the line break

I can provide back-end access if you need it – and here is the code for that paragraph:

[removed paragraph after checking it]

Please help – TIA

[admin]

It is already inline now otherwise you would see a line break right after the link.

So now you are seeing the following:

Dr. Joseph D. Park who was a world-renowned

If it wasn’t inline then it would look like the following:

Dr. Joseph D. Park

who was a world-renowned

The line break at the start is coming from the fact that your previous line is almost full. It doesn’t have enough space to fit the full link “Dr. Joseph D. Park” in that line. The anchor can’t break the link in half. If you want it in the previous line then you can re-structure your sentence so that the previous line is shorter and it can fit the whole link in that line.

[mactelesis]

No, that’s not it – I removed sufficient words that the “whole link” should fit – see for yourself

[http://www.osmpedia.com/founders-cv/] – the issue is that when you look at the source code for that page that the popup is within <div></div> tags which triggers a line break BEFORE the first <div> tag – which isn’t solved with the CSS inline modification.

Also please notice that the formatting of the text in everything after the link is wrong – no longer 14pt.

[Author]

Posts