Clean up and embed CSS in HTML

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

And the CSS in the theme.css is:

  .flex-container2 {
    display: flex;
    flex-direction: row;
    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… :pray:

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.

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.


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.



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:




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


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



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.

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.


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 :smile: