How can I replicate Protostar look in Cassiopeia? Topic is solved

[simonlindsay]

Hi,

I am in the process of updating one of my J3 sites to J4. I already have a J4 site running Cassiopeia (not a big fan of) and I would like to replicate the Protostar template for the font (Tahoma) and to make the font sizes smaller as per the above post (Why are they so big, especially the headings?) How do I do this across the whole site and please could you explain what the font sizes should be in the css file. I also want to have the background as white, #f4f6f7 and the template colour as blue, #0088cc.

Basically, I like the clean look of Protostar and would like to replicate it on Cassiopeia. Many thanks in advance for help.
Simon

[AMurray]

It would take a bit of work (and coding knowledge) to convert Protostar to J4.

Someone already did so. Refer to viewtopic.php?f=46&t=988263

However, you have complete control over the Cassiopeia template. Add your own CSS to a custom CSS file (user.css) just like you did in Protostar / J3.

Why are headings so large? Because....they're headings. Think of newspaper headlines - large print, designed to capture people's attention. In some ways Headings in web design are like the same thing; they draw attention to the web pages. You can change their font sizes and font-faces in your user.css file.

You may wish to spend a bit of time learning the fundamentals of CSS and HTML, https://www.w3schools.com/default.asp - concepts concerning font sizes and font faces etc.

[simonlindsay]

Thanks A Murray for your reply. I don't want to convert Protostar to J4, just to get the look and feel of the font sizes and template and background colours in Cassiopeia. What do I need to put in the user.css to accomplish this?
Thanks.
Simon

[AMurray]

I don't use either template, so not familiar with what differences there are or what you want to change to make one look like the other.

First up we need your website link so we can see what you're referring to (screenshots won't help much) and so you can point out what parts you want to change and then we can tell you the CSS classes you need to override within your user.css file, with your specific CSS code for each element.

While I wouldn't call myself a novice, I'm not an expert in CSS either, so you may expect other members to chime in with some advice, once we have your web link.

[simonlindsay]

Hi,

My two sites are 3dcreations.uk on the Protostar template and my test site is simonlindsay.com on Cassiopeia.

Just for reference, I want to update my 3dcreations site from J3 to J4 and have the clean look of Protostar.

As you may see, in some articles I have already started to change the font to Tahoma and some of the sizes on my test site.

Many thanks.

Simon

[Per Yngve Berg]

Have you read this?

https://magazine.joomla.org/home-en/feb ... ips-tricks

1) Set the colour of the header area in the Template Style
2) Put the Menu Module in the "Menu" Position. Remove any Prefixes set. The template have the Hamburger Menu as default.

[simonlindsay]

Firstly, thanks to all the people who responded to my post. I have solved the problem in one easy step. I downloaded Kickstart Cassiopeia, the new Joomla frontend template module by Maarten Blokdijk. It does everything I want and more and it's free!