Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
heydanbrowne

How do I move this weather plugin with css

Question

Im trying to move this plugin i found with css but for some reason the css isn't responding or there is some other conflict.

I want to move the Weather plugin to the top right corner of the website inline with the other header text.

here's my css for positioning the div.


.temp {
   position: fixed;
   width: 100px;
   top: 40px;
   left: 80%;
   font-size: 12px;
   }

And here's my html code block.


<div class="temp">
<a class="weatherwidget-io" href="https://forecast7.com/en/37d9823d73/athens/" data-font="Georgia" data-mode="Current" data-days="1" data-theme="original" data-basecolor="#fff" data-textcolor="#fff" data-highcolor="#367d23" data-lowcolor="#367d23" data-suncolor="#367d23" data-mooncolor="#367d23" data-cloudcolor="#367d23" data-cloudfill="#367d23" data-raincolor="#367d23" data-snowcolor="#367d23">Athens, Greece</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
</div>

Here's what it looks like on the website. PASSWORD: Juliahugo (Uppercase "J")

WEBSITE LINK password: Juliahugo

PLEASE HELP ME - THIS IS SO FRUSTRATING!

alt text

screen-shot-2019-07-26-at-150642.png.38b072dc1a7122b674ab8aa2b0f51316.png

Edited by heydanbrowne

Share this post


Link to post

16 answers to this question

Recommended Posts

  • 0

I'm really stumped as too why there's a conflict on the css - I would imagine that squarespace would spit back the script and not the css...

Thanks for helping me with the question - curious to know if you have any insights @taunphan

Edited by heydanbrowne
Initial Revision

Share this post


Link to post
  • 0

@tuanphan, For some reason i'm not able to comment on your initial reply anymore - I was able to achieve that on a seperate html test page like thisalt text ... (below) but when I try to copy over the same css, something goes wrong on squarespace and there is an error.

What I'm currently doing on my test page, is positioning the script with css - but there is an error on squarespace.

screen-shot-2019-07-26-at-163343.png.d702bc1ecc022b0e0af5c577fb10aeec.png

Share this post


Link to post
  • 0

@tuanphan, For some reason i'm not able to comment on your initial reply anymore - I was able to achieve that on a seperate html test page like this ... (below) but when I try to copy over the same css, something goes wrong on squarespace and there is an error.

alt text

What I'm currently doing on my test page, is positioning the script with css - but there is an error on squarespace.

screen-shot-2019-07-26-at-163343.png.1557e837288ce5a2b71fc980844136ba.png

Share this post


Link to post
  • 0

Hey this worked but I realized what was wrong was that I shouldn't have put the styling in the page header injection. So my initial styling worked but i put it in the wrong place. Do you have any idea why page header injections wouldn't load css on this code block with a script? I havent encountered a problem like this before.

Share this post


Link to post
  • 0

No not the navigation - navigation is supposed to be centered and is working properly the way i've styled it.

It should look something like this - but the css on the cloud/degree script are conflicting. In a separate html file i'm working from. I've gotten it to do what I've want and it's only occuring in squarespace.

Here is a sample image what I want it to look like, which i've achieved outside of squarespace on a test page. Only when I get it into squarespace it stopsalt text

Edited by heydanbrowne
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...