Tag Archives: html

CSS Tips

Posted on by
Reply

Here is some simple CSS code snippets that I have found useful.

Disable over scroll effect

html {
  overscroll-behavior: none
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Radial gradient to cover all of the background

html {
  width: 100vw;
  min-height: 100vh;
  background: radial-gradient(#676767, #232323);
}

Overlay that blurs and dims background

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 7;
}

Add a Button/Change Menu Item Color to WordPress Menu Bar

Posted on by
Reply

The following article was helpful in getting started adding a button to the WordPress menu bar.

https://www.wpbeginner.com/wp-tutorials/how-to-add-a-button-in-your-wordpress-header-menu/

Modifying a Menu Item on a WordPress theme is not too difficult. The basic steps are

  1. Add Menu Item
  2. Add CSS Class to specific menu item
  3. Customize the new CSS class by using the Additional CSS Options

Add Menu Item

Add or customize a menu item by going to Appearance -> Menu

Add a CSS Class to Menu Item

You can add a CSS class to an existing menu item, or you can create a new menu item.

  1. Create Menu Item
  2. Select Screen Options
  3. Enable CSS Classes. (Needed for the next step)
  4. Under the Menu option, set a CSS class. (Name it something unique so it doesn’t interfere with other CSS classes. We’ll configure the CSS in the next step)

Customize CSS

Now we can setup and customize the CSS class by going to Appearance -> Customize

Now find where the “Additional CSS” setting is. If it is not under the main list, try looking under “Advanced”. The Additional CSS editor page should look like the following.

Once there, add all the CSS you want to change color, padding, etc.

You can make it look like a button by adding things like

border-radius: 5px;
padding: 0.5rem;
margin: 0.2rem;

Check out the following link for more info about buttons.

https://www.w3schools.com/csS/css3_buttons.asp

Using wget to download HTML website

Posted on by
Reply

https://apple.stackexchange.com/questions/100570/getting-all-files-from-a-web-page-using-curl

Replace example.com/website with the website you want to download files from.

wget -r -np -k http://example.com/website/

The above command will download all the files it can find in that web directory, i.e. (html files) This can be helpful if your trying to move a simple HTML site.

The -r option means recursive, the -k option converts the links to local links after it downloads the page.

HTML redirect to website

Posted on by
Reply

Change “website.toredirect.com” to the website you would like to redirect to. Put the code in a index.html or index.php file. If you stick it in the root website directory it’ll redirect automatically get called when you hit the website.

<meta HTTP-EQUIV="REFRESH" content=0"; url=https://website.toredirect.com">