working on it ...

Filters

Explore Public Snippets

Sort by

Found 394 snippets matching: jonah

    public by JonahM  298463  2  6  4

    Responsive Type

    No Javascript required for responsive text! Pure CSS3
    /* 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
    cpp
    // 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>

    public by JonahM  4711  1  6  2

    Sublime - Flat UI Theme Predawn

    https://github.com/jamiewilson/predawn
    {
      "theme": "predawn.sublime-theme",
      "color_scheme": "Packages/Predawn/predawn.tmTheme"
    }
    
    # Really decent flat theme for Submlime text:
    # https://github.com/jamiewilson/predawn

    public 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>

    public by JonahM  3138  1  7  6

    Fluid Responsive Rows

    Site: http://j.mp/1oilINn
    <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&amp;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&amp;id=0Bws9ea6OV7zYcDAwQ3F4RWZ3elhkUXhDby1aaTFuWlZUcEhJ" 
      height="60%" 
      width="60%"
    >
    • Public Snippets
    • Channels Snippets