3.3 Modify your Web Pages with Custom CSS

The Demo Site uses some custom CSS to alter its appearance. To view this custom CSS, right click on the Demo Site Home page and click on View Page Source. Here is the link:

view-source:https://www.phoca.cz/phocacartdemo/astroid/

There are several style sheets we may look at later. But we are mainly interested in the CSS below the style sheets. These are lines 29 to 151. To add all of these custom styles to our website, first create a new blank document with your file manager and name it astroid.css. Then open this file with Bluefish and copy and paste lines 29 to 151 of the CSS shown below the style sheets into this astroid.css file. Then save and close this file. Then with this CSS still on our clipboard, go to Extensions, Templates, Templates and click on the Astroid Template One Details and Files. Click on CSS. Then create a custom.css file by clicking on New File. Name the file custom and for type choose CSS. Then with the CSS folder selected, click Create. Then open this custom.css. Then right click and paste the Demo CSS into this file. Click Save and Close. Then close. Then clear the browser cache and view the front end of your site. Here is the Categories Page:

01

Here is the Category Page:

02

Here is the Product page:

03

Here is the Checkout page:

04

Our checkout page is missing the Shipping and Payment sections. Go to Phoca Cart Control Panel, Options, Display tab and scroll down to Checkout View Change Display Shipping description and Payment Description from No to Yes. Then save and view site.

05

Template Styles Custom CSS
In addition to adding custom CSS to a custom css file, Astroid allows us to place custom CSS inside the Template Styles area. Click on Extensions, Templates, Styles and click on the Astroid One template to open it. Click on Template Options, then in the side menu, click on Custom Code.

Then copy and paste the following into the Custom CSS section.

 

.container {

max-width : 880px;

line-height: 1.3;}

.megamenu-container {

width: 880px;

max-width: 880px;}

.item-level-1 .nav-title {

font-weight: normal;

color: #111166;

font-size: 16px;}

.item-level-2 .nav-title {

font-weight: bold;

color: #333399;

font-size: 18px;}

.item-level-3 .nav-title {

font-weight: normal;

color: #222222;

font-size: 16px;

padding: 0px;

line-height: 1.2;}

.nav-submenu-static > li > a {

text-decoration: none;

display: block;

padding: 4px 15px;}

.feature-box-blue-left-border {

border-left: 9px solid #222299;

background-color: #ddddff;

padding: 12px;}

Then click Save. Then click Clear Cache. Then Click Preview. These changes will not make much difference to our Shop appearance. But they will improve our Mega Menu appearance which we will do later after we have added several more products and pages to our business website.

 

Use CSS to Delay Transition from Full Menu to Hamburger Menu and Fix Drop Down Menu Problem

Open the Main menu module and change the module position from the Banner position to the Protostar position 1. Then click on the Advanced tab and delete the nav-pills menu class suffix. Then change the Layout to Astroid Template One Horizontal View. Then click Save and Close.

There is a problem with the default Astroid One Template settings that can only be seen after adding several menu items to the main menu. We will therefore add 4 Phoca Cart Product categories to our menu menu. To find the absolute links to these four product categories, go to the Shop Menu and click on each product category. Then create a list by copying and pasting the links. Below is my list:

http://localhost/Joomla3/index.php/visit-our-shop/1-skoda

http://localhost/Joomla3/index.php/visit-our-shop/2-volkswagen

http://localhost/Joomla3/index.php/visit-our-shop/3-audi

http://localhost/Joomla3/index.php/visit-our-shop/4-books

Then go to Menus, Main Menu and click New. Then click Menu item Type. Then click System Links URL. Then copy and paste the first URL into the LINK box. Call the Menu Item Our Shop Skoda Cars.

06

 

Then click Save and New and repeat for the other three links. Then click Save and Close and View Site

07

Grab the browser edge and slowly reduce the screen width. You will notice that at about 992 pixels, the main menu is replaced by a hamburger menu. This is definitely not what we want. The Hamburger menu is OK for mobile phones with screen widths of under 700 pixels. But for full size screens over 700 pixels wide, we want the full menu to appear. Put another way, we want to change the transition point from 992 pixels to 700 pixels.

There is a second problem with the Astroid Horizontal Menu. When we have a drop down menu in the first row of menu items and a second row below the first row, the drop down menu items are too far below the first row and are hidden before your viewers can click on the drop down menu items. Here is what this problem looks like:

