# Embed Widget with CSS **URL:** \ **Category:** Ask for Help\ **Tags:** custom-css\ **Created:** [June 22, 2024, 3:33pm UTC](https://community.glideapps.com/t/embed-widget-with-css/74324 "2024-06-22T15:33:16Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 22, 2024, 3:33pm UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/1 "2024-06-22T15:33:16Z")
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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/0/00c147fc84094f0f96f9ba8108066a271ebb226c.png) which is a single one ideally i’d make it tiny and embed it over my home page image i wrote this CSS code ```auto .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 ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [June 23, 2024, 12:49am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/2 "2024-06-23T00:49:30Z")
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? ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 23, 2024, 7:08am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/3 "2024-06-23T07:08:02Z")
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? ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 23, 2024, 7:36am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/4 "2024-06-23T07:36:51Z")
Is the website you embedded just an icon? Can you provide the link? ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 23, 2024, 7:56am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/5 "2024-06-23T07:56:54Z")
sorry, thought i had! doh website here: > **[SpotAiR](https://www.spotair.mobi/)** > > SpotAiR is dedicated to outdoor practices that depend heavily on weather conditions: paragliding, hanggliding, speed riding, kite. SpotAiR Aggregates many 'real time' data sources, allowing you to appreciate and share with your friends the... integrations list here > **[SpotAiR](https://www.spotair.mobi/help/integrations.php)** > > SpotAiR is dedicated to outdoor practices that depend heavily on weather conditions: paragliding, hanggliding, speed riding, kite. SpotAiR Aggregates many 'real time' data sources, allowing you to appreciate and share with your friends the... the one i want is [Widget: wind station](https://www.spotair.mobi/help/integrations.php#wind_widget) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 23, 2024, 8:06am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/6 "2024-06-23T08:06:51Z")
Is the size setting in your embed web component not working? ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 23, 2024, 9:36am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/7 "2024-06-23T09:36:35Z")
Yes. CSS doesn’t seem to be controlling the embed field at all ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 23, 2024, 9:38am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/8 "2024-06-23T09:38:14Z")
I mean the default settings in the right panel of GDE. And what do you actually want to achieve? ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 23, 2024, 9:55am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/9 "2024-06-23T09:55:25Z")
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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/c/5c9e5be0bf8f47442571efd1165f133a066e88f8.jpeg) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 23, 2024, 10:08am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/10 "2024-06-23T10:08:34Z")
So you aim to just superimpose text on top? ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 23, 2024, 10:09am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/11 "2024-06-23T10:09:41Z")
I guess so - superimpose the webembed widget like the bottom left of the image above ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 23, 2024, 10:17am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/12 "2024-06-23T10:17:24Z")
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. ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 23, 2024, 10:32am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/13 "2024-06-23T10:32:48Z")
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 ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 23, 2024, 11:05am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/15 "2024-06-23T11:05:16Z")
This is not the correct way to load. ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 23, 2024, 11:58am UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/16 "2024-06-23T11:58:59Z")
Not sure I understand what you mean ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 23, 2024, 12:04pm UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/17 "2024-06-23T12:04:10Z")
Maybe you should use other methods, for example direct links instead of CSS. ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 23, 2024, 12:10pm UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/18 "2024-06-23T12:10:25Z")
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 ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 23, 2024, 12:20pm UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/19 "2024-06-23T12:20:01Z")
This is related to a 3rd party, you may need to read their documents. I do not know how. ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [June 23, 2024, 1:53pm UTC](https://community.glideapps.com/t/embed-widget-with-css/74324/20 "2024-06-23T13:53:44Z")
thanks so much for your help, will see if i can get further 🙂