Skip navigation

Lorelle on WordPress, Blogging, Social Media, and Web Publishing

March 18, 2015 – 4:47 pm

Lorelle on WordPress - What is New on the site banner.

By Lorelle VanFossen | Posted in Announcements | Comments Off on Lorelle on WordPress, Blogging, Social Media, and Web Publishing

WordPress Basics Half Day Workshop at Newspace Photography Center, Portland

September 10, 2015 – 2:16 pm

WordPress Educational Programs and Classes badge.Saturday, September 12, 2015, I will be teaching “Building a Website with WordPress” at the Newspace Center for Photography in Portland, Oregon, from noon to 5PM.

I know most of you in the Portland area will be heading to OMSI for the Maker’s Fair, but do that in the morning and spend the afternoon with us at one of the most exciting photography galleries and educational centers in the Pacific Northwest for an afternoon of learning the basics of WordPress.

I will be teaching about how to use WordPress to create a photography site, but more than just a portfolio site. We will be exploring several site models for photographers in WordPress.

Copyright Brent VanFossen - Red-legged Frog under leaf in Olympic National Park.

Red-legged frog in the Olympic National Park, photography by Brent and Lorelle VanFossen.

As a long-time professional nature and travel photographer and instructor, this brings my two favorite worlds together, photography and WordPress. I’m so excited to be working with Newspace. Expect more WordPress and photo-blogging workshops to come out of this relationship in the future.

There are a few seats left, and this course will be small and intimate, a great opportunity to dig into what WordPress can do for a highly visual site.

Register online immediately for a seat in this half-day workshop.

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.

By Lorelle VanFossen | Posted in Classes, WordPress, WordPress News | Tags: , , , , , , , , , , , | Leave a Comment

WordPress School: HTML and CSS References and Resources

April 22, 2015 – 12:17 pm

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In “9 Truths That Computer Programmers Know That Most People Don’t” by Macleod Sawyer, he quotes Ben Cherry and adds the following after:

“Under the hood, most critical software you use every day (like Mac OS X, or Facebook) contains a terrifying number of hacks and shortcuts that happen to barely fit together into a working whole. It would be like taking apart a brand-new 747 and discovering that the fuel line is held in place by a coat-hanger and the landing gear is attached with duct tape.” – Ben Cherry

That’s the funny thing about code, the website or program may work beautifully, it may run smoothly, and it may be absolutely beautiful on the front-end side (what the user sees). But, behind everything that makes it work it will have so many errors, and work arounds that barely work and that shouldn’t work, but do for some strange reason.

While this may apply to computer programming, it also applies equally to the web.

In March 2013, a study at Drexel University in Philadelphia, Pennsylvania, was conducted to evaluate the most common errors beginners make when learning HTML and CSS. Louis Lazaris of Sitepoint analyzed those results recently. He quoted from the survey a conclusion that explains the reasons most errors persist in HTML and CSS:

When a beginner writes code that has many errors but still renders as desired, they receive positive feedback in the form of the properly formatted web page. These errors are latent, remain unresolved, and reinforce faulty understandings that can become difficult to overcome.

This explains the statement by Ben Cherry. Web browsers work overtime to display whatever we throw at them in the code. Doesn’t mean it is right, deprecated, or totally wrong. The goal of the web browser is to display content on a web page. So remember, just because it looks right on the web page doesn’t mean it is right.

There is much about HTML and CSS that works perfectly with little or no effort. It makes sense. Then there are parts of HTML and CSS that make little sense. HTML5, the latest version, was supposed to clean up many of the inconsistencies and strange behavior, but it has its quirks, too. Things that should work, don’t. Things that shouldn’t work, do. We must understand not only how to code, but how the browser interprets that code. This is why I started out these two mini-series with the web browser before talking about HTML and CSS.

Welcome to programming.

I’ve put together a list of some basic guides and helpful sites for you to add to your resources and maybe learn more about how HTML and CSS work. This is a course about learning WordPress, and HTML and CSS are the basic building blocks. It is not a course for learning HTML and CSS. Hopefully the recent posts in this mini-series on HTML and CSS gave you a taste and will help you understand more about how a WordPress Theme works and how to modify it in future lessons.

There are new resources on HTML and CSS arriving on the web constantly. These are just a few I’ve found helpful over the years. Read More »

By Lorelle VanFossen | Posted in Web Design, WordPress, WordPress School, WordPress Themes | Tags: , , , , , , , , , , , , , , | Comments (1)

WordPress School: HTML and CSS – Identifying IDs and Classes

April 21, 2015 – 5:59 pm

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.As we round up the mini-series on HTML and CSS basics as part of the ongoing Lorelle’s WordPress School free online course, and to prepare you for working with WordPress Themes, it is important to understand how to find the right design element to change on a website, specifically within a WordPress Theme.

We’ve been mostly working on a test HTML file to learn the basics of HTML and CSS. In this tutorial, we are going to apply those lessons to WordPress.

If you are just joining us, please catch up by reading the tutorials in this mini-series on HTML and CSS basics so you understand what is being discussed in this tutorial:

CSS Classes and IDs Review

Quote on CSS - CSS isn't always easy to deal with. Depending Upon your skills...it can become a nightmare. By Vitalty Friedman.Designing a site doesn’t always start with a fresh clean slate. It often begins with tweaking an existing design, changing that tiny thing that annoys us or that we wish were different in some way, a different color, size, shape, or position.

In this tutorial we are going to look at how to identify and style specific sections and areas of a web page. When you begin to modify an existing WordPress Theme with a Child Theme, finding these HTML and CSS elements are critical. Honestly, it is just one of the aspects of web programming that makes me feel like a detective, a Sherlock Holmes of web design.

In the previous tutorial on CSS positioning, you learned how to set the img HTML tag for images to float to the right or left. If we set all the images on the web page to float to the right, it would force all images to the right within the context of the web page. We only want certain images to float to the right, others to the left, others in the center, and other images exactly where we want them. By assigning them a specific ID or CLASS to identify the image we wish to modify, we can pinpoint where each image should be positioned.

Consider the <h3> HTML heading tag in a WordPress Theme. It may be found in the post content, sidebar widgets, comments, and other areas within a website’s design. If you style all the headings to be the same throughout the entire site, that might be acceptable, but if you want the <h3> tag to look different in the content area than in the sidebar widgets, how would you know which one is which and how would you style it accordingly? Read More »

By Lorelle VanFossen | Posted in Web Design, WordPress, WordPress School, WordPress Themes | Tags: , , , , , , , , , , , , , , , , , | Comments (1)

WordPress School: HTML and CSS Positioning

April 20, 2015 – 5:33 am

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In Lorelle’s WordPress School free online course we’ve been exploring HTML and CSS basics to help you prepare for working with WordPress Themes coming soon. The information in these tutorials is essential for the WordPress user to learn for the most simple of tasks, from controlling how content displays in your posts to adding HTML code to WordPress Widgets to tweaking your WordPress Theme, and someday maybe even making your own or at least creating a Child Theme, a design that modifies an existing WordPress Theme.

This tutorial explores CSS positioning, how to put things in their place on a web page, following up on the previous tutorial on the CSS Parent-Child Relationship.

There are many ways to position design elements on a web page. In the previous exercises, we moved the paragraph “down” within its container by adding padding to the inside “space” of the div. Margins and padding move things around and position them within the CSS Box Model, but you have other alternatives for more specific positioning.

Here is our test code for this tutorial:

<div class="position1">
<p>Hello world!</p>
</div>

Below is the CSS to add to the head in the styles. In this example, the position of the wrapping DIV around the paragraph is set to absolute 100 pixels from the top left corner down and 80 pixels in from the left edge of the parent container edge. Read More »

By Lorelle VanFossen | Posted in Web Design, WordPress, WordPress School | Tags: , , , , , , , , , , , , , | Comments (2)

WordPress School: HTML and CSS Parent-Child Relationship

April 19, 2015 – 5:39 am

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.So far in this mini-series on HTML and CSS for Lorelle’s WordPress School, we’ve covered the basics and gave you a test HTML file to experiment with, explored the basics of HTML tags, inline styles with CSS, HTML embedded styles where the styles are removed from the HTML and placed in a <style> HTML tag in the head of the web page, and today we continue with the experimental HTML file as we explore the parent-child relationship of CSS and introduce you to CSS classes.

Terminology time:

  • CSS Parent-Child Relationship: In CSS, the parent-child relationship is similar to the human version. Supposedly, a parent tells the child what to do and they do it – most of the time. In CSS, there is more hope as the parent design element influences the child elements within it through inheritance.
  • Inheritance: If the styles of a child HTML element are not specified, the element inherits the styles of its parent, the HTML tag, commonly referred to as the container, wrapped around it. For example, if the font-family is set in the <body>, the paragraph HTML tag will inherit the same font unless specifically changed in the styles.
  • CSS ID: In CSS and HTML, the ID is the identifier for that HTML element. It is a unique term and found only once on a web page. On the style sheet, it is recognized with a # in front of the identifier such as #header and #this-one. It may also be used to create jump links within a page or website.
  • CSS Class: A class is an identifier on HTML elements that may be used repeatedly on the same web page. For example, if the design featured multiple h2 headings, by using <h2 class="red">, all the headings with the class “red” feature the instructions for that class name in the styles such as turning the text color red. All other h2 headings are ignored and the styles are not applied. In the CSS style sheet, a class is identified with a period such as .red and .widget.
  • Stylesheet/Style Sheet: The stylesheet/style sheet is the file that holds the CSS instructions separated from the HTML presentation files. It is linked to the HTML web pages using that style sheet. There may be one or many style sheets linked to a single web page as necessary.

