Tag Archives: CSS

Testing WordPress themes: ‘Stylesheet is missing’ error

public domain artworkWe at Nashville SEO & Web Content manage dozens of blogs for clients, many on rather low budgets — so we are constantly on the lookout for the very best free WordPress themes we can find. I am investing significant time and effort this evening in the testing of dozens of free WordPress themes collected from various sites over the last few months.

One of the most common problems users encounter when testing new WordPress themes is the missing stylesheet. When this happens, the theme is listed at the bottom of the Manage Themes page (under Appearance -- Themes in the WordPress administration backend) in a list of “Broken Themes” with the description, “Stylesheet is missing”.

This issue is explained very well in the knowledgebase of Envato’s support section under “My WordPress Theme isn’t working, what should I do” in the section called “Common ‘Broken Theme’ and ‘Stylesheet Missing’ WordPress Issues”.

Luckily, this issue is almost always due to a very simple circumstance which is easily corrected. In a nutshell, many zips (compressed files & folders) contain an extra directory (folder) layer which often tricks WordPress into believing the style sheet isn’t there, when it really is there. It’s just buried too deeply within the theme folders.

For instance, let us suppose you downloaded a WordPress theme called Brown. The zip file you downloaded is called brown-ver-1. When you unzip the brown-ver-1 folder, you see that it contains a folder called brown. Inside the brown folder are the actual files comprising the WordPress theme. You must get rid of that extra layer before you upload the theme to WordPress for testing. That is, when you open the final package there should not be an extra directory layer before you see the style.css file and all the other files that make up the applicable WordPress theme.

Correct: brown — style.css
Incorrect: brown-ver-1 — brown — style.css

Exactly how one corrects the issue depends on which method is being used to upload new themes to the WordPress installation on the web server.

The two main methods are:

1. Using WordPress upload process
2. Using an FTP client

I strongly prefer to use an FTP client to move files back and forth between my system and the web server. I cannot imagine taking the extra time to use the built-in WordPress uploading process. The two categories of uploads on which much time can be saved with an FTP client are images and themes.

Results of testing: Will finish this later

Successful themes
These themes look great and work well as soon as they are activated; they require little or no implementation time.

  • DailyPost 1.0.5 by wplook

Themes requiring setup

  • Business lite 3.1.19 by CyberChimps WordPress Themes
  • BizWay 1.5 by InkThemes.com

Themes failing preview

  • Yasmin 1.0.0

Resources: Testing WordPress themes: ‘Stylesheet is missing’ error

This post was started on Sunday, September 09, 2012

Free XHTML/CSS templates, free WordPress themes (Aug 2012)

structureHere’s another batch of documented research results — this time, from well over two hours of searching for high-quality, free WordPress themes and CSS/XHTML layouts today. I was rather impressed with some of the surprisingly good themes and layouts.

However, with HTML5 out, those who still prefer XHTML layouts must be more discriminating; most of the latest non-WordPress layouts are HTML5 – and from what I know so far, I still prefer XHTML to HTML5.

I scored more free responsive WordPress themes with real potential today than anything else. (NOTE: Responsive designs are those which do not break down even with major, device-dependent changes to a site’s display width — meaning a single design will work on a variety of devices, from a large monitor to a small-screened smartphone.)

The award for best new resource site found today goes to Fresh Design Web, where many wonderful free WordPress themes were found and downloaded from pages like 36 Best Free WordPress Themes with Responsive Layout.

I noticed many other resource collections with real potential for the WordPress blogger with an eye for freebies; more on those later, perhaps.

(Where does all the time go?)

Resources: Best free XHTML/CSS templates 2012

Favorite individual designers offering freebies

The web designers in this section deserve special recognition for making FREE quality CSS/XHTML layouts available to everyone for many years. Many thanks to all of you; your offerings helped me learn web development in the early 2000s.

Free WordPress theme collections

Free WordPress theme designers

Possibly good free responsive WP themes
http://www.wpzoom.com/
Possibly good free responsive WP themes
http://premium.wpmudev.org/
Possibly good free responsive WP themes
http://www.getskeleton.com/
PressCoders
http://www.presscoders.com/designfolio-setup/

Possible sources for free XHTML/CSS templates

CSS Templates Market
http://csstemplatesmarket.com/freecsstemplates/
not very promising

This post was started on Tuesday, August 14, 2012

CSS testing: Rotating an image via CSS (Portrait-landscape)

Testing…

NOTE: This CSS image-rotating test uses content from the post, Wonders of the Universe: BBC documentary series on cosmology, astronomy on the main brain-dump blog.

