Tutorial: Step by Step

• open the Library folder
• open the Shared folder
• open the website-name page
• select the ‘Rasa Web‘ text with your mouse
• type in a new name for your website
• click on the File menu
• click on Save

Tutorial: Step by Step

• open the Library folder
• open the Shared folder
• open the tagline page
• select the ‘tagline goes here‘ text with your mouse
• type a new tagline or delete
• click on the File menu
• click on Save

Tutorial: Step by Step

to replace the leaf icon

• go to the fontawesome website
• find a suitable replacement icon
• open the Library folder
• open the Shared folder
• open the website-name page
• switch to Code view
• select the ( fa-envira ) icon name
• type or copy in your replacement name
• click on the File menu
• click on Save

to delete the leaf icon

• open the Library folder
• open the Shared folder
• open the website-name page
• switch to Code view
• select <i class=”fa fa-envira fa-2x” aria-hidden=”true”></i>
• delete
• click on the File menu
• click on Save

Tutorial: Step by Step

• open the Library folder
• open the Shared folder
• open the website-name page
• switch to Code view
• select <i class=”fa fa-envira fa-2x” aria-hidden=”true”></i>
• delete
• drag or Insert your own image into the same location
• add to the <img> tag .. ‘class=”img-responsive”
• click on the File menu
• click on Save

Tutorial: Step by Step

There are several different locations in the shared.css style sheet where you can change the font properties for your ‘website name’. There are separate classes for the index page and template pages, and we also include separate properties for mobile and desktop. You may be changing 4 or more different styles.

The best way to do this is to use the ‘search’ command in your editor, search for a specific style, then change the properties for each instance of that style. For a detailed explanation and walkthrough, watch the video to the right.

change the website name font family / font size

• open the Site folder
• open the shared folder
• open the shared.css
• search for the class name**
  .website-name
• look for the property
  font-family: ‘xxx-xxx’,
  font-size: xxxx;
• update each .website-name class with your new property

change the tagline font family

• open the Site folder
• open the shared folder
• open the shared.css
• search for the class name**
  .tagline
• look for the property
  font-family: ‘xxx-xxx’,
  font-size: xxxx;
• update each .tagline class with your new property

**learn more about the scalable font size ( 5.9vw ) in the tutorial below

**most editors can access their ‘search’ function by pressing CTRL+F on the keyboard

Tutorial: Step by Step

• open the Library folder
• open the Shared folder
• open the shared.css
• search for the class
  .website-name
• look for the property
  background:url('‘https://2711.pegasaas.io/graphics/logo-xxx.png’') …;
• delete the entire line in each .website-name class you find

Information:

For the website name and tagline on the index page, we used a font-size property value that is based on the width of the screen, and not a fixed pixel, point or em size. This allows the font to scale up or down in relation to the monitor resolution the page is being viewed on.

Where most fonts are based on a fixed font size such a px, pt or em. We use the vw font size, with is based on the vertical width of the page, or monitor resolution.

You can learn more about it from the smashingmagazine article here.

When working with the vw font size value you just need to preview your page in a web browser, adjust the vw number, and then ‘test’ in different resolutions to make sure it’s visible on smaller devices.

Best to test with Chrome, and use the developer tools to help mimic the display of your website on a mobile phone. You can learn more about this tool here. We’ve included detailed information in the section below.

Information:

Previewing your website with the best tools, is a must for all web designers, web masters and web developers. If you are not previewing your site as you go you may find a bit of a hot mess when you first view your site on your mobile phone.

You can preview your site using the Developers Console included in Both Google Chrome and Firefox. For the purposes of this article we’ll stick with Chrome.

• install Google Chrome if you haven’t done so already
• right click on the web page you want to preview
• select Preview in Browser
• select Google Chrome
• with the page open in Google Chrome, press ( Shift + Ctrl + I )
• pressing these 3 keys together will open the Developer Tools panel
• to detach from the main browser and open in a separate window click on the three vertical dots located in the top right
• then selecting the ‘detached’ option as highlighted in blue above
• now click on the Mobile Icon in the top left

Information:

Something we’ll often see is a website with quite a few words or characters in their website name, and it can be a bit of a trial and error trying to fit a small paragraph into the website name / branding area.

Usually the first thing I suggest is to create a graphic for your logo so it will scale better on mobile devices, in this case we already use a scalable font size. But what happens when there are so many characters in the website name that it becomes unreadable on smaller devices?

Watch the video to the right and we’ll walk you through some of the scenarios that you may run into, and the solutions we recommend.