08

 

This problem is partly solved by going to Template, Styles, Header and increasing the Animation duration from 100 ms to 500 ms:

09

We also need to reduce the distance between the top level and sub-level menu items. We can solve the width and distance problems by adding the following to our template custom css section:

.container {max-width : 940px;

line-height: 1.3;}

.megamenu-container {width: 940px;

max-width: 940px;}

.item-level-1 .nav-title {font-weight: bold;

color: #111166;

font-size: 16px;}

.item-level-2 .nav-title {font-weight: bold;

color: #333399;

font-size: 18px;}

.item-level-3 .nav-title {font-weight: normal;

color: #222222;

font-size: 16px;

padding: 0px;

line-height: 1.2;}

.nav-submenu-static > li > a {

text-decoration: none;

display: block;

padding: 4px 15px;}

.feature-box-blue-left-border {

border-left: 9px solid #222299;

background-color: #ddddff;

padding: 12px;}

 

.astroid-banner .astroid-banner-inner {

padding: 0 0;}

.py-3 {display: none;}

.megamenu-container .nav-submenu-container .nav-item-level-1

{padding-top: 0px;}

.nav-submenu-container .nav-item-level-1

{padding-top: 0px;}

.nav-item-level-1

{ padding-top: 0px;}

.astroid-header-section .astroid-header {

padding: 0 0;}

.astroid-component-section {

padding: 0 0; }

.border-layout { margin: 0; padding: 0;}

.astroid-column {margin: 0; padding: 0;}

.col-lg-12 {margin: 0; padding: 0;}

.navigation-container {margin: 0; padding: 0;}

.moduletable {margin: 0; padding: 0;}

.astroid-header-section {margin: 0; padding: 0;}

.astroid-header {margin-top: 0; margin-bottom: 0;

padding-top: 0; padding-bottom: 0;}

.astroid-stacked-header {margin: 0; padding: 0;}

.astroid-stacked-seperated-header {margin: 0; padding: 0;}

.astroid-header-section header.astroid-header:not(.astroid-header-sticky) {padding: 0 0;}

.astroid-layout.astroid-layout-boxed .astroid-wrapper {

box-shadow: none; }

.astroid-component-section {padding: 20px; }

Then click Close, Save and Close and View site. There are still some problems with the menu. We will therefore add the following to our Templates, Templates custom.css file. Here is the added CSS in addition to the Demo Site CSS:

.nav-item-level-1

{padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px;}

.nav-submenu .nav-submenu-static {padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px;}

.megamenu-container .nav-submenu {margin-top: 0px; margin-bottom: 0; padding-top: 0; padding-bottom: 0;}

.page-header {padding-bottom: 8px; margin: 8px 0 7px;}

.nav-submenu {background-color: #aaffaa; margin-top: 0px; margin-bottom:0; padding-top: 0; padding-bottom: 0;}

.nav-item-dropdown {margin-top: 0px; margin-bottom:0; padding-top: 0; padding-bottom: 0;}

.nav-submenu-container {background-color: #aaaaff; margin-top: 0px; margin-bottom:0; padding-top: 0; padding-bottom: 0;}

 

.ph-corner-icon-our-favorites {

background-color: #ccf;}

.ph-corner-icon-super-deal {

background-color: #cfc;}

.ph-corner-icon-on-sale {

background-color: #fcc;}

.btn-danger {display: none;}

 

Now view the site menu using a different web browser and clearing the web browser cache. The drop down problem has been fixed. But the width problem remains.

We will therefore need to use a template override to solve the width problem. Go to Templates, Templates, Template One and click on it to edit it. Then in the right column, click on scss, then one, then variable_overrides.scss. Then copy and paste the following below the existing button scss section:

$grid-breakpoints: (

xs: 0,

sm: 576px,

md: 720px,

lg: 800px,

xl: 940px

) !default;

 

$container-max-widths: (

sm: 540px,

md: 740px,

lg: 920px,

xl: 980px

) !default;

 

Save and close the SCSS file. Now view the site menu using a different web browser and clearing the web browser cache. The width problem has now also been fixed.

 

 

What’s Next?

In the next section, we will look at Template Overrides which are another way to customize the appearance of our business website.