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..
Slick Slider Carousel with Custom Next and Prev Buttons
I had a slider the other day where i needed to attach some detached buttons, so added the following click events to control the next and previous events on the slider. Note the class names: sli..
foundation three boxes with text align links to the bottom of element
For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..
timeline class and function
this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..
Idea: Google Font Dropdown Selector Code
just an idea at the moment, a dropdown list of google fonts and when selected it loads that selected font using the @import css tag. Loading the fonts Gist : not tested https://gist.github.com..
responsive three box section with tabular data or table data
here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..
stackable bio or biography list with portrait image title and text
a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout. As its in foundation here is ..
easy section wrap in foundation - 3 boxes responsive
this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes
How to record your own page views with PHP, and make them into weekly monthly and yearly charts
Building a better Simple Page View Counter Currently this site has a very basic view counter on it. Here is how it currently works. Load the page, function checks if the page has a existing r..
fancybox load iframe inline
All you need to load content in an iframe using fancybox modal javascript plugin. not quite an inline load, but not much script to get this going.
creating embedded php code from a database field
i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..
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..
button with separated chevron
I have come across this kind of button format a few times now in various designs and the html and css for it is a bit different to normal button formats I have found. Chevron Detached Button Ex..
vertically align text within a fixed height div using flex
this can be used to make text align nicely while still keeping the same layout. the example below shows how you can set the height of the containing element and still have the text aligned center to ..
roboto and poppins fonts include quick code
css import for poppins and roboto google fonts with the common font weights
404 Error Page Codepen
found this in my links the other day, still looks cool...
target last item css with :last-of-type
the :last-of-type selector allows you to select the last item of that type in the target container. in the following example i can target the last <p> tag and make the text bold and red.
target first item css with :first-of-type
the :first-of-type selector allows you to select the 1st item of that type in the target container. in the following example i can target the 1st <p> tag and make the text bold.
hero widget header - creates a nice looking hero item from a target uid and class
this creates a "nice" looking hero widget, just wanted to create something that looked decent and had an attached background image, surprizingly annoying to link items together. For some reason i kee..
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..
backdrop-filter: blur(10px);
just testing this filter
allow a title to be in the foreground while still having a before overlay for the background
i came across this issue recently, where a title was within an element and it needed to have a background overlay while still allowing the title to be on top of the overlay. I found the fix was..
Slick Slider Carousel with Fade Transition
here is a working example of slick carousel with a fade transition between elements rather than a slide transition
blur the background image while keeping the foreground normal
this one uses the ::before element to add a background and apply the blur filter to it, while allowing the foreground content to still be non blurry
background image greyscale filter while foreground is still in colour
i had an issue the other day using a css filter which was causing all items within the element to also have that filter. using the ::before psudo class solves this issue
rounded click me button with icon
just a rounded button with a font awesome icon
replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]
I have been looking for a little while for a replacement for the now classic and a bit depreciated, ken wheeler's slick carousel. After a bit of looking around i think the best replacement, is a non ..
slick carousel jump to a slide on element hover
jumps to a specific slider on hover over on an element this is working now, here is the example, mouse over the buttons to see the slide change. trying to add this: Javascript $( selector ).mous..
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..
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. ..
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.
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.
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..
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..
bold the numbers in a ol li list
sounds like an easy thing to do, but maybe not so simple. you can do this using the counter css element. code below:
add a class or remove it based on window scroll location
if you inspect the header div you will see a class added to it when scrolled down, i have added additional margins to it so you can still see it even when scrolled. then you add a fixed property to m..
wordpress main nav dropdown fix
this unsets the flex and allows the menu items to stack properly in a dropdown menu, not sure if this is reusable
Slick Slider Carousel
Edit: Sorry this page was broken for a bit, its fixed now with working examples! 😛 Nice and simple slider / carousel
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: ..
bootstrap styled buttons
Just in-case you would like the shiny (flat/rounded) blue buttons from bootstrap without all the css. Example Button add the class btn and btn-primary to your link An Example Primary Button (bt..
more complex responsive tables css
i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..
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..
use font awesome on elements lists ul
good if you need to use font awesome in list items like ul lists, etc. .element { position: relative; } /*replace the content value with the corresponding value from the list below*/ ..
design nice block header
I saw this the other day and thought the color scheme looked quite nice. Ill see if i can replicate it here. @import url('https://fonts.googleapis.com/css?family=Raleway:300'); .mid-header { ..
