Jump to content

How do I move this weather plugin with css

Go to solution Solved by tuanphan,

Recommended Posts

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
Link to comment
  • Replies 19
  • Created
  • Last Reply

Top Posters In This Topic

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
Link to comment

@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

Link to comment

@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

Link to comment

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.

Link to comment

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
Link to comment

@heydanbrowne You should insert all css in one place. Easy to manage & edit in future. I usually insert to Home > Design > Custom CSS

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...

Hi did this solution work? I have similar problem with my 7.1 using code block.

As the code given by a third party they have not included position in the code itself. I am looking for the most functional way to control the position of my code blocks on big and small screens?

Link to comment
On 5/19/2020 at 2:28 PM, Bill_Judd said:

Hi did this solution work? I have similar problem with my 7.1 using code block.

As the code given by a third party they have not included position in the code itself. I am looking for the most functional way to control the position of my code blocks on big and small screens?

Can you share the code? I can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi Tuanphan

Thanks for replying, please see code which I use for my code block:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="94289" data-mb-site-id="665939" data-type="account-link" data-inner-html="Login | Register"  />

 

Would love to hear your thoughts

 

Best

Bill

Link to comment
On 5/20/2020 at 8:38 PM, Bill_Judd said:

Hi Tuanphan

Thanks for replying, please see code which I use for my code block:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="94289" data-mb-site-id="665939" data-type="account-link" data-inner-html="Login | Register"  />

 

Would love to hear your thoughts

 

Best

Bill

Can you share link to page where you used this code?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.