working on it ...
Explore Public Snippets
Found 394 snippets matching: jonah
/* Code Reference & Examples: http://mole.tk/1ymmXAv */
/*
What Does vw and vm mean?
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
*/
body {
background-color: #ff5442;
font-family: ‘Lato’, Arial, sans-serif;
margin: 2vw;
}
h1 {
color: #fff;
font-size: 6vw;
font-weight: 900;
text-transform: uppercase;
line-height: .3vw;
}
h2 {
color: #fff;
font-size: 4vw;
}
p {
color: #fff;
font-size: 1em;
}public by JonahM 275582 4 7 4
Fluid CSS Rows
I've realised in my coding experience that I need to
To allow for space in the div or row tags when using
text. Because everything is responsive on a web
page, it's a good idea to use these classes. They
work really well.
Example: http://j.mp/1oilINn
.strip-md{
padding-top:80px;
padding-bottom:80px;
position:relative;
overflow:hidden;
}
.strip-sm{
padding-top:30px;
padding-bottom:30px;
}
public by JonahM 269788 0 6 0
Tweak Your UI using Form Alter - Drupal
How to identify and edit elements on a page in Drupal. This is a drupal module code
<?php
function ui_tweaka_help($path, $arg){
switch ($path) {
case 'admin/#ui_tweaka':
return t("Changes stuff");
}
}
function ui_tweaka_form_alter(&$form, &$form_state, $form_id) {
if (module_exists('devel')) { // Is the 'devel' module active?
dpm($form_id); // Let's have a butchers at the form id
dpm($form); // Ditto the form itself
//$form['title']['#title'] = t('Main Heading for this page');
//$form['title']['#access'] = FALSE;
$form['field_image']['und'][0]['#description'] = t("Upload nice piccy here");
}
}
?>
public by JonahM 2137 1 6 0
Background Repeat
Inspired by Google Forms' Code. Just a simple bit of code here for a repeating background image
body {
background-color: rgb(231,238,247);
background-image: url('//i.imgur.com/tNy5Bvz.png');
background-repeat: repeat;
background-position: left top;
}
public by JonahM 10695 5 6 3
Conjuguemos
looking for a code to hack the java script of conjuguemos to instantly complete the page
// Enter here the actual content of the snippet. Why?
public by JonahM 4836 11 6 2
Full width header Image
A great method for designing a full width responsive header image.
Using Twitter Bootstrap also.
Site: http://j.mp/1oilINn
<div class="container-fluid" id="fit" style="background: url(header.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> <h1 class="container header strip-md" style="text-align:center; color:white;"> Header Title </h1> </div>
{
"theme": "predawn.sublime-theme",
"color_scheme": "Packages/Predawn/predawn.tmTheme"
}
# Really decent flat theme for Submlime text:
# https://github.com/jamiewilson/predawnpublic by JonahM 3376 3 7 4
Multicolumn row with responsive images
Here I've got 3 images, header text and paragraph text which all fit together, central and fully responsive. Because I'm using dimensions in percentages, they're responsive for any screen size.
Using Bootstrap
Site: http://j.mp/1oilINn
<div class="col-sm-4"> <div class="text-center spacing always bottom little"> <img src="home.png" style="width:50%; height:50%"> </div> <h3>The Temple of God</h3> <p>...to this man will I look, even to Him that is poor and of a contrite spirit, and who trembles at my word</p> </div>
<section class="strip-sm row-fluid" style="background-color: #262626;" >
<div class="container">
<h4 style="color:white">This is copyrighted by Jonah McLachlan</h4>
</div>
</section>
public by JonahM 3606 4 6 2
Google Drive Media in HTML
How to embed a Drive image on a HTML page.
Example:
http://drive.google.com/uc?export=view&id=[IMAGE ID]
See a demonstration:
http://gbpscotland.org/growing-leaders/regional-training/
<img class="wp-image-892 alignright" title="View the Flyer" alt="Basic Training Flyer" src="http://drive.google.com/uc?export=view&id=0Bws9ea6OV7zYcDAwQ3F4RWZ3elhkUXhDby1aaTFuWlZUcEhJ" height="60%" width="60%" >
