Clean up and embed CSS in HTML

[noble]

Hi - I’m looking to remove my CERN Override theme and do a simple embed of CSS into some HTML instead (given there is only one instance of this particular class - no point activating an entire theme to override it, which in turn risks compromising theme updates etc). However I am not quite sure how to write the CSS - could someone help me please?

It’s for the homepage at https://wlcg-public.web.cern.ch/ - the four boxes:

The HTML is:

<div class="flex-container2"><div>
<h3><span style="color:#2980b9;"><span style="font-size:72px;"><span style="font-family:CERNIcons,CernIcons,cern-icons;">m</span></span></span></h3>

<h3>A key tool for physics</h3>

<p>The most sophisticated data-taking &amp; analysis system ever built for science, providing near real-time access to LHC data.</p>
</div>
<div>
<h3><span style="color:#2980b9;"><span style="font-size:72px;"><font face="CERNIcons, CernIcons, cern-icons">G<span style="font-family:CERNIcons,CernIcons,cern-icons;"></span></font></span></span></h3>

<h3>Seamless access</h3>

<p>Computing resources which include data storage capacity, processing power, sensors, visualization tools and more.&nbsp;</p>
</div>
<div>
<h3><span style="color:#2980b9;"><span style="font-family:CERNIcons,CernIcons,cern-icons;"><span style="font-size:72px;">t</span></span></span></h3>

<h3>Global collaboration</h3>

<p>42 countries<br />
170 computing centres<br />
Over 2 million tasks daily<br />
1.4 million computer cores<br />
1.5 exabytes of storage</p>
</div>
<div>
<h3><span style="color:#2980b9;"><span style="font-size:72px;"><span style="font-family:CERNIcons,CernIcons,cern-icons;">l</span></span></span><span style="font-family:CERNIcons,CernIcons,cern-icons;"></span><span style="font-family:CERNIcons,CernIcons,cern-icons;"></span><span style="font-family:CERNIcons,CernIcons,cern-icons;"></span></h3>

<h3>Enabling discovery</h3>

<p>WLCG computing enabled physicists to announce the discovery of the Higgs Boson on 4 July 2012.</p>
</div></div>

And the CSS in the theme.css is:

  .flex-container2 {
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    flex-wrap: wrap;
  }

Could one of you magical people rework this for me so that I can just have all integrated into one blob of code that I can paste into the Text Component… and thus be able to remove my CERN Override Theme?

Thank you thank you thank you…
Cath

[noble]

By the way - in time I’ll be “CERNifying” those boxes into something more like the box arrangements we see all over CERN Theme’d sites… but this is just for the short-ish-term so I can get ride of the Override Theme asap.

[pkatyaya]

Hey Cath,

Just to understand the problem statement better, do you want all these boxes/containers to be aligned in a single box/container ? Kindly refer to this Screenshot below :

If yes then we can proceed to implement it on your website to fetch the desired output.

Thank you in advance for your time.

Regards,
Prakhar

[noble]

Hey @pkatyaya - indeed yes aligned, but I was originally hoping for more of a box effect/highlight effect around each one. Failing that, maybe some wider margins or padding or something so that things are less smooshed together.

Thanks,
-cath

[pkatyaya]

Hey,

Here it is much more clean and organised. The Content is in centre and wide apart thus avoiding overlapping of content (Padding and margin). I have 3 proposed designs with full box effect (shadow), with box effect for each of them and with vertical lines. Refer to the Screenshots below:

1

2

3

You can choose among these to get the best results for your website. Your inputs are welcome.

Regards,
Prakhar

[noble]

Oooh! Number #3 please, with the box shadow!

-c

[pkatyaya]

Hey,

I see that I do not have admin access to the website, I can only see content. I request you to add the following block of code in the source of your Text component.

.flex-container2{
display: grid; 
grid-template-columns: auto auto auto auto; 
padding: 20px;
margin: 20px;
box-shadow: 0 0 10px 0 #888;
}
.flex-container2 > div {
  text-align: center;
  padding: 20px;
  margin : 10px;
box-shadow: 0 0 6px 0 #888;

}

Note : Add a Style tag and place this code inside that to obtain the results. Once done do a hard refresh (Command + shift + R)

For the Shadow effect you can play around with the values to increase or decrease the effect to derive the output that best suits you.

I hope this works and suffice the requirement. In case of any issues or queries do write us back.

Regards,
Prakhar

[noble]

Perfect, @pkatyaya thank you VERY much! It’s much cleaner than my original, and I can finally dump my Override Theme.

Two wins in one go - I like it
Thanks,
-cath