Search
Darkmode JS - Add darkmode to your site with one script
This library looks really nice! It drops in ok, but maybe with more complex layouts or coloring, it seems to break a little bit. Darkmode JS Example Source Links https://darkmodejs.learn.un..
add a divider to your dropdown nav toggles
good for seperating menu sections in the same dropdown item add this to your toggle <li><hr class="dropdown-divider"></li>
generate random username function in php
a function that takes several random words and creates a user name from them. This will generate a user name with between one to three words and a prefix if prefix_show is set to true. usage generat..
bootstrap alert template
here is a templated bootstrap alert where you can switch the alert type with the @alert_type variable. Here are the different alerts: primary secondary success danger warning info light dar..
bootstrap list group card with footer
a list group within a card and also a footer on the card for additional links.
change selected color on input elements css
this can be useful if you are using darker form elements and they happen to have white on white text, so you can target the :focus on the input. here is the text input before the colour change, the c..
using filter grayscale to make an image dark
lets make this image grayscale using a css filter
bootstrap dark mode
Bootstrap Darkmode https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-1 https://github.com/vinorodrigues/bootstrap-dark CSS Dark Mode Preparing for dark mod..
how to make a transparent logo white with css
lets say you have a logo and its dark on a black background, how annoying is that, you still want the dark background but also want to see the logo. well with this css trick you can just make t..
this is a weird one table underline appearing and dissapearing on mouse over
very strange that also reminds me that i have to get rid of these random searches idea: i was thinking of adding a more detailed hit system where it can record the month and also the year of the..
for auto filled fields, need to change the text and background colours
for some reason bootstrap or the browser is doing this to auto filled fields. according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..
Latest from Code Widget
What generates the Latest from Code Widget? Code PHP $widget_latest_list = $class->list_all( $start = 0, $max = 10, &n..
make your images look non squished when not using image backgrounds v2
this is a working version of this post, for some reason that image was deleted I think due to a content upgrade. Basically this uses the object-fit: cover; to make images not stretch when they ..
counting the occurrence of words in a multidimensional array
array sorting example The array Array ( [0] => Array ( [0] => Some [1] => great-looking [2] => special [3] => editio..
add a toast alert when logging in with half moon
example of adding a document dom ready wait and then the script that launches a new toast message just adapting a php cms using halfmoon as the ui, its quite nice. a bit bright in non dark mod..
adding a background image to the titles of the dark mode card on this page
Just wanted to see what it would look like if i added some kinda image to the background of the titles. Side Note: i wonder if its a bad idea to add images that are uploaded to imgur rather than to t..
Creating a chart about charts.css with charts.css from the command line
Creating a chart about charts.css with charts.css from the command line: BASH ( echo "<table class='charts-css bar show-labels show-heading'>" echo "&l..
adding background blur to an image using css fill screen
I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos. Its basicall..
Adding HTML Templates into TinyMCE Editor
This can be very useful if you are using the tinymce editor on your site and want to be able to add simple or complex html templates. Here is how to do it: Add this to your tinymce init Javascrip..
enable dark mode in tinymce
Here we have a darkmode verion of tinymce, ahh my eyes feel much better. The change to version 5 seems quite easy as well, as it uses the same init script as 4 still. You need to also includ..
install codemirror for textareas [added]
i think rather than editing all the code using just a plain textarea element it might be nice to have codemirror format them nicer https://stackoverflow.com/questions/21085170/codemirror-how-to-insta..
darkmode toggle switch with local storage to remember the last selection
Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements! It saves to local storage the last selection so if you come back to the..
add a youtube video preloader function, lazy load youtube [fixed]
I noticed that this list page: https://kruxor.com/list/rs3_efficient_skill/ Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes w..
style page numbers [fixed]
need to style the page numbers. https://kruxor.com/list-table/search_links/ Before: After: Dark Mode Light Mode
checking the current url and then marking a link active based on that url
i want a script that can check the current page uri and then match it to a list of links to be able to add an active class that survives page reloading So here we go... 1. Get the current page url. ..
badge border colour is too dark or light on number badges [fixed]
I noticed that the badges here were to light, so i must have missed something when updating the badge css. Demo Linkhttps://www.kruxor.com/search/code/site+bugs/ Bug Status:Fixed Problem: The bo..
top bar overflow issues [fixed]
So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..
make labels or badges look better
How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..
test page for the custom css 12 grid used on this site
This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.
easy twitter embed code
Just need to switch your twitter user name to show that feed here. Back when i used to use twitter, apparently.
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
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..
drop shadow text class easy drop shadow
makes it a bit easier to read light text on a dark background or vice versa
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 Darkmode Switch
I have tried this before without success but i googled "Bootstrap Darkmode Switch" and found this repo at the top of the list. So i thought i would give it a try on here and see how it looks. Demo pag..
adding pulsating dots to your css ul li list
get rid of those boring dots in your list and add some pulsation! See the Pen Pulsate your <ul><li> list item dots! by Luke (@kruxor) on CodePen.
fixing the website footer and making it less ugly
Here i show you in a couple of steps how to make the footer on this site look nicer, while actually doing it. Here is what the footer currently looks like. Yep pretty average looking. Lets add a ..
simple linear gradient overlay for an image to make it darker or lighter
i use this one often if i have a background image and some text over the top, you can darken or lighten the linear gradient values to match the text content and make it readable.
count the elements in an array
seems easy, if you need to know the amount of elements in an array this is how you do it. good if you need to know where the end of an array is. code <pre> <?php $array = [ "yo", ..
round number with js
Round a number to two decimal places. code var rounded = Math.round(num * 100) / 100; demo Result... function round_val() { var val = $("#rval").val(); var rounded = Math.r..
flems embed in url
Flems.io is a single-file, embeddable Web sandbox. It keeps all its state in the URL, so just make your changes, copy the URL from the address bar, and send it wherever you please. Most popular link s..
change favicon with jquery
Updated: This seems to not work on this page, as it has multiple link icon elements to deal with different sizes. I just changed it to a function and it runs ok, but the browser seems to choose a diff..
get select option form value with jquery
Handy if you need to get the value of a selected item in an option list basic code $("#select option").filter(":selected").val(); working demo Value 1 Value 2 Value 3 Value 4 ..
emoji data
Emoji Data version 1.0 This is a better emoji list that you can search by title ctrl + f emoji-data.txt # Emoji Data for UTR #51 # # File: emoji-data.txt # Version: 1.0 # Date: ..
darken background image using css
darken a background image using css only useful if you have overlay text or just want to add a nicer effect to an image, i usually find that adding this to an image with the text over the top makes it..
make your images look non squished when not using image backgrounds
Update: Fixed the code, you can see it here. i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set..
set transparent menu over background image
this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its e..
Random Quote
"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."
I just checked google books for BFG, and the dedication is there.
https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1
Roald Dahl, 1986