# IFrame Title Font Size

**URL:** <https://forum.inductiveautomation.com/t/iframe-title-font-size/84929>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [January 30, 2024, 12:45am UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929 "2024-01-30T00:45:37Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![CTrenkamp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ctrenkamp/32/38440_2.png) [@CTrenkamp](https://forum.inductiveautomation.com/u/CTrenkamp)\
**Post date:** [January 30, 2024, 12:45am UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/1 "2024-01-30T00:45:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [January 30, 2024, 1:56am UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/2 "2024-01-30T01:56:17Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![CTrenkamp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ctrenkamp/32/38440_2.png) [@CTrenkamp](https://forum.inductiveautomation.com/u/CTrenkamp)\
**Post date:** [January 30, 2024, 4:35pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/3 "2024-01-30T16:35:45Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/6/06d68e9d51646094d99332939a9ed55f55a51e8a.png)

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [January 30, 2024, 5:05pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/4 "2024-01-30T17:05:05Z")

</div>

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:

```css
#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).

---

<div class="post-metadata">

**Author:** ![CTrenkamp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ctrenkamp/32/38440_2.png) [@CTrenkamp](https://forum.inductiveautomation.com/u/CTrenkamp)\
**Post date:** [January 30, 2024, 6:07pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/5 "2024-01-30T18:07:53Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/1/41d6fce0fae345189b850e5cfad0bffc32f92529.png)

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [January 30, 2024, 6:22pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/6 "2024-01-30T18:22:31Z")

</div>

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

```css
#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`.

---

<div class="post-metadata">

**Author:** ![CTrenkamp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ctrenkamp/32/38440_2.png) [@CTrenkamp](https://forum.inductiveautomation.com/u/CTrenkamp)\
**Post date:** [January 30, 2024, 6:27pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/7 "2024-01-30T18:27:43Z")

</div>

.33

---

<div class="post-metadata">

**Author:** ![CTrenkamp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ctrenkamp/32/38440_2.png) [@CTrenkamp](https://forum.inductiveautomation.com/u/CTrenkamp)\
**Post date:** [January 30, 2024, 6:34pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/8 "2024-01-30T18:34:51Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/1/819d7e9d299d06f66930cb4706a64243b859c617.png)

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [January 30, 2024, 6:40pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/9 "2024-01-30T18:40:51Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![CTrenkamp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ctrenkamp/32/38440_2.png) [@CTrenkamp](https://forum.inductiveautomation.com/u/CTrenkamp)\
**Post date:** [January 30, 2024, 6:42pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/10 "2024-01-30T18:42:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [January 30, 2024, 6:46pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/11 "2024-01-30T18:46:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CTrenkamp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ctrenkamp/32/38440_2.png) [@CTrenkamp](https://forum.inductiveautomation.com/u/CTrenkamp)\
**Post date:** [January 30, 2024, 6:57pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/12 "2024-01-30T18:57:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [January 30, 2024, 7:06pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/13 "2024-01-30T19:06:21Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![CTrenkamp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ctrenkamp/32/38440_2.png) [@CTrenkamp](https://forum.inductiveautomation.com/u/CTrenkamp)\
**Post date:** [January 30, 2024, 7:34pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/14 "2024-01-30T19:34:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [January 30, 2024, 8:57pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/15 "2024-01-30T20:57:13Z")

</div>

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

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

```css
.ia_popup__header {
	font-size: 24px;
}

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

```

---

<div class="post-metadata">

**Author:** ![CTrenkamp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ctrenkamp/32/38440_2.png) [@CTrenkamp](https://forum.inductiveautomation.com/u/CTrenkamp)\
**Post date:** [January 30, 2024, 9:10pm UTC](https://forum.inductiveautomation.com/t/iframe-title-font-size/84929/16 "2024-01-30T21:10:18Z")

</div>

That worked, thanks.