Embed Widget with CSS

Ask for Help
1

Hi
I’d like to embed a little widget from a weather page - spotAIR

They provide a little iframe

either this

![image|492x308](upload://7w9sQjAAhxlpc3QoNGE97vpser2.png)

which is a list of weather stations

or

this

image
which is a single one

ideally i’d make it tiny and embed it over my home page image

i wrote this CSS code

.windicon {
  margin: 0px;
  padding: 0px;
  background-color: none;
  top: 40%;
  left: 100%;
  width: 35px;
  height: 35px;
  position: fixed;
  z-index: 999;
  margin-top: -70px;
}

applied the windicon class to an web embed component

but the embed stays the same

any ideas?

ta

2

I think CSS also didn’t work with the embed when I tried it in the past. Just to confirm, you can embed the site already, just that you can’t change it using CSS?

3

yes exactly. not sure if it isn’t working because i dont have the right CSS reference or it just doesnt work. either way nothing in CSS seems to change the properties of the web embed field

any other way of achieving what im trying to do?

4

Is the website you embedded just an icon? Can you provide the link?

5

sorry, thought i had! doh

website here:

integrations list here

the one i want is Widget: wind station

6

Is the size setting in your embed web component not working?

7

Yes. CSS doesn’t seem to be controlling the embed field at all

8

I mean the default settings in the right panel of GDE. And what do you actually want to achieve?

9

aah i see. sorry for the confusing clarification. yes the default settings work but not enough control. im trying to do something like this where i superimpose the widget on the image i have on my homepage, much like this super professional hackery (this is just sticking screen clips on top of each other in powerpoint ):

image
image536×1115 49.3 KB

10

So you aim to just superimpose text on top?

11

I guess so - superimpose the webembed widget like the bottom left of the image above

12

If you want to shrink your embedded web component, it is still possible to do so, but it is not possible to get the position of the icon.

13

I think thats ok - worth a try anyway. the webembed is only the icon. so i you know how to shrink and superimpose the embed, the icon should display ok within it i think

15

This is not the correct way to load.

16

Not sure I understand what you mean

17

Maybe you should use other methods, for example direct links instead of CSS.

18

Thanks for your help. Some great clues. Could you expand on other methods in glide? CSS is The only way I can think to do this

19

This is related to a 3rd party, you may need to read their documents. I do not know how.

20

thanks so much for your help, will see if i can get further :slight_smile:

1 Like