IFrame Title Font Size

Ignition
,
1

Is there a way to change the font on an IFrame title at the top of the display?

2

Can you show an example of what you're trying to do? Also, your title says Font Size and the body of the post says Font (not to be pedantic but knowing which one would be helpful).

3

I meant font size yes regardless of the actual font. I am using a popup to display an Axiom historian. In the popup the title is what I need to change. Silo 4 in this example.

image
image829×604 7.13 KB

4

I think you can do this using the below CSS that you would add to the Advanced stylesheet or if you're on a version that doesn't have it, to the theme files:

#popup-myPopup .ia_popup__header {
	font-size: 24px;
	height: 50px;
}

Replace myPopup above with your popup ID (what you enter as the first parameter in the system.perspective.openPopup function).

5

This is what I am using as an event. Not sure I have that option here using perspective.

image
image1134×871 86 KB

6

You would use RawQP1QC as the identifier in the CSS I posted above, so like so:

#popup-RawQP1QC .ia_popup__header {
	font-size: 24px;
	height: 50px;
}

You don't need to necessarily call it with a function, I was just trying to demonstrate where the popup ID comes from.

What version of Ignition are you on? Anything 8.1.22+ will have the Advanced Stylesheet feature, so you should just be able to drop that CSS in there. If you don't see it, right click on Style in the Project Browser and click Enable Advanced stylesheet.

7

.33

8

Not seeing any change and I tried several values of font size and height. This is what I put in once I found the Advanced sheet. I tried it with the space after the popup ID first the way you had it.
image

9

It looks like you're missing the leading # - that's important as it denotes an ID. Also, the space between RawQP1QC and .ia_popup__header is important.

#popup-RawQP1QC .ia_popup__header {
	font-size: 24px;
	height: 50px;
}
10

Sorry I thought the # was just commenting it out on your end so I removed it. It is working now thanks.

11

I'm glad it's working! Can you mark the thread as solved so that it shows up in the correct state on the Forum homepage? That helps me and others decide which posts to click on

12

Yes and one last question. I am guessing that if I have other popups I would just add this code to a new line with the other popup ids.

1 Like
13

Yes, you can also use some CSS to style all popups with the same font size, but I assumed that you didn't want that. I think you can just remove #popup-RawQP1QC and it will most likely work:

.ia_popup__header {
	font-size: 24px;
	height: 50px;
}
14

I tried that and only the font size would change. Height went back to default.

15

That's interesting... the height stays the same for me.

Try this to update the font size and height for all popups:

.ia_popup__header {
	font-size: 24px;
}

.client-root .popup .popup-header {
    height: 50px;
}
1 Like
16

That worked, thanks.

1 Like