Read More »

By Lorelle VanFossen | Posted in Web Design, WordPress, WordPress School, WordPress Themes | Tags: , , , , , , , , , , , | Comments (2)

WordPress School: HTML and CSS Embedded Styles

April 18, 2015 – 9:39 am

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In the next part of this mini-series for Lorelle’s WordPress School, we’re moving deeper into understanding how CSS works with HTML. These easy tutorials will give you the basic tools you need to learn to customize your WordPress site and work on WordPress Themes.

We will be working more on the test HTML file and continuing with the experiments you did in the last tutorial and move from inline CSS styles to embedded CSS techniques, moving you closer to the CSS stylesheet techniques found on every WordPress Theme.

In addition to the terminology you learned in the tutorial on HTML and CSS inline styles, here are a few new words.

  • CSS Rules: The structure of the language of CSS follow a pattern and structure known as the CSS rule. It consists of a selector and the declaration block, which features declarations made up of properties and values.
    • Selector: In the language of CSS, a selector is an identifier linked to the HTML. HTML has tags and CSS has selectors, often the same thing. In HTML, a tag would be <body>. In CSS, the selector would be <body> and feature properties to set the styles for that HTML tag.
    • CSS Properties and Values: After the selector, the CSS language presents the instructions within curly brackets { } called properties. Each property features a value. A colon not equals is set between the property and the value, and a semi-colon separates each set of properties and values. For example, to set the size of the font, the property would be font-size and the value would be 1em, which would be displayed as h2 { font-size: 1em; }. To set the font-size and the color of the text, it might be h2 { font-size: 1em; color: blue; }.
  • Identifiers: There are two identifiers in CSS, classifications that name the HTML tags to receive the instructions. While CSS may be applied to an HTML tag such as <p>, to change specific paragraph settings, classes and IDs are used to identify which ones to change.
    • Class: In CSS, a class is an identifier, designating the CSS selector. A class identifier may be found multiple times on a single web page. In the CSS language, the class is designed with a period before the word such as .widget. You could create a CSS instruction to style anything with the class “red” to the color red such as .red { color: red; }. Classes are single words or phrases with underlines or hyphens, and must start with an alphabet letter, not number, and may have numbers in it such as sidebar1 or sidebar-1.
    • ID: In CSS, the id is the identifier of a specific section on the web page. There may be multiple usage of the same ID across a website but only one on a single web page. Remember, classes maybe used multiple times on a web page, IDs only once. ID names have the same rules as classes. In CSS, the ID features a pound or number sign before the word(s) such as #post-title. Otherwise, it is used much like the CSS class to designate the specific area to be styled.
  • Stylesheet: A stylesheet or style sheet is the file that holds the CSS instructions. The HTML tags listed within it match the HTML file linked to the stylesheet. There may be multiple HTML files linked to a single stylesheet, thus influencing the design of the entire website. The same instructions for an HTML tag maybe made once in the stylesheet and design all the web pages attached to it.

Read More »

By Lorelle VanFossen | Posted in Web Design, WordPress, WordPress School, WordPress Themes | Tags: , , , , , , , , , , , , , , , , | Comments (3)

WordPress School: HTML Inline Styles

April 17, 2015 – 5:08 am

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In this mini-series for Lorelle’s WordPress School , we’re learning about HTML basics. I shared a little history and information to help you get started and gave you an HTML file that you will use in this tutorial. In the next tutorial, I covered some very basic HTML elements found in the test HTML file. In this tutorial, we will add styles as part of the process of learning basic web design. Again, this is not a full-fledged HTML and CSS class but a mini-tutorial on the basic terminology and web design elements to help you understand a little more about how a web page works, leading us toward WordPress site customization and WordPress Themes.

The styles we are going to add are inline styles, presentation elements that style the HTML tag. We will start with a few basic, considered archaic by many, inline HTML styles and introduce you to inline CSS styles in this tutorial.

WordPress.com sites may not use JavaScript or other code within the contextual areas of the site, but the use of inline HTML styles allows some limited customization and design elements, so this is good to know for those using that hosted WordPress service. For self-hosted WordPress users, you never know when this type of customization might come in handy. Either way, it is the first step in learning the basics of HTML and CSS.

