Table of Contents

Styles used at yvetteboye.com

Intro

This article contains a summary of styles used on the webpage yvetteboye.com. It is not a compete list of every style, design and color that have been used. Nor is it the intention that the post one day will contain all styles used at the site.

The reason for it not being complete is that the website has been built with the ready-to-use template SCRIBE by Mike Oliver. Scribe is one of many ready-to-use sites from the GeneratePress (affiliate link, which means that if you click on it, the site will earn a commission free of charge for you) theme.

With the GeneratePress template and theme comes a lot of choices for styling. Some can be edited under Customize in the Dashboard.

Other parts of the styling can be changed with CSS. Yet there will be parts that for non tech users (like myself) might be difficult to grasp how to manage.

Consequently, when making a plan for the styling page, one should focus on what one can do something about. Even more important, make the styleplan for the most important parts in a page. And that is content.

Therefore, such things as headers, paragraphs, the color of links, and button in the content part of the page become essentials.

In addition for such a page being helpful for the administrator, also visitors might find it helpful to read about thought about the style of a live webpage.

Headers

Div small Headline – Inter

Titles – Inter

H1 This is an example of how header H1 looks like using the headline block from the theme GeneratePress.

H2 This is an example of how header H2 looks like using the headline block from the theme GeneratePress.

H3 This is an example of how header H3 looks like using the headline block from the theme GeneratePress.

H4 This is an example of how header H4 looks like using the headline block from the theme GeneratePress.

Body Text

Body Text – Paragaphs

And this is how the paragraph looks like using normal Gutenberg block editor from WordPress. It is very easy to use. Using the link color chosen below, the link will look like this: link color.

And this is how it looks when you start a second paragraph. Space between the paragraphs are added automatically. It is easy just to write like, for example, when one is in Microsoft Word.

Global Colors

var(–contrast)

var(–contrast-2)

var(–contrast-3)

var(–base)

var(–base-2)

var(–base-3)

var(–accent)

Buttons

Primary

Links

Content link color

Content link color hover underlined

Content link color visited

Active content link color

Kudos to Mike Oliver who originally designed the style page that was part of the SCRUBU template. It is really smartly designed and developed. When changes are made in customize in the dashboard, also changes such as colors are automatically changed on the styles page.

FYI: On this website, the page has been edited and added helpful elements have to easier manage the update of the site more.

Styles