3.1 Browser Setup for Changing Website Appearance

We are now ready to make changes to the appearance of our business website. This is Step 6 in our website building process.

01ar

 

 In this chapter, and throughout the rest of this book, we will make frequent changes to the appearance of our business website. These changes are often done by changing the CSS or Cascading Style sheets that come with our website template. To see the effect of these changes in the front end of our website, we often have to refresh or reload the web browser we are using to view the front end of our website. Reloading the web page requires clearing the browser cache – which is a hidden tool that stores the old version of the web page to help it load faster. The problem with clearing the browser cache is that if you clear the cache on the web browser you are using to make your changes, your browser will log you out of your Administrator Control Panel – requiring you to log back in again.

To avoid this problem, we need at least two different web browsers – one web browser to make the changes with our Control panel and a second web browser to clear the cache every time we want to confirm the changes we made by viewing the new front end of our website.

But in reality, we actually need three web browsers. This is because different web browsers may display your web pages slightly differently. Because the Google Chrome Browser is the most common browser, we need at least one web browser that is similar to the Google Chrome browser. In the past, I recommended the open source Chromium browser to be this third browser. However, due to recent adverse changes made by Google, I no longer recommend the Chromium browser. Instead, I recommend a similar browser, based on Chromium called the Brave Browser.

In this article, we will explain how to set up three browsers and describe the process for checking and changing the appearance of your website as you develop it.

The three browsers I recommend are:

Firefox, which comes preloaded on Linux Mint, to make your changes with your Joomla Control Panel also known as the Joomla Dashboard.

LibreWolf: which is nearly identical to Firefox for clearing the cache and viewing changes on the front end of your website.

Brave: For confirming how your website will appear in the Google Chrome or Chromium browser – and for holding or loading Google tools such as Gmail and YouTube.

 

How to Install the LibreWolf Browser

The easiest way to install the LibreWolf Browser is to download the AppImage from the following web page:

https://gitlab.com/librewolf-community/browser/linux/-/releases

Scroll down the page to find the latest X86_64.AppImage. Then click on it to load it to your Downloads folder. Do not download either the Aarch AppImage or the Flatpak or Tar or Sig images. Move this zipped file from your Downloads folder to your Apps folder. The file size should be about 80 MB.

Next, right click on the folder and click Properties. Then click on the Permissions tab. Then check the box for Allow executing file as a program.

01

Next, right click on your Mint Menu and click Configure. Then click on the Menu tab at the top of the screen. Then click Open the Menu Editor. Then click the Internet Category in the left column. Then on the right hand side, click New Item. Give it a name and for the command click the Browse button and locate the AppImage file and select that one.

02

Then click the icon on the left-hand side browse to where you have the icon file and select it. Done. You now have a menu entry. Close the menu editor. Open your menu and right-click the launcher you created to add the launcher also to your task bar.

Change the Initial Settings
The browser opens to a blank change. You can change the opening page to anything you want. Click on the Menu in the upper right corner. Then click Preferences, Home.

03

Above, I set Learn Linux and LibreOffice dot org to be my Home page. You may want to set the Linux Mint forum to be your home page.

Then click Search. You have your choice of several different search engines. Duck Duck Go is default and is probably the best US search engine. I also like SearX and Qwant.

04

Add a Top Menu
The easiest way to clear the cache and use the Inspector tool is to add a menu to the top of the LibreWolf browser. Click on the top menu. The click Customize. Then at the bottom of the page, click Toolbars, then check Menu Bar.


How to Clear the Cache with LibreWolf
In the top menu, click on History, Clear Recent History

05

Assuming the time range is set for Everything, just click OK. Then reload the page to view the result of your CSS changes.

How to Use LibreWolf to Inspect an HTML Element or CSS Selector
In the top menu, click on Tools, Web Developer, Inspector. This will bring up a Code Box at the bottom of the screen and a tool you can use to hover over and click on any part of the web page. Below I clicked on the blue menu item called 2 Linux to the Rescue.

06

The HTML is shown in the right column and the CSS is shown in the left column. In the right column, the class to the right of the ul (which stands for unordered list is the class for the entire menu. The class to the right of the li (which stands for line item) is the class for the individual menu item. Note that the menu item I am interested in has a class of lightcyan. The CSS for this class has a background color of #66ffff which is light cyan. I could change this color to whatever I want by adding this class to my custom.css

.lightcyan { background-color: #aaeeff;}

For more information on how to use the LibreWolf or Firefox inspector, see the following article:

https://learnhtmlandcss.com/3-css-basics/3-4-how-to-become-a-css-detective

07

How to Install and Use the Brave Browser
Brave needs to be installed from the terminal. Open your terminal and copy and paste this:

sudo apt install apt-transport-https curl gnupg

Press Enter. Then enter your password and press Enter again

At the prompt, enter capital Y and press Enter. Then when it is done, copy and paste (minus the dollar signs):

 curl -s https://brave-browser-apt-release.s3.brave.com/brave-core.asc | sudo apt-key --keyring /etc/apt/trusted.gpg.d/brave-browser-release.gpg add -

 

Then copy and paste this:

 echo "deb [arch=amd64] https://brave-browser-apt-release.s3.brave.com/ stable main" | sudo tee /etc/apt/sources.list.d/brave-browser-release.list

 

Then copy and paste this:

sudo apt update

Then copy and paste this:

sudo apt install brave-browser

At the prompt, enter capital Y and press Enter. When it is installed, close the terminal. Then open the Mint Menu and click on the Internet Category. Right click on Brave and click Add to Panel. Then click on the Brave Icon to open the Start screen

08

Taming Brave

To simplify the appearance of the start screen, click on the menu in the upper right corner. Then click on Settings. Here I have set Future Tech Biz Club to be the Home page:

09

You can also set your ProtonMail login page as your Home page.

Then scroll down and turn off some of these settings:

10

Then scroll down and change the New tab page to show a blank page. Also turn off the number of blocked items shown. Scroll down and change the search engine to whatever you want. Then open a new tab:

11

Finally, to add your Google accounts to this browser, do a search for Gmail and log in.

What’s Next?

Now that we have set up our three web browsers, we are ready to install our custom template.