To start understanding how the style instructions are applied to HTML, here are some terms.

  • Site Architecture: Think of HTML as the web page/site architecture, the framework that holds all the graphic and contextual elements. Much like the framework of a house, HTML is the construction material that holds the house up. CSS is the paint.
  • Site Presentation: If HTML is the architecture, CSS is the presentation. In the industry, we separate the HTML from the CSS and label them architecture and presentation. CSS is the paint, but more than that, it is the instructions on how the paint is applied, placed, and designed.
  • CSS: CSS is an acronym for Cascading Style Sheets. CSS is the presentation language associated with HTML that provides instructions on how the HTML tags are to perform. They can be used to style words, images, and position design and layout elements on a web page.
  • CSS Inclusion Methods: CSS rules (instructions) may be found all over a website, styling a unique one-time element or all the various design elements of a website.
    • Inline CSS: In-line or inline CSS are styles that are found within the HTML tag such as <p style="font-size:110%; color: red;">Some text</p>. These should be used rarely as styles should be set in an internal or external style set.
    • Internal CSS: These are CSS instructions set within the web page where they are used. They are found within the head HTML tag of a web page. On WordPress sites, these are often inserted by WordPress Code or Themes as needed, and found on all web pages of the site not just a specific web page, though they might be. The HTML is found in the head section as <style>p {font-size:110%; color: red;}</style>.
    • External CSS: The external CSS is the stylesheet linked to the HTML web page(s). The instructions within the stylesheet dictate the presentation of the web page content.
  • HTML Elements: HTML elements are any individual components of a web page. Each element may have attributes specified to define its presentation and placement.
  • HTML Attributes: An attribute in an HTML tag is the parameter for that tag setting some presentation value such as the size, width, height, color, or other specification called a value.
  • Measurements: The following are measurements used on web pages to set the size of a design element.:
    • PX: The acronym px means pixel, the smallest size measurement on a web page. It is used to measure the height and width of an HTML container, image, font, and many other measures on the web.
    • em: The HTML tag <em> means emphasize or italic in English. An em in CSS represents the unit for the calculated font size. Think of it as a form of percentage. 1em is the base size of the font. 2em is double the current font size.
    • pt: This means point as in the point-size of a font. It is the height measurement of a font.
    • Percentage: The percentage sign % is used to represent a percentage of the base size such as 80% of the content column width or increase the size of a font 120% of the base size.

Read More »

By Lorelle VanFossen | Posted in Web Design, WordPress, WordPress School | Tags: , , , , , , , , , , , , , , , , , , , , | Comments (4)

WordPress School: HTML Tags

April 12, 2015 – 10:18 am

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.The last lesson was the HTML and CSS Tutorial, another mini-series on Lorelle’s WordPress School. This is a very basic tutorial on HTML and CSS to prepare you for WordPress site customization and WordPress Themes.

This tutorial in the series will help you understand the basics of an HTML tag, the architectural code wrapped around the content on our web site, styled by the CSS.

According to a definition on Webopedia:

HTML Tag: A command inserted in a document that specifies how the document or a portion of the document should be formatted. Tags are used by format specifications that store documents as text files…to mark a section of a document with a formatting command.

In your word processor, when you make a word or phrase bold, codes are embedded in the document that turn on the bold characteristics, then turn on them off. Same applies to document formats such as the margins, fonts, font sizes, subtitles, and so on. Hidden under the surface of your document are the instructions, little bits of code that set the formatting and positioning of the content within. The “Reveal Codes” feature of the once highly popular and respected word processor, WordPerfect, displayed these codes under the hood for the ultimate control of the user on styling the presentation of the document. Eventually, MS Word added the feature, accessible through the Shift+F1 keyboard shortcut. Check a Word document to see the formatting styles for that document.

Screenshot of WordPerfect Reveal Codes Displays the codes under the document to style the content - Lorelle WordPress School.

A web page is no different. HTML tags hold the content in containers, so to speak, with the tag turned on and off around the content, and there is a set of instructions called styles that tell the code how to appear when viewed in the web browser. 

<p>This is a sentence in a paragraph HTML tag with 
a <strong>bold</strong> word.</p>

In this example, a paragraph HTML tag holds a sentence with one word in it set as bold. The paragraph tag opens, the bold tag opens, then closes around the word, then the paragraph tag closes, closing the paragraph. Read More »

By Lorelle VanFossen | Posted in Web Design, WordPress, WordPress School | Tags: , , , , , , , , , , , , , | Comments (3)

WordPress School: HTML and CSS Tutorial

April 10, 2015 – 3:59 pm

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Over the past week we’ve been learning about the web browser, your gateway to WordPress and the web. This was a precursor to the next mini-series of tutorials in Lorelle’s WordPress School free online course. We are going to learn HTML and CSS.

Learning WordPress from the inside out means learning the basic fundamentals of HTML and CSS. HTML is the core architecture of the web. It is the framework that holds content and design. WordPress Themes are built on the architecture of HTML, the styles or “paint” of CSS, and the engines of PHP, JavaScript, jQuery, WordPress Template Tags, and other web programming languages.

