Search
Search Code
4 box custom grid with responsive
simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid
Add font awesome icons as placeholder text in inputs
An old one i found on codepen, works with only the old version of font awesome i think. Not tested on the later versions.
Twitter Post Fetcher v18.0.4 - javascript twitter feed fetcher
A few queries showing how to get latest tweets and post likes using the Twitter Post Fetcher v18.0.4 script.
Twitter Post Fetcher Script
Uses javascript to fetch a twitter feed from a user screen name. Totally stylable alternative to using the twitter embed code. Your Welcome...
chevron right thick and pointy edges base64
finally found a svg chevron that does not cost $3, amazing...
how to embed google fonts icons
For some reason when i go to embed a google font icon, they dont seems to have any obvious way to actually use it, i can find the icons ok here. But then when i go and use it it links to a how to embe..
button zoom effect with expanding background
Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
using filter grayscale to make an image dark
lets make this image grayscale using a css filter
twitter icon font awesome
twitter and linked in icons from font awesome
404 Error Page Codepen
found this in my links the other day, still looks cool...
globe svg testing (broken)
nope seems not to be working, it seems you cant just copy the glyph path into a normal svg and hope for the best, oh well i tried.
Scroll down indicator css javascript and html
I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it. Then as you scroll down the indicator dissapears. So we w..
rounded click me button with icon
just a rounded button with a font awesome icon
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..
jquery page search [testing]
just testing this one at the moment for a in page search. Based on this: https://codepen.io/chriscoyier/pen/ExgqWab I would like to adapt this code to search through page elements and ma..
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..
make an image white with css using filter brightness and invert
If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert. You can ..
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..
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..
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..
enable tinymce on a target textarea by id
this is useful if you have multiple textareas on a page and want to enable tinymce on, also included are buttons to enable and disable on all textareas on the page
stop tinymce replacing urls with relative url's
If you have been using tiny mce for your content editing, you will sometimes find that it replaces your full url strings with its relative ones. This can be annoying so this is how you can disable it..
Load and Unload TinyMCE editor from a button
Enable TinyMCE Disable TinyMCE Some Content function load_tinymce(idclass) { tinymce.init({ selector: idclass, plugins: [ "spellchecker code aut..
favicon code meta tag
if you want to link a png as a favicon
google map with overlay data
Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..
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..
tiny mce editor tinymce
Just loading the editor, as its useful for formatting stuff sometimes 😋. I usually use a function to load it into text areas with the tool bars + styles that i find useful. Example fu..
use an image to replace bullet in ul list
How to replace the default bullet with an image in a ul tag .widget ul, .page-content ul { list-style-image: url('images/favicon.png'); }
color cycle drop shadow - rainbow drop shadow
Just incase you are bored with a static shadow, here you can cycle through a bunch of different shadow colours. .cycle-shadow { -webkit-animation:img-cycle 3s infinite; animation:img-cycle 3s i..
filter drop shadow
using a filter drop shadow can add shadow to transparent areas of a png filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.9));
material design icons google font
you can just link to this like a font in your header how do we use the icons? <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> this one should ..
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*/ ..
