Week Seven (MGDP2060)
This article lists topics for Week Seven of Web Design and Development III (MGDP2060).
Contents
Theme style.css file (460-461)
Each WordPress Theme requires its own style.css file.
Theme Editor (461-462)
You can edit WordPress Theme files in the Appearance Editor screen.
However, this is not best practice.
Child Themes (462-467)
A WordPress Child Theme is a WordPress Theme based on another Theme (the "parent" theme).
Creating a Child Theme from scratch is not difficult.
However, you can simply and speed up the process using a WordPress plugin:
Editing the Styles in Your Theme (468-480)
Reasons for changing styles in a Theme include:
- Making your Theme unique
- Branding: corporate logo, color
- Highlight certain design elements
Style rule structure
The basic structure of a style rule:
selector {
property:value;
property:value
}
Elements of the style rule:
- The selector identifies which HTML element(s) will be affected.
- The property identifies the type of formatting which will be applied.
- The value sets a value for the property.
See also Style rule (CSS).
Multiple rules
A style sheet may include multiple rules for the same element. Large style sheets may use this approach to break down complex rules and better organize them.
Media queries
Media queries are conditional queries, which apply when certain conditions are true (such as screen size being greater than a certain width, narrower than a certain width, etc.).
See Media query (CSS).
HTML element selectors
An HTML element selector selects a particular type of HTML element.
Example, make the h1 element blue:
h1 { color:blue }
See HTML element selector (CSS).
Class selectors
A class selector can be applied to one or more HTML elements by setting the class attribute of the elements.
Example (defining the rule):
.test { color:red; }
Example (using the rule):
<div class="test">...</div>
See Class selector (CSS) and Class attribute (HTML).
ID selectors
An ID selector applies one element on a web page, based on the element's ID attribute.
Example (defining the rule):
#test { color:green; }
Example (using the rule):
<div id="test">...</div>
See ID selector (CSS) and ID attribute (HTML).
Combined selectors
You can combine two or more selectors into a group by separating the selectors with commas.
Example (defining the rule):
h1, h2, h3, h4, h5, h6 { color:blue; }
In the above example, h1 elements are blue, h2 elements are blue, and so on through h6.
Puzzling Out the Styles in a Theme (479)
Finding the styles in a complex style sheet can be challenging.
Basic tools include:
Using Fancy Fonts (481-484)
In Cascading Style Sheets, embedded fonts are files on the server which can be displayed in web pages.
Using Google Fonts
Summary:
- Browse https://fonts.google.com
- Select a font
- Click the pop-up
- Copy the Embed code and paste in your style sheet
- Copy the style rule CSS and use in your style sheet
Embed code
Example:
@import 'https://fonts.googleapis.com/css?family=Gidugu';
Style rule CSS
Example:
<body> font-family: 'Gidugu', sans-serif; </body>
See also Web typography.
Template Files (486-502)
A WordPress Theme uses WordPress Template files to determine how content will be displayed.
Every Theme must have a Template file named index.php.
Most Themes have additional Template files, such as:
-
single.php -
page.php -
category.php