According to Wikipedia, HTML as created by Berners-Lee and his team was to allow not just text but graphics to be converted into visual or audible content accessible by anyone.

The first publicly available description of HTML was a document called “HTML Tags”, first mentioned on the Internet by Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML…

HyperText Markup Language is a markup language that web browsers use to interpret and compose text, images and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer’s additional use of CSS.

HTML links and code in web writing.When it comes to learning HTML, treat it like learning a language. Okay, not the whole language. This isn’t an HTML course. We are going to learn the basics to give you a fundamental understanding of how a web page is formed and how to manipulate some basic HTML and CSS to arrange and style the end results. Consider it like learning a vacation language. You will learn just enough to get you through the adventure.

By the time you complete this series of tutorials, you should be able to add inline styles to WordPress posts and Pages, add HTML to the Text Widget and other areas of your site, and tweak your WordPress Theme. When we get to learning more about WordPress Themes, you will be able to speak the lingo and communicate with the natives.

As you go through these next tutorials, work hard to visualize what you are doing, not just do it. HTML works best when you can see what it looks like in your mind as you work on the code because most of the time you won’t be able to see it until you generate the web page in the browser. Working with HTML requires a lot of imagination, which can make it great fun for many and frustration for a few. Breathe through it. I know you can do it. Read More »

By Lorelle VanFossen | Posted in Web Design, WordPress, WordPress School, WordPress Themes | Tags: , , , , , , , , , , , , , | Comments (7)

WordPress School: Bookmarklets and User Scripts

April 8, 2015 – 1:32 pm

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In the last tutorial in Lorelle’s WordPress School free online course covering the web browser, your gateway to the web and WordPress, we covered bookmarks and how to save a web page for later access and reading. In this tutorial, we take bookmarks a little further by exploring browser bookmarklets and user scripts, small but powerful JavaScript programs to extend the functionality of your web browser on the web and with WordPress.

I highly recommend you read the previous tutorial before going forward to learn the basic terminology and functionality of bookmarks and using the bookmark bar.

Browser Bookmarklets

A bookmarklet is a JavaScript saved as a bookmarklet to your bookmark bar or in your bookmark manager. There are bookmarklets you click to activate and others that will activate automatically when you load the web page or website associated with the bookmarklet’s code.

Think of bookmarklets as mini-programs. They contain instructions to take action on the web page you are viewing. For example, if you are using the bookmarklet to send a web page to your Kindle app for reading later, you must click the bookmarklet name on the bookmark toolbar to initiate the action to save the web page in a format and send it from the browser to your Kindle. There are several steps in the process of that sending, each controlled by the program code in the bookmarklet. To do it yourself would involve those steps. Letting the bookmarklet do it for you saves you those steps.

Like bookmarks, bookmarklets can get cumbersome to keep organized, so take care in placing them where you can find them and consider creating folders for them, which may be added to the bookmark bar for drop down selections.

WordPress Press It BookmarkletWhile there are thousands of bookmarklets out there, let’s focus on ones that will help you with WordPress, research and writing for the web, and related topics. Then we will look at user scripts, bookmarklets managed with Greasemonkey or Tampermonkey. While they are basically similar, user scripts require the code libraries and functionality of a userscript manager and go beyond the actions of bookmarklets.

The first and most powerful bookmarklet for WordPress was Press It. Added to your browser bookmarks, you’d select the text on a web page, click the bookmarklet, and it would generate a simplified version of the WordPress Post interface with the selected text in the awaiting post along with a link to the source, ready and waiting for you to add your words. With the ever-changing interface and improvements in WordPress, this was changed to the Press This bookmarklet. Read More »

By Lorelle VanFossen | Posted in Blogging, Blogging Tips, Web Browsers, WordPress, WordPress School, WordPress Tips | Tags: , , , , , , , , , , , , , , , , , , , , , , , , | Comments (2)

WordPress School: Week 10

April 7, 2015 – 6:46 am

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.This past week on Lorelle’s WordPress School the focus was on the web browser, helping you to learn the basics of the most important tool in your arsenal for working with WordPress. Like any tool, the more you learn about how it works, the better you work with it.

I’ve one more web browser post and then we are moving into some basic HTML and CSS, the programming language that instructs a web browser on how to display a website. With the basic elements of web design programming under your belt, we can move forward with confidence through the rest of the course as we move into site customization and WordPress Themes and Plugins.

This week 10 – wow! A great landmark week!

Want to Join Us?

Lorelle WordPress School Tips and Techniques Badge.While this course started the first of February, it is a year-long course designed to go at your own speed. Just because a few people started from the beginning, you are welcome to join at any time.

You do not have to rush to catch up. As one of the participants explained, “you will be ahead of us because you will learn from our mistakes.”

