How can elements in the default weather module be moved

DDE12

@sdetweil
Thank you for helping me.

<div id="module_3_weather" class="module weather" style="transition: opacity 1.5s ease 0s; position: static; opacity: 1;">
  <header class="module-header" style="display: none;"></header>
    <div class="module-content">
      <div>        
        <div class="normal medium"> </div>
        <div class="large">
          <span class="light wi weathericon wi-day-sunny">
	    ::before
	  </span>
          <span class="light bright">81°</span>
	  <span class="normal medium feelslike">
	    <span class="dimmed"> Feels like 81° </span>	
	  </span>			
	 </div>
<!-- Uncomment the line below to see the contents of the `current` object. -->
<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{&quot;date&quot;:&quot;2024-10-06T16:11:01.142Z&quot;,&quot;windSpeed&quot;:5.81,&quot;windFromDirection&quot;:237,&quot;sunrise&quot;:&quot;2024-10-06T11:39:13.000Z&quot;,&quot;sunset&quot;:&quot;2024-10-06T23:11:13.000Z&quot;,&quot;temperature&quot;:26.76,&quot;minTemperature&quot;:null,&quot;maxTemperature&quot;:null,&quot;weatherType&quot;:&quot;day-sunny&quot;,&quot;humidity&quot;:0.45,&quot;precipitationAmount&quot;:null,&quot;precipitationUnits&quot;:null,&quot;precipitationProbability&quot;:null,&quot;feelsLikeTemp&quot;:null}</div> -->
</div></div></div>

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;
}

Current cond.JPG

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