Archive for the ‘HTML and CSS’ Category

Using open source fonts on your web page.

Monday, June 10th, 2019

I saw a font that might be fun on a friend’s national parks website so I wrote up some notes to help them install and use it.

You can put the NationalPark folder in the root of your site. i.e. the same place that the wp-admin, wp-content, … folders are located or if you think you’ll want to use multiple fonts, create a font folder in the root.

Then add these lines to the end of your CSS file that is located in the theme that you are using. He’s using twentynineteen. It will be a different folder if you aren’t using the twentyninteen style.

/wp-content//themes/twentyninteen/style.css


@font-face {
 font-family: "NationalPark";
 src: url("/fonts/NationalPark/NationalPark-Regular.otf");
 }

.NationalPark {
  font-family: NationalPark;
}

@font-face {
 font-family: "NationalParkBold";
 src: url("/fonts/NationalPark/NationalPark-Heavy.otf");
 }

.NationalParkBold {
  font-family: NationalParkBold;
}

Call it with

<h2 class='NationalParkBold' style='font-size: 400%;'>

Like This

or

<p class='NationalPark'>

You can also use it in paragraphs, but it doesn’t have the impact like it does with headers. This paragraph is not much different than normal san serif text.

Centering YouTube Videos

Monday, January 23rd, 2017

WordPress automatically displays YouTube videos when you put the shared link into a post. (Leave a blank line before and after the link.)

Sometimes you want to center the video and this code will do it.


<iframe style='margin: 0 auto; display:block' width='560' height='315' src='https://www.youtube.com/embed/xnBAwUV7abA' frameborder='0' allowfullscreen></iframe>
<p class='caption'>Bruiser and Bird</p>

Bruiser and Bird

If you use the centering trick, the video won’t display in preview mode.

You can have the video start at a specific location by appending the time to the link.


https://youtu.be/xnBAwUV7abA?t=43s

Redirecting missing links

Tuesday, May 17th, 2016

I just updated a site so that it works better on phones and tablets. While updating I also cleaned up a lot of old code. In the process of cleaning up many of the old pages are no longer valid. Rather than redirecting to a generic page, I can redirect certain links to specific missing link pages. This is what I did for old manuals pages that I moved.


<?php
$oldurl = $_SERVER['REQUEST_URI'];
// Redirect requests for manuals
switch ($oldurl) {
  case '/products/mobile/manual_1.php';
  case '/products/mobile/manual_2.php';
  case '/products/mobile/manual_3.php';
  case '/products/mobile/manual_4.php';
  etc.

    header("Location: https://www.wellgolly.com/products/manuals_mobile.php",TRUE,301);
    break;
}
?>
<div  class="centered">
<h1>Error 404<br />Document not found</h1>
    <img class='pure-img-responsive centered' src='/images/sad.png' alt='Sad' />
    <p>We’re sorry, but the page you requested could not be found.<br />
    Please use the menus at the top or bottom of this page to find what you are looking for.</p>

</div>

By parsing the $oldurl, you can redirect missing files from sections of your site to a missing page that can help your visitors find what they are looking for rather than just a generic page.

Apache error.log Warning

Sunday, May 15th, 2016

I get a bunch of these warnings in my logs and wondered what they were.


Command line: '/usr/sbin/apache2'
Loading CGI at runtime.  You could increase shared memory between Apache processes by preloading it in your httpd.conf or handler.pl file

From a Mason mailing list it looks like it is caused when Mason is loaded each time it is needed rather than when Apache starts.
“may be a recommendation that comes from HTML::Mason::ApacheHandler2.”

I have one set of pages only site that use Mason so I’m not going to worry about it.

Yahoo Pure: Hamburger Menu Doesn’t Display

Sunday, May 1st, 2016

When the iPad is in portrait mode, the hamburger menu doesn’t display. It works in the Responsive Design Mode simulator in Safari but not on real iPads. The fix is to change the min-width to 49 em in side-menu.css.


/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 49em) {

Well Golly


Atheism Plus

Buy from Amazon