When you complete an assignment, you may share the link from test site in the WordPress School Google+ Community post for that assignment. No matter how far along the others are, and everyone is moving at a different pace, they will be there to cheer you on and help you through the process, as will I.

Come join us by introducing yourself to the other participants and tell us why you are here. We love meeting new folks!

This week is the start of my WordPress college course at Clark College in Vancouver, Washington. CTEC 160 is packed with some amazing people eager to learn web publishing, social media, web design, web development, and web programming. There are some journalism and business tech students in there, too, making for a beautiful mix. They represent the quilt that is the WordPress Community, people from all walks and ages of live brought together with a common interest.

For some, this is a required course in their degree. For others, they are in the class by choice. For you, it is all about choice. The choice to join us, the choice to participate, the choice to use this knowledge on your own site or possibly for another such as a non-profit or employer.

I know what pushes my students forward: grades. Without the grade, they can’t take another step forward on the chess game that is their educational life and career.

What is it that pushes you forward in this process? I’m not hounding you to submit assignments on G+ or in the comments below. There is no grade here. No judgment. No pressure. What keeps you going?

This I know. Whatever it is that keeps you going is what keeps you going in life. It is the passion for living and learning. It is the desire to be better. It is the need to learn how to do it yourself. It is the desire to see things through.

Or maybe a friend or relative is pushing you to do this.

Whatever the reason, keep going. The lessons you learn in this course the most have nothing to do with WordPress. They have to do with you.

Whatever gets in your way has been there before. Whatever pushes you forward has always been there. If you wish to change the obstacles and focus more on the pushes, that is up to you.

Either way, you are welcome here. That is part of the magic of the WordPress Community. We take all, deny few, accept the unacceptable, push out the harmers, and cherish the relationships the find us on our unusual journey through a virtual world.

The WordPress School Google+ Community Discussions and Assignment

Each week, our WordPress School Google+ Community features additional discussions and assignments helping you learn more about how WordPress works and all the ways to use WordPress. This post’s G+ discussion is “Week 10 Summary: Web Browser.” Come join us.

Current additional assignments and discussions held in the Google+ Community include:

If you are new to the Community, join us by by responding to the assignment posts rather than starting your own thread on the assignment discussion. This keeps the discussions together so we can learn from each other as we work on each assignment.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.

By Lorelle VanFossen | Posted in WordPress, WordPress School | Tags: , , , , , , , , , | Leave a Comment

WordPress School: Bookmarks

April 5, 2015 – 5:22 pm

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.This week on Lorelle’s WordPress School free online course we’ve been covering the web browser, your gateway to the web and WordPress. So far in this Web Browser Guide series we’ve covered some web browser history, keyboard and mouse shortcuts, browser tabs, and search operators and shortcuts to help you find WordPress help as well as research topics and citations for your WordPress site.

This tutorial and the next are related. They are about how to:

  1. Preserve web pages for future access or reading
  2. Use browser scripts as bookmarklets and user scripts

What relates the two? Both may use the browser bookmark bar, the area where you may store information and browser scripts to improve your web browsing experience.

Here are some terms to help you get started with these two tutorials:

  • Bookmark: A bookmark is a saved web page. The address is saved in your browser’s Bookmark Manager. If desired, bookmarks may be sorted into folders or groups and subgroups to organize them and make them easier to find. You may also control how and where they appear on your bookmark bar or menu in your browser, bringing one click access to the bookmarks.
  • Bookmark Bar: The bookmark bar is a menu under the address bar in your web browser with saved bookmarks. It may also contain JavaScript for browser-related actions.
  • Send To: Developed even before mobile, the sendto function found in many computers and browsers is the ability to send a web page to another location. The location could be to send the web page from Firefox to Internet Explorer to view how the web page looks in the different browsers. It could be to send the web page link by email, to your phone, from your phone to your computer, to your tablet, and to social media accounts. You may also send the web page to various services and apps for storing for later access and reading.
  • Browser Extension or Add-on: Two synonymous names, extensions and browser add-ons extend the functionality of the web browser, adding features and functions based upon your needs and goals. They are similar to the concept of WordPress Plugins.
  • JavaScript: JavaScript is an object-oriented computer programming language most commonly used on the web to create interactive effects and actions. JavaScript may be saved as a bookmark on the bookmark bar for actions related to the web page you are viewing or open other web pages and web actions.
  • Bookmarklet: A bookmarklet is a JavaScript script saved as a bookmark to the bookmark bar. When clicked, it initiates an action typically associated with the web page currently loaded in the browser screen.
  • Userscript: A userscript/user script is also known as a browser extension or add-on, a written and publicly shared JavaScript presented for easy adding to the web browser. The most common collections and web userscript extensions are used in combination with the userscript managers Greasemonkey for Firefox and Tampermonkey for Chrome.

