Tag: CSS

Posted on in Communication

Blog 2014: Adding social media links

Where I learned how to add social media buttons, and where I found them

Today, I added custom social media links to my secondary menu, which appears on the left sidebar in the Twenty-Fourteen WordPress theme I’m using now. I did this because Twenty-Fourteen doesn’t have social links in the theme, and I wanted them near the top of my blog layout. To learn how to add them, I started by reading the WordPress Support article “Add Social Media Buttons to Your Sidebar or Footer.” When I did a Google Image search of ‘free social media icons’, as suggested in the support article, I found my favorite icon set at GraphicsFuel: 20 Popular Social Media Icons (PSD & PNG). Thank you, GraphicsFuel!

What code I used

I used the HTML shown on the support article, but I amended it with a bit of CSS to put some padding (space) to the right and bottom of the buttons so they didn’t look stuck together. While I was at it, I took the width and height properties out of the HTML and put them into the CSS where they belong (since they are style, not structure). Here is a sample of the style code I added to the img element for my customization:

style="width:35px;height:35px;padding-right:5px;padding-bottom:5px;"

How it looks today

Of course things will change with time as I change themes or widgets, but here is what my blog looks like as of this writing, with the new social media button links I added to the left sidebar:

A screenshot of the front page of my blog on July 7, 2014
A screenshot of the front page of my blog on July 7, 2014

Why I wrote this

I always like to share what I learn with others who might benefit, and I like to give credit where it’s due. I hope you find it helpful. Please let me know.

Posted on in Communication

WordPress themes not showing author bylines explained

The other day, I expressed my concern on the WordPress Support Forums that my author bylines were gone from my posts in this blog using the Twenty Twelve theme. Today I got a response from staff explaining that, because of feedback from the WordPress community, they started using CSS (the style markup that composes the themes) to hide the author byline on some, but not all, themes. This makes the byline invisible in the normal, theme/CSS-enabled view, but if you view the page without the theme/CSS you will see the bylines.

Screenshot courtesy of Josh, a WordPress Happiness Engineer
Screenshot courtesy of Josh, a WordPress Happiness Engineer

This means the search engines can read the bylines and verify authorship. I checked this with Google’s Rich Snippet Testing Tool and found the search engine did, in fact, read my byline and verify my authorship. This is good to know!

For anyone who knows HTML and CSS and is curious, here is the HTML:

<span class="by-author"> by <a title="View all posts by Daniel Greene" href="https://danielgreene.com/author/danielgreene/" rel="author">Daniel Greene</a></span>

And here is the CSS that does the trick:

.by-author&nbsp;{display:&nbsp;none;}

If you are interested in viewing the code on your own blog, there are various ways to view source code.

Posted on in Communication

I want a Chromebook; in fact, I want a Chromephone. Easy on the OS, and hold the apps.

The coming of the Chromebook–the web-only netbook that boots in less than ten seconds–has me thinking how nice it would be if my Android phone booted up in 10 seconds instead of 60. But if it did, it wouldn’t be an Android phone, would it? It would be a Chromephone, and that’s all right with me.

If the telephony could be worked out, I don’t see why a phone couldn’t be made to run on a thin, browser-like OS that accesses almost all its content on the Cloud. As HTML5 is helping web content become more app-like, and as more of users’ content is stored online, there may soon be little need for onboard apps at all. We may be doing everything we need with Web apps. This may be the end of the OS as we know it. No more bloated platform-dependent apps. Microsoft never was a trailblazer, and Apple isn’t blazing trails anymore, either. Apple is announcing iCloud and OS X Lion tomorrow, and I’d say they’re just playing catch up. Microsoft say Windows 8 is going to have an HTML5 panel screen instead of a desktop, and by the time it comes out in a year or so, it will be as old news as Windows 95 = Mac 84.

As someone who embraced platform-independent Web development before it was popular, I am thrilled to see that HTML and CSS have now taken us to the point where just about any app can be a Web app. Pretty soon, there won’t be a need for five different Facebook apps; there will just be Facebook as a web app anyone can use the same way on any device. You won’t have to wait for your favorite Website to come out with an app for your device’s operating system, because web standards and powerful web functionality will make the question of device and OS moot.

I’m already doing just about everything online with the Chrome browser now except for editing photos and videos and opening Office documents on my iMac. The only thing I do on my laptop other that the Net is Microsoft Office if I have to, and I’m already using that less as I use Google Docs more. I’m ready to move away from bloated software and over to something simple, fast, and standard. Chrome is the OS of today.

Related Posts

Posted on in Communication

Transforming My Site into a Blog

Over the last few days, I have transformed danielgreene.com into a blog. I resisted doing a blog for quite a while for several reasons. Blogs can take a lot of time to write and maintain— especially when there are a lot of comments to monitor. I didn’t know anything about the software I would need to create one. Most important, I was afraid that once I got started, there would be no stopping me from saying absolutely everything on my mind. I was afraid my candor might get me into trouble.

