Add picture in header on sofaskin webpage.

95 views
Skip to first unread message

Mikael Fredriksson

unread,
Jan 2, 2020, 3:28:16 PM1/2/20
to weewx-user
Hi!

Can someone explain how to add a picture at the top of a sofaskin web page? I only know how to change the color in a .css file, main.css I think it was...
Like it´s done on this page: http://www.limburgweer.com/index_EN.html

/Mikael

p q

unread,
Jan 2, 2020, 7:44:16 PM1/2/20
to weewx...@googlegroups.com
I don't know that skin, but I did something similar for the old standard skin. 

For a single image, you need to add a line to the template (index.html.tmpl probably) like

<div id = "banner">
<img id="banner" src="backgrounds/my_picture.jpg" alt="my_picture"/>  
</div> 
 
I wrote a little bit of javascript to rotate different pictures under the banner and if you're interested you can find it in the index.html.tmpl here: https://github.com/PeterQuinn925/weewx_skin/blob/master/index.html.tmpl

--
You received this message because you are subscribed to the Google Groups "weewx-user" group.
To unsubscribe from this group and stop receiving emails from it, send an email to weewx-user+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/weewx-user/a8e8659a-9954-403b-a3ab-a7128a1a7325%40googlegroups.com.


--
Peter Quinn
(415)794-2264

Mikael Fredriksson

unread,
Jan 3, 2020, 10:58:56 AM1/3/20
to weewx-user
Peter,

Thank you for that answer. Unfortunately I don't get it to work with those lines. I change the address to where I have the picture but it dont change the background.
I wonder if it's in the main.css, because thats where the background color is set. If I inspect the html on his page I don't see any lines like those in the code.

Hope you understand what I mean.

Can I copy&paste something here that helps?
/Mikael

p q

unread,
Jan 3, 2020, 11:05:35 AM1/3/20
to weewx...@googlegroups.com
It's in the html, not the css, and you need to change it in the template as the html gets regenerated each time the site is updated.

You could try using the dev tools in your browser (f12 for chrome) to find the area of the html where you want to add the picture. The lines won't be there, you'll need to add them in the right place.

--
You received this message because you are subscribed to the Google Groups "weewx-user" group.
To unsubscribe from this group and stop receiving emails from it, send an email to weewx-user+...@googlegroups.com.


--
Peter Quinn
(415)794-2264

Muireadach O Connor

unread,
Jan 4, 2020, 7:16:38 AM1/4/20
to weewx-user
The path is set in your main.css file, in mine it's line 578 :

header {
  background: #05c2d8 url('../images/winter.jpeg') 100%;

ma...@erwinheger.de

unread,
Jan 4, 2020, 8:34:21 AM1/4/20
to weewx...@googlegroups.com
Nice gif in your footer - like it!

Erwin

Am 04.01.2020 um 13:16 schrieb Muireadach O Connor <muire...@gmail.com>:


--
You received this message because you are subscribed to the Google Groups "weewx-user" group.
To unsubscribe from this group and stop receiving emails from it, send an email to weewx-user+...@googlegroups.com.

Mikael Fredriksson

unread,
Jan 4, 2020, 6:37:00 PM1/4/20
to weewx-user
Yes, that did it!

Thank you Muireadach!

Looked at your page and got really impressed of your Station records page, can you share how you set that up with all the records split up in seperate boxes?

Thanks!

/Mikael
Reply all
Reply to author
Forward
Message has been deleted
0 new messages