How can elements in the default weather module be moved

[sdetweil]

@DDE12 that ::before is what makes the first elevated

Then you have
the temp 81
And feels like in different spans w different styles

I dont know how to override the before (yet)

[sdetweil]

@DDE12

i ‘think’

span.light.wi.weathericon.wi-day-sunny {}
note no spaces

because css doesn’t support widcard(*)

you will have to make separate lines for each possible weather icon

then on the others, you will have to make the styles produce the same results

[sdetweil]

@DDE12 and if you need to style the icon more, then settings inside the {}

[DDE12]

@sdetweil
In tinkering around, I am able to move it in custom.css with the following and possibly avoid addressing every individual icon.

.weather .weathericon {
	display: inline-block;
	transform: translate(-31px, -32px) !important;
	outline: 1px solid blue;
}

The problem with what I have above is that it will only make it look okay on one screen resolution. How do I move it to the top left of the module space so that it is relative (stays in the top left regardless of screen resolution).

[sdetweil]

@DDE12 you can try

position:relative;
top:0;
left:0;

that will put the selected thing top left of its parent

you may have to play w the selector

[DDE12]

@sdetweil
I’ve made some headway with the temperatures but the icon is not behaving. I think part of the problem is that it is being treated as a font or the original icon that is a font is hanging around causing a problem. It there a way with the CSS to clear all the settings and remove the font setting for the icon container?

[sdetweil]

@DDE12 I do not know. this ::before is likely the problem.

[DDE12]

@sdetweil
I have made some progress. I commented out everything in vendor\node_modules\weathericons\css\weather-icons.css. and changed .weather . larger to flex and have more control of the icon.

.weather .large {
    line-height: 1;
    display: flex;
}

.weather .weathericon {
	font-size: unset !important;
        line-height: unset !important;
	transform: unset !important;
	outline: 1px solid blue;
	width: 2em !important;
	height: 2em !important;
	position:relative;
	top: -18px;
	left: -15px;
}

.weather .light.bright {
	outline: 1px solid green;
	position:absolute;
	top: 2px;
	left: 147px;
}

.weather .normal.medium.feelslike {
	outline: 1px solid purple;
	position:absolute;
	top: 3px;
	left: 242px;
}

The icons in this set have a lot of background “dead space” so it is skewed up and left to get it to the corner. The height of the module space is being controlled by the height of the icon. How can I decrease the height of the module space by the amount I moved the icon up plus a little extra for the dead space?

[sdetweil]

@DDE12 make the icon 1.5em
then you need to size the div the spans are in