How to place a text box in front of an image
-
- Propeller Head
- Posts: 68
- Joined: Mon Jun 25, 2007 5:41 am
- Location: Oslo, up north
- Contact:
How to place a text box in front of an image
Hi. I want to float a gray, semi-transparent text box with white text in front of an image, as in the attached file. Any suggestions on what I need to do to achieve this will be gratefully received.
Thanks.
Thanks.
You do not have the required permissions to view the files attached to this post.
Nigel
Confirmit, Oslo
Confirmit, Oslo
-
- Sr. Propeller Head
- Posts: 373
- Joined: Tue Apr 23, 2013 3:19 am
- Location: The Netherlands, Amsterdam Area
Re: How to place a text box in front of an image
Hi Nigel,
is this something you want to achieve in a page layout or in a topic?
regards,
Lydia.
is this something you want to achieve in a page layout or in a topic?
regards,
Lydia.
Using Flare 10.2 and Flare 11 on Win 7
-
- Propeller Head
- Posts: 68
- Joined: Mon Jun 25, 2007 5:41 am
- Location: Oslo, up north
- Contact:
Re: How to place a text box in front of an image
Hi Lydia,
I'm trying to do this in a topic. The marketing team have given me a "standard" jpg image to use for all my projects, and I need to insert the specific document title, ideally using variables so I can link the page into the various projects.
I'm trying to do this in a topic. The marketing team have given me a "standard" jpg image to use for all my projects, and I need to insert the specific document title, ideally using variables so I can link the page into the various projects.
Nigel
Confirmit, Oslo
Confirmit, Oslo
-
- Sr. Propeller Head
- Posts: 373
- Joined: Tue Apr 23, 2013 3:19 am
- Location: The Netherlands, Amsterdam Area
Re: How to place a text box in front of an image
Hi Nigel,
I would use two divs. One with the image as background. And another one inside it with the text overlay.
Regarding the positioning and setting transparency, you can check out this post:
http://forums.madcapsoftware.com/viewto ... ity#p85545
which points you to the info on http://www.w3schools.com/css/css_image_transparency.asp.
I hope this will help to get you started.
Regards, Lydia.
I would use two divs. One with the image as background. And another one inside it with the text overlay.
Regarding the positioning and setting transparency, you can check out this post:
http://forums.madcapsoftware.com/viewto ... ity#p85545
which points you to the info on http://www.w3schools.com/css/css_image_transparency.asp.
I hope this will help to get you started.
Regards, Lydia.
Using Flare 10.2 and Flare 11 on Win 7
-
- Propeller Head
- Posts: 68
- Joined: Mon Jun 25, 2007 5:41 am
- Location: Oslo, up north
- Contact:
Re: How to place a text box in front of an image
Hi Lydia
I've created two div classes; one for the image and one for the text box, and I now have the image on the page and the text in front of it. So far so good! But the text box is firmly fixed into the upper-left corner of the image and none of the style properties I change will move it down the page. Any suggestions? Also, where do I put the "opacity" code?
I've created two div classes; one for the image and one for the text box, and I now have the image on the page and the text in front of it. So far so good! But the text box is firmly fixed into the upper-left corner of the image and none of the style properties I change will move it down the page. Any suggestions? Also, where do I put the "opacity" code?
Nigel
Confirmit, Oslo
Confirmit, Oslo
-
- Senior Propellus Maximus
- Posts: 3669
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: How to place a text box in front of an image
Why not do this using Capture? You can easily put a text box with no border and a transparent background anywhere over the photo, and you can use a variable from the project.
Nita
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Re: How to place a text box in front of an image
There's probably two approaches to this.NigelBennett wrote:Hi Lydia
I've created two div classes; one for the image and one for the text box, and I now have the image on the page and the text in front of it. So far so good! But the text box is firmly fixed into the upper-left corner of the image and none of the style properties I change will move it down the page. Any suggestions? Also, where do I put the "opacity" code?
a) If you need this to work in older browsers, set the opacity on the box you want to make semi-transparent.
But I'll give you a tip, if you put text inside that box, the text will also be semi-transparent - which you probably don't want.
So you'd keep the text outside of the box, and set its position property to move it over the box.
There's an example here: http://css-tricks.com/non-transparent-e ... -elements/
b) If you don't need to support older browser versions (IE8 and below), put the text inside the box and set the box to have a transparent background colour by setting it as a rgba colour. You don't need to set the opacity using this method, as the transparency only applies to the box's background colour and not its content.
-
- Propeller Head
- Posts: 68
- Joined: Mon Jun 25, 2007 5:41 am
- Location: Oslo, up north
- Contact:
Re: How to place a text box in front of an image
Hi David
Thanks for the tips, but I need to know HOW to set the opacity of the box. I can't find any properties in the stylesheet to do that. And also, as I mentioned, the box is firmly glued into the upper-left corner of the image - it doesn't want to leave. How do I set the position of the box relative to the image?
Thanks for the tips, but I need to know HOW to set the opacity of the box. I can't find any properties in the stylesheet to do that. And also, as I mentioned, the box is firmly glued into the upper-left corner of the image - it doesn't want to leave. How do I set the position of the box relative to the image?
Nigel
Confirmit, Oslo
Confirmit, Oslo
-
- Senior Propellus Maximus
- Posts: 3669
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: How to place a text box in front of an image
Nigel, did you try my suggestion about using Capture? I think you'll find that it's very easy and it will solve your design issue.
Nita
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Re: How to place a text box in front of an image
Edit the stylesheet in text mode, and add the opacity property.NigelBennett wrote:Hi David
Thanks for the tips, but I need to know HOW to set the opacity of the box. I can't find any properties in the stylesheet to do that. And also, as I mentioned, the box is firmly glued into the upper-left corner of the image - it doesn't want to leave. How do I set the position of the box relative to the image?
Not every property is listed in Flare's simplified and advanced views, but it doesn't mean you can't use it.
To set object positions, I included some links above about the position property.
-
- Propeller Head
- Posts: 68
- Joined: Mon Jun 25, 2007 5:41 am
- Location: Oslo, up north
- Contact:
Re: How to place a text box in front of an image
Hi Nita
Sorry, got a bit busy. Thanks for the tip, but we don't have Capture at the moment and the product release is this coming weekend. Things are therefore starting to get a bit hectic and I don't have time to get new stuff installed and running right now. I'll try to get the div thing working, otherwise I'll resort to creating separate jpgs for each manual and come back to this when things calm down a bit.
Sorry, got a bit busy. Thanks for the tip, but we don't have Capture at the moment and the product release is this coming weekend. Things are therefore starting to get a bit hectic and I don't have time to get new stuff installed and running right now. I'll try to get the div thing working, otherwise I'll resort to creating separate jpgs for each manual and come back to this when things calm down a bit.
Nigel
Confirmit, Oslo
Confirmit, Oslo
-
- Propeller Head
- Posts: 68
- Joined: Mon Jun 25, 2007 5:41 am
- Location: Oslo, up north
- Contact:
Re: How to place a text box in front of an image
And my thanks to you David as well. I'll try this and see what happens. Otherwise, as I said to Nita, I'll resort to jpgs and re-visit this later when I have a bit more time to investigate.
Nigel
Confirmit, Oslo
Confirmit, Oslo
-
- Propeller Head
- Posts: 68
- Joined: Mon Jun 25, 2007 5:41 am
- Location: Oslo, up north
- Contact:
Re: How to place a text box in front of an image
Thanks Eldo, I'll try these examples an see if I can get them to work.
Nigel
Confirmit, Oslo
Confirmit, Oslo
-
- Propellus Maximus
- Posts: 1260
- Joined: Wed Aug 21, 2013 11:46 am
- Location: Vancouver, Canada
Re: How to place a text box in front of an image
Hello Nita (et al)Nita Beck wrote:Nigel, did you try my suggestion about using Capture? I think you'll find that it's very easy and it will solve your design issue.
I found this thread because I was looking for a way to graphically annotate some text (a programming script). In other words, I want to overlay graphics on the programming script. Correct me if I have mistaken but if I were to use MadCap Capture, I would have to turn the text into an image? If so, that would be unacceptable because of the loss of fidelity and the inability to search the script.
Thus far, I am been unable to position my image annotations over the text. What on each am I doing wrong? This is a very basic task, it shouldn't be this difficult.
Shawn in Vancouver, Canada
Main tools used: Flare 11.x, InDesign, Google Docs, Lectora, Captivate.
Report bugs: https://www.madcapsoftware.com/feedback/bugs.aspx ▪ Feature requests: https://www.madcapsoftware.com/feedback ... quest.aspx[/i]
Main tools used: Flare 11.x, InDesign, Google Docs, Lectora, Captivate.
Report bugs: https://www.madcapsoftware.com/feedback/bugs.aspx ▪ Feature requests: https://www.madcapsoftware.com/feedback ... quest.aspx[/i]
-
- Propeller Head
- Posts: 42
- Joined: Tue Jan 21, 2014 11:55 am
Re: How to place a text box in front of an image
I am trying to get the opacity to work in PDF output. Anybody have experience with this working or not working?
I have a decoration frame in my page layouts that contains a variable wrapped in a div.watermark. The idea being that if a PDF needs a watermark, someone could simply type the text into the variable in the target; if no watermark is needed, they simply leave the variable blank.
This works okay if I send that frame to the back, but it hides behind images in that case, and I think that a stamp on top with, say, a 20% opacity would look better overall.
I have a decoration frame in my page layouts that contains a variable wrapped in a div.watermark. The idea being that if a PDF needs a watermark, someone could simply type the text into the variable in the target; if no watermark is needed, they simply leave the variable blank.
This works okay if I send that frame to the back, but it hides behind images in that case, and I think that a stamp on top with, say, a 20% opacity would look better overall.
Dan Lemke of Thomson Reuters
-
- Propellus Maximus
- Posts: 1260
- Joined: Wed Aug 21, 2013 11:46 am
- Location: Vancouver, Canada
Re: How to place a text box in front of an image
Join the disgruntled party. Although I am trying to ease off on my complaints... this inability remains one of my most frustrating Flare inabilities.ThomsonReuters_Dan wrote:I am trying to get the opacity to work in PDF output. Anybody have experience with this working or not working?
I have a decoration frame in my page layouts that contains a variable wrapped in a div.watermark. The idea being that if a PDF needs a watermark, someone could simply type the text into the variable in the target; if no watermark is needed, they simply leave the variable blank.
This works okay if I send that frame to the back, but it hides behind images in that case, and I think that a stamp on top with, say, a 20% opacity would look better overall.
Basically, Flare's support for images (bitmap and vector) is very poor. Unless you are willing to invest a lot of time playing with stylesheets, you are going to struggle with (and likely fail) when attempting transparent overlays (over text or other images), vector and fixed size text bubbles, image maps for PDF documents, and other such graphical content that would be a breeze in FM.
It is very frustrating but I am hopeful that with enough complaining, we will see improvements.
Two examples of image overlays that are not possible in Flare: Example of MadCap Caption rendering problem when publishing to Word: http://forums.madcapsoftware.com/viewto ... 13&t=20033
You do not have the required permissions to view the files attached to this post.
Shawn in Vancouver, Canada
Main tools used: Flare 11.x, InDesign, Google Docs, Lectora, Captivate.
Report bugs: https://www.madcapsoftware.com/feedback/bugs.aspx ▪ Feature requests: https://www.madcapsoftware.com/feedback ... quest.aspx[/i]
Main tools used: Flare 11.x, InDesign, Google Docs, Lectora, Captivate.
Report bugs: https://www.madcapsoftware.com/feedback/bugs.aspx ▪ Feature requests: https://www.madcapsoftware.com/feedback ... quest.aspx[/i]