Let’s start simple with bookmarks and build our way up through the other web browser features. Read More »

By Lorelle VanFossen | Posted in Blogging, Blogging Tips, Web Browsers, WordPress, WordPress School, WordPress Tips | Tags: , , , , , , , , , , , , , , , , , , , , , | Comments (2)

Go Naked: CSS Naked Day April 9

April 4, 2015 – 11:02 am

In 2006, the First Annual CSS Naked Day was held, a tribute to honor web designers, the painters of our websites. I celebrate the holiday most years on this site. Every year on April 9, web developers, designers, and those honoring web design and programming celebrate by removing the styles on our sites for 24 hours.

By turning off the CSS, the design styles of my website, it is stripped down to the HTML architecture. It will look similar to what websites resembled in the earliest days of the web, bare bones architecture holding the content and little else.

The second year, 2007, mine and thousands of other sites disrobed to honor CSS Naked Day. By 2008, there were hundreds of thousands of sites participating.

In 2008, this site went naked and I explained:

I honor the web designers who “walk the walk” and volunteer their time to ensure those standards grow with the web not against. I honor web browser developers who understand the need for standards and thus work with them, also not against them, for our web browsing pleasure, helping designers design well and avoid all the hacks and customizations on a per-browser basis.

I honor the founders of the web, the great minds who looked into the future and said, “Everyone must have access to this.” They meant everyone. Every person on any computer using any method to access the web. In their minds, they wanted to have people on different computer operating systems be able to share data. Today, this has stretched to include access for the blind and visually impaired, disabled, deaf, Mac user, Windows user, Linus user, cell phone, web TV, big screen, little screen, all the various methods the web is accessed so the data can flow both ways with ease.

I also honor those who give so much of their creativity to the WordPress Community, while setting a standard in web design around the world. Thank you to all who understand that a free WordPress Theme is a resume. A business card. A portfolio of your work. By giving, you are showing the world what you are capable of. It’s a way to give back to the WordPress Community which gives so much of its time to volunteering to support WordPress through their work on WordPress Plugins, donating and writing articles for the WordPress Codex, the online manual for WordPress Users, and volunteering their time in the WordPress.com Forums and WordPress Support Forums to help others.

For those who make a living off of the free WordPress blogging platform, I honor you for giving back to that which helps you pay your rent or mortgage. The WordPress Community is a fantastic free school of education for coders, programmers, designers, writers, and hackers. Thank you for volunteering your time and skills towards the improvement of WordPress and WordPress development.

My causes at the time was to break down one of the last barriers on the web: language. That is still a rousing cry of mine, but we are closer than every to being able to sit in our homes or offices in our language and read the words of others written in their language and translated instantly into ours.

Google Chrome has translation built into their browser. There are Firefox extensions that provide similar translation options, but it requires manual action rather than an integrated, seamless experience.

In addition to honoring the designers who make our sites look beautiful and those behind web standards and laws that ensure the web remains open and accessible to all, in spite of narrow-minded governments, politicians, and corporations determined to control such access and transparency, let’s make the web truly open and accessible to all through browser-activated translation.

How to Go Naked on CSS Naked Day April 9

If you would like to join me naked on the web, here are the instructions.

First, write and publish a post warning people that you are changing your WordPress Theme to go naked for CSS Naked Day. The web is important to all of us, and the design of the web and our website is critical to our needs as well as the needs of our readers and visitors, helping to visually direct them to the most critical content on the site. Take a stand and tell the world why you think it is important to stand naked for 24 hours to remind us how important access to the web is, and how important this cause is to you.

Please include a link to the original post by Dustin Diaz and this and any other explanations of the annual event. Jens Oliver Meiert sppears to have taken over the reigns from Dustin to keep the annual event alive. There is also a CSS Naked Day Google Group you can join to stay updated.

  • WordPress.com Not Premium: Unfortunately, unless you have purchased the Premium package for Custom CSS, your option is to switch to a minimalist WordPress Theme and not customize it in any way, just strip it down to the barest essentials. Be sure to remove the header art and set it to just text for the site title, and remove all background color or set it to white. I recommend the following WordPress Themes from the WordPress.com Free Themes Directory. They are still styled, and a bit minimalist, but could be a dramatic change from your current Theme:
  • WordPress.com Premium: If you have the CSS Extra as part of the Premium services on WordPress.com, do the following, taking notes on everything you do as you go:
    1. Go to WP-Admin > Themes > Customization > CSS
    2. Select all and copy or cut the CSS instructions
    3. Paste them into a TEXT EDITOR and save the file where you can find it within 24 hours or so
    4. Delete all of the styles in the CSS form and hit SAVE AND PUBLISH, and your site should be stripped bare of custom styles set by the CSS
    5. Go to the Header, Colors, Background, and other Theme settings and set them to the default or blank, taking notes on the changes you’ve made, and hit SAVE AND PUBLISH. This should reset your Theme back to the basics if the CSS styles didn’t.
    6. 24 hours later, follow your notes and restore the header, background, colors, etc., and the CSS file, and hit SAVE AND PUBLISH. Your site should be restored. No widgets and content customization should be impacted.
  • Self-hosted or Managed WordPress: There is a CSS Naked Day WordPress Plugin by Aja Lapus and other manual techniques, including the basics:
    1. Go to the CSS file for your active WordPress Theme through WordPress. Copy and save the CSS instructions and delete them from the file so it is empty, and save it.
    2. Or access your site through FTP and rename your stylesheet for the active Theme from styles.css to styles.bak. If you are using a Child Theme, do the same with the parent Theme if the styles are not cleanly removed from the site. Rename them back when the event is over.
    3. Or use one of the blank WordPress Themes created just for the event.

