Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
How are you styling them?
I am trying with inline css, but since I am a complete noob it does not seem to work out.
Here is the custom code in the revolution slider:
<div class=”header-slider”>
<h2>Cairo</h2><div class=”bookbuttons”>Book now</div>
<div class=”visithotel”><p>Visit hotel</p><p>More information</p></div>
<div class=”localtime”>Local time</div>
<div class=”clock” id=”id390181″> </div>
<div class=”localweather”>Local temperature</div>
<div class=”tempsep”>/</div>
<div class=”tempc”>[awesome-weather location=”Cairo” units=”C” size=”tall” override_title=”Sahl Hasheesh” forecast_days=”0″ hide_stats=1 custom_bg_color=”rgba(0,0,0,0)” ]</div>
<div class=”tempf”>[awesome-weather location=”Cairo” units=”F” size=”tall” override_title=”Sahl Hasheesh” forecast_days=”0″ hide_stats=1 custom_bg_color=”rgba(0,0,0,0)”] </div>
</div>
<div class=”blackcover”></div>
=========================
That’s the code in Style.css
.awesome-weather-current-temp sup {
font-size: 24px;
padding-left: 3px;
top: -19px !important;
}
.localweather {
font-size: 14px !important;
position: absolute !important;
right: 5px !important;
top: 125px !important;
min-width: 150px !important;
}
.clock {
border-right: 1px solid #fff !important;
font-size: 48px !important;
line-height: 50px !important;
padding-right: 25px !important;
position: absolute;
right: 205px;
top: 140px;
min-width: 120px !important;
}
.localtime {
font-size: 14px !important;
font-weight: 600;
position: absolute;
right: 233px;
top: 125px;
}
.header-slider1 .localtime {top:10px !important;}
.header-slider1 .clock {top: 25px !important;}
.header-slider1 .localweather {top:10px !important;}
.header-slider1 .tempsep {top:39px !important;}
.header-slider1 .tempf, .header-slider1 .tempc {top: 15px !important;}
.visithotel p {margin-bottom:5px; font-weight: 600 !important;}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
The ‘.localtime’ selector is only on the text “Local temperature”. Is that what you’re trying to style? There’s a thousand styles going on at once in the weather bit so it’s important to clarify
I want to style the temperature numbers.
[moderator note: please do not start double topics for one problem – your other topic is now closed; http://codex.ww.wp.xz.cn/Forum_Welcome#Where_To_Post ]
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you’re not using a Child Theme, and if the theme doesn’t have a section for CSS modifications then do the following:
- Install this Custom CSS Manager plugin http://ww.wp.xz.cn/plugins/custom-css-manager-plugin
- use its “CSS Code” section of the dashboard to hold your CSS modifications:
-
(put this code in)
.localweather {
font-weight: 700 !important;
}
.awesome-weather-current-temp strong {
font-weight: 100;
color: white;
}
- Save
Alternatively use your Child Theme style.css file to hold your CSS modifications
That should be almost what you want.
Andrew, you are the best. It worked like a charm.
Thank you!
