working on it ...

Filters

Explore Public Snippets

Sort by

Found 257 snippets matching: full-width

    public by JonahM  4859  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  3181  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>
    
    
                

    external by Mike  68  0  1  0

    Sass mixin for full-width element (for use when inside a non-full-width container)

    Sass mixin for full-width element (for use when inside a non-full-width container): full-width-mixin
    @mixin full-width($bgcolor: #fff) {
    	position: relative;
    	&:before, &:after {
    		content: "";
    		position: absolute;
    		background: $bgcolor;
    		top: 0;
    		bottom: 0;
    		width: 9999px;
    	}
    	&:before {
    		right: 100%;
    	}
    	&:after {
    		left: 100%;
    	}
    }
    
    

    external by Ross Wintle  24109  0  3  0

    Sage _grid.scss for use when using optional full-width templates.

    Sage _grid.scss for use when using optional full-width templates.: _grid.scss
    // Grid system - do not apply to full-width-wrapped pages
    .wrap.container .main {
      @include make-sm-column($main-sm-columns);
      .sidebar-primary & {
        @include make-sm-column($main-sm-columns - $sidebar-sm-columns);
      }
    }
    .sidebar {
      @include make-sm-column($sidebar-sm-columns);
    }
    
    

    external by srikat  141  1  2  0

    Full-width background image in Home Top widget area of Enterprise Pro. http://sridharkatakam.com/use-full-width-background-image-home-top-widget-area-enterprise-pro/

    Full-width background image in Home Top widget area of Enterprise Pro. http://sridharkatakam.com/use-full-width-background-image-home-top-widget-area-enterprise-pro/: style.css
    CSS
    .home-top {
    	background: url("images/picjumbo.com_IMG_6424-1600.jpg") no-repeat;
    	border-top: 1px solid #333;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    
    .home-top .wrap {
    	padding-top: 90px;
    	padding-bottom: 90px;
    }
    
    .home-top .widget {
    	max-width: 400px;
    	float: right;
    	background: rgba(255, 255, 255, 0.8);
    	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    	-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    	-ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    	border-radius: 5px;
    	padding-bottom: 40px;
    }
    
    .home-top .widget p {
    	color: #000;
    }
    
    @media only screen and (max-width: 1023px) {
    
    	.home-top .widget {
    		padding-bottom: 0;
    	}
    
    }
    
    @media only screen and (max-width: 768px) {
    	.home-top .widget {
    		max-width: none;
    	}
    }
    
    @media only screen and (max-width: 320px) {
    	.home-top .wrap {
    		padding-top: 30px;
    		padding-bottom: 30px;
    }
    }
    
    

    external by Dmitry Malikov  80  0  1  0

    Make the Windows Azure Portal Full-Width (https://userstyles.org/styles/90287/windows-azure-full-width)

    Make the Windows Azure Portal Full-Width (https://userstyles.org/styles/90287/windows-azure-full-width): gistfile1.txt
    @-moz-document domain("manage.windowsazure.com") {
    #headerbar-wrapper {
    	width: 100%;
    	margin-left: 0;
    	left: 0;
    }
    #fxshell-navpane {
    	left: 0;
    	margin-left: 0;
    }
    #drawer {
    	margin-left: 0;
    	left: 0;
    	width: 100%;
    }
    #aux-foreground {
    	width: 100%;
    	left: 0;
    	margin-left: 0;
    }
    }
    
    

    external by ryantownley  57  0  1  0

    This code snippet will remove all sidebars (including header-right area), remove all layouts other than full-width, and force full-width to be selected by default in a Genesis child theme.

    This code snippet will remove all sidebars (including header-right area), remove all layouts other than full-width, and force full-width to be selected by default in a Genesis child theme. : remove-sidebars-layouts-force-full-width-genesis.php
    <?php
    //* Do NOT include the opening php tag
    
    //* Remove sidebars and header widget area
    unregister_sidebar( 'header-right' );
    unregister_sidebar( 'sidebar' );
    unregister_sidebar( 'sidebar-alt' );
    
    //* Unregister layout settings
    genesis_unregister_layout( 'content-sidebar' );
    genesis_unregister_layout( 'sidebar-content' );
    genesis_unregister_layout( 'content-sidebar-sidebar' );
    genesis_unregister_layout( 'sidebar-content-sidebar' );
    genesis_unregister_layout( 'sidebar-sidebar-content' );
    
    //* Force full width layout selection
    add_filter( 'genesis_pre_get_option_site_layout', 'genesis_do_layout' );
    function genesis_do_layout( $opt ) {
        $opt = 'full-width-content';
        return $opt;
    }
    
    

    external by Sean Doran  34  0  1  0

    Quickly make an article readable. Usually for really old full-width sites.

    Quickly make an article readable. Usually for really old full-width sites.: Instareader.css.md
    # Quick "Instapaper/Reader/Readabilty" Custom Styles
    For sites [like this one.](http://www.truthtable.com/Fifteen_Princples.html)
    
    ```
    background: #fafafa !important;
    border: 1px solid #333 !important;
    color: #333 !important;
    font: 20px Baskerville, Garamond, serif !important;
    margin: 10px auto !important;
    max-width: 367px !important;
    padding: 0 20px 20px 20px !important;
    word-wrap: break-word !important;
    ```
    
    ![Before and After Screenshot](https://pbs.twimg.com/media/CrdMX32WYAA9eoJ.jpg)
    
    

    external by chrismhobson  22  0  1  0

    Genesis - Add Full-width Responsive Header Images to Pages

    Genesis - Add Full-width Responsive Header Images to Pages : functions.php
    //* Add Responsive Header Images to Pages
    add_image_size( 'header-img', 9999, 250, TRUE ); /*remove '250' and true for unlimited height*/
    add_action('genesis_after_header', 'site_banner', 25);
    function site_banner(){
    	if( !is_singular('page') )
    		return;
    
    	if( has_post_thumbnail() && is_page() ) :
    		$ftbanner = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'header-img' );
    		$banner = $ftbanner[0];
    		echo '<div id="site-banner" class="site-banner">' . "\n";
    		echo '<img src="' . $banner . '">' . "\n";
    		echo '</div>' . "\n";
    	endif;
    }
    
    

    external by Lin Wanfei  22  0  1  0

    Calculate full-width CJK char string length (utf8)

    Calculate full-width CJK char string length (utf8): CJK_len_python
    #!/usr/bin/env python
    # -*- coding: utf-8 -*-
    
    string = "貓" #cat
    
    s_utf8 = string.decode('utf8')
    
    print len(s_utf8) #output = 1
    
    string_2 = "狗!" #dog!
    
    s_utf8_2 = string_2.decode('utf8')
    
    print len(s_utf8_2) #output = 2
    
    
    • Public Snippets
    • Channels Snippets