Consider joining me to honor the power of Cascading Style Sheets and the visual illusion of the web, as well as the tremendous work web designers and developers do to make our web experience easier.

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.

By Lorelle VanFossen | Posted in Announcements, Blogging, Web Browsers, Web Design, WordPress, WordPress News | Tags: , , , , , , | Comments (1)

WordPress School: Web Browsers and The Search

April 3, 2015 – 12:34 pm

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Search is used in WordPress for many different purposes as you prepare, develop, implement, and launch your website, and as you continue to maintain and publish on the site. This tutorial will help you understand how to search within a web page with the web browser, search within a WordPress site, and provide helpful tips on how to search the web in general to help you with your WordPress site.

In Lorelle’s WordPress School, please remember that the underlying motto I keep in mind as I present each of these tutorials is how to make your life simpler, faster, and easier when it comes to WordPress, and that spill out into everything you do on the web. Finding content to blog about on your WordPress site is a part of your web experience as well. Anything you find on the web could be a source of inspiration. How you move it from the source of inspiration to a WordPress post is a part of this topic of how to search within the browser and the web.

Another part of searching on the web is saving what you find for later. While it is nice to assume we can act and respond to everything we discover through our web interactions, some things must be set aside for later review. Some discoveries also take a while to percolate in your brain to become content of value. I’ll cover a little of that in this tutorial as well.

We begin with some basic search techniques, some you are probably familiar with, and some that might be new to you. Read More »

By Lorelle VanFossen | Posted in Blogging, Blogging Tips, Web Browsers, WordPress, WordPress School, WordPress Tips | Tags: , , , , , , , , , , , , , , , , , | Comments (5)

WordPress School: Browser Tabs

April 1, 2015 – 11:51 am

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In my WordPress college courses, we make it a habit to have a minimum of four tabs open in the web browser before class starts, ready to start jumping into WordPress. I equate this to having my notebook of paper and pen ready to go when my teachers started teaching in school. The three tabs are:

  1. Email
  2. Class Notes
  3. WordPress site backend/Admin
  4. WordPress test site front end

Depending upon the exercises in the class, additional tabs may be opened for quick access to the information they need to complete the tasks.

For those working on their own laptops, and for you, this process will be even easier and faster by learning about how to pin tabs to preserve them from session to sessions, and how to customize the browser to restore the tabs open during your last session.

In this tutorial on the web browser and WordPress in Lorelle’s WordPress School free online course, we will explore the power of browser tabs, one of the greatest feature inventions in the history of the web browser.

What are Browser Tabs?

Originally, if you viewed more than one web page at a time, more than one browser application program had to be running. That ability is still alive and it is referred to as opening a web page in a new window.

What this meant was that you have two full versions of the program running at the same time, or three, or four, or five, or ten, and each one consumed massive resources on the computer. For the user, it meant playing hide and seek with all those open windows, not sure which one you’d just been to and which one you needed.

Instead of opening the web page in a new window, browser tabs meant you could open a web page in a new tab within the program, not start another version of the program. Tabs had order in a lineal fashion, left to right, oldest to youngest opened. It also gave us the ability to easily open, and load web pages in the background and continue reading where we were on the first web page, making our browsing, or surfing as it was originally called, experience faster with less wait times and less burden on our computers.

Screenshot of Browsers - Browser Tabs in Firefox - Lorelle WordPress School.

With two tabs next to each other, it took little or not time for most of us to develop a two tab preview method for working with WordPress, again, saving us time on the wait for a web page to reload and all the opening and closing of web pages as we move around WordPress. Read More »

By Lorelle VanFossen | Posted in Blogging, Blogging Tips, Web Browsers, WordPress School, WordPress Tips | Tags: , , , , , , , , , , , , , , , | Comments (2)
Follow

Get every new post delivered to your Inbox.

Join 23,183 other followers