Miscellaneous

This page has id 214

I am going to experiment with javascript to try and display a “popup” alert box:

I have chosen a different template for this page, which displays my lefthand sidebar instead of the righthand one which is on other pages. This contains a menu with just the categories, added to the sidebar on the widgets page (using the “custom menu” widget which is included with the WordPress installation). Some themes include a built-in list of categories at the top of the page, or if you have multiple menu locations you could dedicate one to categories, but the custom menu option enables you to display them if these options are not included in your theme of choice.
I have also added the “Tag cloud” widget which is also included as a default. Below this I have added the same feature, this time by inserting some php code into the sidebar.left.php file. Just experimenting with this as I am learning!
On this page I have added a background image with no repeat. As it is a small image it just appears in the top left hand corner. This would be an alternative way of having a logo on each (or selected) page(s). The image should be sized to fit in the gap, before uploading to the Media Library. I have also added a background image (with x-and y- repeats) to id “wrapper”, which is this part with the text in it. In some themes this section may have a different name, inspect element to find out.

Here is a bunch of text in a div which I have given a background image in the style sheet. It does show that one must be very careful in choosing an image for this purpose as it is very difficult to guarantee that the text is readable. Here is a bunch of text in a div which I have given a background image in the style sheet. Here is a bunch of text in a div which I have given a background image in the style sheet. Here is a bunch of text in a div which I have given a background image in the style sheet.

Here is a demonstration of the “abbr” tags for abbreviations / acronyms. If, for example, I wanted to use the acronym for my company, Caledon Web Services, i.e. CWS, then using the abbr tag means that screen reader programs will not try to pronounce the abbreviation as a word. If you include the full name in the “title” property within these abbr tags, as I have here, then it is displayed when the user’s mouse hovers the acronym, which can be useful for all users!The style of the text in the title box is determined by the browser and cannot be changed

“span” is used to apply CSS styling,using a class, to a span of text rather than a block of text. This means it does not disrupt the natural flow of text. Here is an example of the class “highlight” applied to some text in here. If it had been applied using a “p” tag it would have been a separate paragraph like

this text

is. A class can also be applied to other elements such as: “em” to highlight
this emphasized text, or “strong”, to highlight this bold text.

There are about 30 or so block level elements, many quite obscure. The more common ones are div, p, h1-h5, address, article, aside, footer, pre, blockquote, section,ol, ul, hr, dd, header, table …….

The kind of style class where the selector contains only a class name is referred to as a generic class selector, because it can be applied to any tag. Classes which are only intended to be used with a specific element can be named/selected accordingly in the CSS.
For example: p.highlight {…….}, or img.large {…..} would be used only with a paragraph tag or an image tag, respectively.

You can also use an attribute selector (in fact the class and id selectors are special cases of these). To select all photos with the word cat in the title, the selector would be: [title~=cat]. See notes in the CSS about this.

Here is a link back to the Link Styles page which I am using to demonstrate that a pseudo class can be applied just to one page. In this case I have changed the a:hover pseudo class for this page so that the link appears pink when you place the mouse over it. Other links on this site are governed by the default colouring styles

Here I am adding some text with which I have not used any tags. I want to see what WP adds itself.

I put a couple of what we used to call “carriage returns” above this sentence to see if that made any difference. So I’ve just had a look at the result and it turns out that WP put each of these paragraphs which I made using the return key inside p tags.WP put the whole of what is in the content window inside div tags, with id post-entry.

This text is in a block element (or box), in this case a div, which has a class called boxsample1. It has styles to add a margin (outside the border) and padding, which is essentially a margin which is between the border and text inside the box. Styling for this class includes rounded corners, a drop-shadow and a fixed height of 200px. Margins and padding can be different on each side (top, right, bottom, left) if desired and there are various shorthand notations depending on how many different values are specified. Because I have specified the height, if I write too much text it will just overflow in a very unattractive manner, as we see here below. For this reason, a height is not usually specified but rather is varied automatically according to the amount of content. This example comes from a site where the priority was to have several uniform-height boxes and the content was varied to fit inside.

By default, a block element is sized to fit inside the containing element. If you set a width specifically, that defines the width of the content alone (by default). The padding, borders and margins get added outside this width. The default can be overridden so that the “width” is width on the outside, with content, padding, borders and margins inside. This is done by replacing box-sizing:content-box; with box-sizing:border-box;
It is best not to use this override as it is not as well supported, but it is as well to know of this possibility as it may sometimes be set in the CSS for a theme which can be very confusing!

With screen sizes varying so widely (between about 640 and 1280 pixels) from mobile devices all the way up to desktop monitors, it is usually preferable to set box widths using a percentage (of the containing element) rather than an absolute width. However, some features (like a table) might just not work when shrunk down below a certain width. In this case they would be better navigated by scrolling left and right than be shrinking or fracturing. Other features, e.g. a photo would not look good when expanded beyond a certain size. Therefore setting minimum and maximum widths is advisable….as I have done here with the class boxvar. For a browser window narrower than the min-width the element stops shrinking and a horizontal scroll bar appears at the bottom of the window. Then the user can scroll left and right. This is also how a fixed layout width acts.

In html5 new “semantic layout” tags were added. Their names describe the type of information contained. They are header, nav, aside, article and footer. In WordPress you do not explicitly write these tags as each of these types of content are normally entered into the appropriate WYSIWYG box. WordPress adds the appropriate tag which can be viewed by inspecting the element, not from the back-end. It appears to still use div id=”header” (note that synonyms to “header” are “branding”, “masthead”, “banner”), div id=”nav”, etc rather than the semantic tags themselves. This is probably because they are not supported by older browsers yet.

Using ancestor and descendant selection rules allows you to apply rules to very specific elements:

for example adding a pink background to just paragraph elements like this one, within div elements with the class boxvar

Menus

It is important to include a “Title Attribute” for each of your menu tabs. This generates an “alt” entry for the tab and may improve SEO……..although I cannot see the alt tag anywhere when I inspect element.