Wonders of the Universe - imagesThis post has just gotten started; now watching the first episode in its entirety after already being blown away by the first third of it as well as by watching A Cosmological Fantasia — a short film based on art and photography from BBC’s must-see Wonders Of The Universe (with music by Timo Baker).

Resources: Using CSS to rotate an image

Colored text: Add a dash of color to your blog content

This is a simple resource any blogger can use to add a dash of color to otherwise drab text (textual content) — especially for larger text, such as titles and subtitles, where color shows up better. Adding color to your titles, subtitles, etc. is quick and simple as long as your blogware allows you to edit in HTML view or mode; most platforms (e.g., WordPress) allow this. [ I get it; take me to the list of color codes ] [ Lighter colors for backgrounds ]

Here’s how you do it! (If it makes no sense, then read on… it’s explained simply.)
HTML code example for a red H3-level title:

<H3 style=”color:#FF0000″>

In general, virtually all blogging, website, coding, and programming platforms have two modes for editing content: A visually oriented mode and a coding-oriented, text-based mode.

WordPress allows users to create and edit content (for blog posts and pages) in either Visual mode or HTML mode. Most geeks, technically proficient, and power users prefer to edit in HTML mode. Most others probably use Visual mode, which is a type of content presentation often referred to as WYSIWYG (stands for What You See Is What You Get; pronounced wizzie-wig).

In HTML, headings, or headers – HTML terminology for what most would call a title or a subtitle – are indicated by being enclosed within "H" tags; therefore, the HTML code for a normal H1 heading title looks like this:

<H1>Title goes here</H1>

The above line of HTML code produces this:

Title goes here

The HTML code for a heading tag to display text in the color of your choice (for now, red) looks like this:

<H2 style="color:#FF0000">My red title</H2>

When the H2 code snippet above is displayed on a web page, it looks like this:

My red title

Selected HTML color codes

Antique white 3: #CDC0B0
Azure 3: #C1CDCD
Bisque 3: #4A708B
Bisque 4: #8B7D6B
Burnt orange: #CD6600
Cadet blue 4: #53868B
Chocolate 4: color:#8B4513
Coral 3: color:#CD5B45
Coral 4: color:#4A708B
Cornsilk 3: color:#CDC8B1
Cornsilk 4: color:#8B8878
Cyan 4: color:#008B8B
Dark green: color:#006400
Dark olive green: color:#556B2F
Dark orange 4: color:#8B4500
Dark red: color:#8B0000
Dark salmon: color:#E9967A
Dark sea green: color:#8FBC8F
Dark sea green 4: color:#698B69
Dark slate blue: color:#483D8B
Dark slate gray: color:#2F4F4F
Dark slate gray 4: color:#528B8B
Deep sky blue 4: color:#00688B
Dodger blue 3: color:#1874CD
Firebrick: color:#B22222
Firebrick 4: color:#4A708B
Honeydew 3: color:#C1CDC1
Honeydew 4: color:#838B83
Indian red: color:#CD5C5C
Indian red 4: color:#8B3A3A
Lavender blush 3: color:#CDC1C5
Lavender blush 4: color:#4A708B
Light blue 3: color:#9AC0CD
Light blue 4: color:#68838B
Light cyan 3: color:#B4CDCD
Light cyan 4: color:#7A8B8B
Light salmon 3: color:#CD8162
Light salmon 4: color:#8B5742
Light sky blue 3: color:#8DB6CD
Sky blue 3: color:#6CA6CD
Light sky blue 4: color:#607B8B
Light steel blue 3: color:#A2B5CD
Sky blue 4: color:#4A708B
Light steel blue 4: color:#6E7B8B
Magenta 4: color:#8B008B
Maroon: color:#B03060
Medium orchid 3: color:#B452CD
Medium orchid 4: color:#7A378B
Medium purple 3: color:#8968CD
Medium purple 4: color:#5D478B
Medium sea green: color:#3CB371
Medium turquise: color:#48D1CC
Midnight blue: color:#191970
Misty rose 3: color:#CDB7B5
Misty rose 4: color:#8B7D7B
Navajo white 3: color:#CDB38B
Navajo white 4: color:#8B795E
Navy blue: color:#000080
Orange red 3: color:#CD3700
Orange red 4: color:#8B2500
Orchid 4: color:#8B4789
Pale green 3: color:#7CCD7C
Pale green 4: color:#548B54
Pale turquoise 3: color:#96CDCD
Pale turquoise 4: color:#668B8B
Pale violet red 3: color:#CD6889
Pale violet red 4: color:#8B475D
Peach puff 3: color:#CDAF95
Peach puff 4: color:#8B7765
Plum 3: color:#CD96CD
Plum 4: color:#8B668B
Purple 3: color:#7D26CD
Purple 4: color:#551A8B
Red: color:#FF0000
Red 2: color:#8B0000
Red 3: color:#CD0000
Red 4: color:#8B0000
Royal blue 3: color:#3A5FCD
Royal blue 4: color:#27408B
Salmon 3: color:#CD7054
Salmon 4: color:#8B4C39
Sea blue: color:#4A708B
Sky blue 4: color:#4A708B
Sea green: color:#2E8B57
Sea green 3: color:#43CD80
Sea green 4: color:#2E8B57
Seashell 3: color:#CDC5BF
Seashell 4: color:#8B8682
SGI light blue: color:#7D9EC0
SGI salmon: color:#C67171
SGI teal: color:#388E8E
Sienna: color:#A0522D
Sienna 2: color:#EE7942
Sienna 3: color:#CD6839
Sienna 4: color:#8B4726
Sky blue 3: color:#6CA6CD
Sky blue 4: color:#4A708B
Slate gray 2: color:#B9D3EE
Slate gray 3: color:#9FB6CD
Slate gray 4: color:#6C7B8B
Snow 3: color:#CDC9C9
Snow 4: color:#8B8989
Spring green 4: color:#008B45
Steel blue: color:#4682B4
Steel blue 3: color:#4F94CD
Steel blue 4: color:#36648B
Tan: color:#D2B48C
Thistle 2: color:#EED2EE
Thistle 3: color:#CDB5CD
Thistle 4: color:#8B7B8B
Tomato 2: color:#EE5C42
Tomato 3: color:#CD4F39
Tomato 4: color:#8B3626
Wheat 1: color:#FFE7BA
Wheat 2: color:#EED8AE
Wheat 3: color:#CDBA96
Wheat 4: color:#8B7E66