Then I had a talk with Will Pate, Community Ambassador for the Flock Browser, who said, “A professional blog is a great way to gain recognition in your profession.” It suddenly dawned on me— of course I don’t have to say everything on my mind! Of course it doesn’t have to be personal! A blog can be professional! Sure, why not? That one sentence from Will was all I needed to hear to open my mind. I had already been wanting a more interactive “Web 2.0” website. I wanted people to comment on my posts, comment on each other’s comments, blog about my blog, add me to their extended friends’ network, add “trackback” links to my blog, etc. Now the question was: what sort of blogging system will I use to “power” my blog?

Well, I noticed that Will had a web site with his name as the domain just as I do, and I noticed that his was “powered by WordPress.” I checked into it, and found out that my host, pair Networks, supports WordPress on its servers. Other than the few extra dollars I have to pay pair Networks per month to upgrade my account, WordPress is free. I also chose it because it allows me to have danielgreene.com host the blog natively, rather than having to host it somewhere else like BlogSpot or LiveJournal. I like the fact that it is customizable, and I don’t need to have any navigation bar at the top advertising the blogging system.

Now, when I go to YouTube or Flickr, I can actually click on those “Blog This” links and blog them. And I can right-click in Flock to “Blog This” anywhere on the Web!

Posted on in Communication

CSS Font Properties Test

A Demonstration of CSS Font Properties

Property Value Display in Your Browser
Property Value Display in Your Browser
font-family serif The quick brown fox jumps over the lazy dog.
sans-serif The quick brown fox jumps over the lazy dog.
cursive The quick brown fox jumps over the lazy dog.
fantasy The quick brown fox jumps over the lazy dog.
monospace The quick brown fox jumps over the lazy dog.
font-style normal The quick brown fox jumps over the lazy dog.
italic The quick brown fox jumps over the lazy dog.
oblique The quick brown fox jumps over the lazy dog.
font-variant normal The quick brown fox jumps over the lazy dog.
small-caps The quick brown fox jumps over the lazy dog.
font-weight normal The quick brown fox jumps over the lazy dog.
bold The quick brown fox jumps over the lazy dog.
bolder The quick brown fox jumps over the lazy dog.
lighter The quick brown fox jumps over the lazy dog.
100 The quick brown fox jumps over the lazy dog.
200 The quick brown fox jumps over the lazy dog.
300 The quick brown fox jumps over the lazy dog.
400 The quick brown fox jumps over the lazy dog.
500 The quick brown fox jumps over the lazy dog.
600 The quick brown fox jumps over the lazy dog.
700 The quick brown fox jumps over the lazy dog.
800 The quick brown fox jumps over the lazy dog.
900 The quick brown fox jumps over the lazy dog.
font-size
<absolute-size>		 xx-small The quick brown fox jumps over the lazy dog.
x-small The quick brown fox jumps over the lazy dog.
small The quick brown fox jumps over the lazy dog.
medium The quick brown fox jumps over the lazy dog.
large The quick brown fox jumps…
x-large The quick brown fox…
xx-large The quick brown…
font-size
<relative-size>		 larger The quick brown fox jumps over the lazy dog.
smaller The quick brown fox jumps over the lazy dog.
font-size
<length>
(arbitrary
examples—
non-scalable
values)		 12pt The quick brown fox jumps over the lazy dog.
1pc The quick brown fox jumps over the lazy dog.
72pt The…
1in The…
10mm The quick…
1cm The quick…
12px The quick brown fox jumps over the lazy dog.
font-size
<length>
(arbitrary
examples—
scalable
values)		 1em The quick brown fox jumps over the lazy dog.
1.2em The quick brown fox jumps over the lazy dog.
1ex The quick brown fox jumps over the lazy dog.
1.2ex The quick brown fox jumps over the lazy dog.
font-size
<percentage>
(arbitrary
examples)		 100% The quick brown fox jumps over the lazy dog.
120% The quick brown fox jumps over the lazy dog.
150% The quick brown fox jumps over the lazy dog.
225% The quick brown…
338% The quick…

Using the Shorthand font Property

{ font: 150% serif; }

The quick brown fox jumps over the lazy dog.

{ font: italic bold 100%/200% "Lucida Sans", Verdana, sans-serif; }

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. (Lines repeated to demonstrate the extra line-spacing, or “leading.”)

{ font: normal small-caps large Braggadocio, "Broadway BT", fantasy; }

The quick brown fox jumps over the lazy dog.

{ font: lighter x-large "Lucida Calligraphy", "Brush Script MT", "English 157 BT", cursive; }

The quick brown fox jumps over the lazy dog.

Daniel Greene originally published this page on danielgreene.com as fontprop.html in February 1998.