List Code
use an emoji on your list items ul li
I didnt think this would work but it does somehow, i guess it may differ depending on what emojis are available on your system.
bootstrap basic grid layout
nice and easy copy and paste for a basic grid layout
background image on 3 boxes not scaling correctly fix
So i had this weird task the other day, where there was three boxes with a background image set. When the screen changed size the image would go out of wack. The fix? Pixels rather than Perce..
Windows Emoji Shortcut
I keep forgetting this shortcut so ill add it here. Windows Key + . Windows Key + ; These both pop open the emoji menu in windows. Enjoy Your Emoji's 😘
CSS Grid Frame Work
8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..
css prefers-color-scheme example
This uses the @media and prefers-color-scheme to check which one you have as a setting in your browser
play a sound every # of seconds
This plays a beep sound every # of seconds, to stop it just reload the page 4 Minutes is 240 4.5 Minutes is 270 5 Minutes is 300
bootstrap toggle element collapse
the example code for toggling elements, show and hide
adding pagination to custom wp_query
you can add this to your custom wp_query making sure your query also has the paging passed through to it
download icon svg
a simple download icon in svg format, also added button example usage so you can use the svg within the button as an icon and change the fill colour on mouse over, plus it scales nicely on mobile devi..
add paging to wp list query
this is a raw template with list query for specific category names and also includes paging, if the post number is greater than 8 posts in the included categories.
using jquery appear for checking if an element is visible on screen
Yes.. sometimes i like using jquery as well, as it can make things so easy! :) Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen. Plugin Link..
Monitoring Visible Objects on Screen
i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..
using attr in css to get content from html
im not sure (yet) how this would be useful, but it shows that you can get title attribute content from a div with css
check that a number is in the correct range based on a form selection
This script will check if the number is correct based on a form selection this can be used for checking that a postcode matches a state value or something similar Lets grab the html select form from ..
how to install js socials for social media share buttons and make them rounded
This should be a nice quick one on how to install js socials which add social media sharing buttons on your pages. Yeah i always just ignore these as well, but hey some people may use them?? H..
css perspective and transform css properties testing
i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird. with the ..
Fix Hover Over color on list group dark mode in bootstrap
How to fix the problem when switching to dark mode, the list group item text disappears when active. Here is what it currently looks like. To fix this we need to target the element and force the..
list items from blog and filter by category name
this is a bit raw, but shows the $args = array('category_name' => 'Categy Name 1','Categy Name 2','Categy Name 3' => 8, 'paged' => $paged ); for querying the category_name to do multiple pro..
Quick tool to convert time into decimal
I needed a quick tool that can convert say 20 minutes into decimal, as im doing this a lot these days. Here is what i come up with, well you can google it as well and that works, but this form is a bi..
using javascript to open a link in the same window and in a new window or tab (open link)
a nice easy way to target _self or _blank when opening a link using javascript
hero box with title sub title logos and call to action buttons
Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..
Leaflet Quick Start Example
just a quick start map embed for leaflet js an alternative to google maps
using linear gradient background on text css
If you want to have a background gradient on your foreground text you can use this css. I think currently this only works on webkit enabled browsers, but it looks pretty cool.
setting up css variables in your stylesheet
Using css variables at the start of your stylesheet can make things down the road much easier to change. You can also use it for more complex variables like drop shadow settings as shown below. ..
match a category id in wordpress and then add styles just for that id
this is in template-parts/content.php which may be different based on your theme or version of wordpress. you can locate the category id in wordpress by going into categories and then clicking ..
simple table stripe striping
this uses the nth-child(even) element to add color striping to the following table test table x x x &..
bootstrap collapse or toggle a div visibility
if you have bootstrap and want to toggle an element or show and hide a div its already built in, just use the following code to toggle something.
drop shadow text class easy drop shadow
makes it a bit easier to read light text on a dark background or vice versa
center everything in a div with flex-center (centre)
i usually add this to my base css styles, as a way to easily center something in the middle of an element. then you just add this flex-center class and everything will be horizontally and verti..
generating all css colours with php?
I was looking at doing this just to generate all css colours, i think the only issue is there is a lot! You can do this with rgb(0,0,0) all the way up to rgb(255,255,255) how many seperate colours is..
country select javascript check which option is selected and show a hidden element
this shows a country dropdown and then if a selected country name is matched it will show the second part of the form for this test australia is the confirmed country
country select javascript check which option is selected
this is an example of how you can get the selected country value with javascript from a html countries dropdown
php countries array to dropdown form element
here we generate a form dropdown from a php countries array using the country code as the name of the form option
get the current post id from content.php
this should assign the current wordpress post id to $post_id, from template-parts/content.php if you want to show it, just echo the $post_id
wordpress get the current category id name and slug
This gets and displays the current category id in a wordpress blog post if you have the current id, if not you can leave the $post_id blank and it should see if there is a category loaded to the curre..
fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty
This is usually caused by something being inside the element used to render the reCAPTCHA. In this case tinymce was adding a or a <p> tag to the element Removed the space and this f..
search a zip file with windows command prompt and 7zip
if you ever need to search for a file in a zip file this is how to do it (in windows). Also you will need to install 7zip Open a command prompt CTRL+R and type cmd cd C:\Program Files\7-Zip 7z l c..
css font style italic
i had a request to make some font italic the other day, and for some reason i could not remember the css for it. It's font-style: italic; I should know that! I guess italic fonts annoy me a bi..
create a rainbow background using css linear gradient
just incase one gradient is not enough for you we can also use it to create a rainbow background gradient
extracting the useful bits of bootstrap
Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..
Bootstrap 4 Center menu items in a navbar
Here we have an example bootstrap navbar you can find the original navbar here. I just want to center the menu item links so they dont appear over to the left on larger screens. Add the follow..
certbot add a certificate for one domain
this adds a certificate for one domain and modifies the nginx config to use the certificate also giving you the option to redirect all traffic to the secure version
renew all SSL certificates with certbot
just issue the following command in bash
Fix for Fatal error: Uncaught Error: Call to undefined function file_get_dom() simplehtmldom simple_html_dom
This error is caused due to a function name change in the simple_html_dom.php library if you are using an older one and upgrading to the never version, you can see it in the change log here: https://s..