A few light colors; suitable background colors

Many of the above colors are light enough to serve well as background colors — perfect for sectioning off small sections of text, such as asides, notes, digressions, etc.; they are easily used with blockquotes. As above, many more suitable colors can be found on Somacon’s page of HTML color codes.

Antique white 1: #FAEBD7
Antique white 2: #FFEFDB
Antique white 3: #CDC0B0
Azure 1: #F0FFFF
Azure 2: #E0EEEE
Azure 3: #C1CDCD
Bisque 1: #FFE4C4
Bisque 2: #EED5B7
Bisque 3: #CDB79E
Cornsilk 1: #FFF8DC
Cornsilk 2: #EEE8CD
Cornsilk 3: #CDC8B1
Dark sea green 2: #B4EEB4
Dark sea green 3: #9BCD9B
White smoke: color:#F5F5F5
Yellow: color:#FFFF00

#FEE0C6

Curious? Additional details about headings, HTML, and CSS

Here are a few of the details which I omitted from the above explanation in order to keep things simple for everyone, to avoid getting too technical, etc.

HTML includes six (6) standard header sizes; from largest to smallest, they are H1 to H6. The next few lines are what the standard H1 to H6 headers look like on this blog:

H1 is the biggest.

This is an H2 heading.

Next is the H3 heading.

Then comes the H4 heading…

… followed by an H5 heading.
Last & least is the H6 heading.

If you are new to HTML, then the primary question at this point is probably something like this:

Where is the code with all the variables necessary for things like the font type (e.g., Arial, Franklin Gothic Book, Times New Roman, etc.), the font size (e.g., 10, 12, 14, etc.), the colors, what links look like and what happens when you click on them, the width of the website, etc.? When I use the browser’s feature to look at the original source code of a web page, I don’t see variables like BACKGROUND COLOR, FONT FACE, attributes of forms, and so much more… How do our web browsers know what colors and fonts to use?

That’s an excellent question which shall serve as the segue into CSS: the Cascading Style Sheet. For years now, the web standard has called for the separation of presentation and content.

Presentation: Appearance; just about anything having to do with the way a site or blog looks on the screen: background color, text color and size, font stack, link color, link action, width of the webpage, the attributes of the headers H1 to H6, etc.)

Content: The actual, bare-bones textual content; the words that comprise the content of a site or blog

In the old days, the content — PLUS all the hundreds or thousands of variables used to instruct the web browser how to render the content onto the screen (colors, fonts, widths, heights, etc.) was all mixed together to form an great big ugly mess of HTML code which could be very time-consuming to update. But now — with CSS — things are much better for the webmaster!

Resources: Add a dash of color to your blog content using colored text

Code snippets

To set background color for blockquote section
<blockquote style="background-color:#C6E2FF">

NOTE: Code snippets moved to separate post; see HTML code snippets for WordPress blogging

Removed content

<H1 style=”color:#6C7B8B”>

Thursday, April 19, 2012