Twenty Fourteen Image Header, how to change for a..

  • Author
    Posts
  • #1755923

    s3qu3lblog
    Member

    Hi, I would like to change the header for an animated one
    http://i.imgur.com/3BkVUqH.gif
    I tried this :

    {
    background:url(http://i.imgur.com/3BkVUqH.gif);
    width: 400px;
    height: 400px;
    }

    But it doesn’t work, any idea how i could insert an Image in the top left corner

    The blog I need help with is beyondmatrix.wordpress.com.

    #1755953

    s3qu3lblog
    Member

    I’m almost there i was able to insert a block space with that code.

    .site-title {
        background-image url(http://i.imgur.com/3BkVUqH.gif) no-repeat;
        background-size: contain;
        line-height: 324px;
    }

    but no image is showing up

    #1755954

    s3qu3lblog
    Member

    Almost there…

    h1 {
        background http://i.imgur.com/3BkVUqH.gif;
        background-size: contain;
        line-height: 324px;
    }
    
    #masthead {
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/3BkVUqH.gif');
    width: 700px;
    height: 225px;
    margin: 100px;
    margin-top: 0px;
    }
    #1755955

    s3qu3lblog
    Member

    THERE YOU GO PEOPLE

    I SOLVED THE BIGGEST PROBLEM OF TWENTY FOURTEEN
    after over 50 tutorials 5 hours of research and my countless test

    FOR THOSE WHO WANT A CUSTOM HEADER/ANIMATED GIF WITH THE THEME TWENTY FOURTEEN

    h1 {
        background-size: contain;
    }
    
    #masthead {
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/3BkVUqH.gif');
    width: 1400px;
    height: 325px;
    margin: 10px;
    margin-top: 0px;
    }

    YOU CAN THANK ME !!

    #1755956

    s3qu3lblog
    Member

    UPDATE with the function no-repeat

    h1 {
        background-size: contain;
    }
    
    #masthead {
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/nam3r2a.gif') no-repeat;
    background-repeat-x: no-repeat;
    width: 1200px;
    height: 325px;
    margin: 10px;
    margin-top: 0px;
    }

    Use :
    – Do not put any header
    – Paste the code in the custom CSS area
    – remplace with your image size and /or size you want..

    #1755957

    s3qu3lblog
    Member

    Another cool CSS mod that works well with that code and Twenty Fourteen is the page enlarger.

    @media screen and (min-width: 1100px) {
    	#page {
    		max-width: 1920px;
    		width: 100%;
    	}
    
    	.content-area {
    		width: 100%;
    	}
    
    	.sidebar-widget-area {
    		width: 100%;
    	}
    
    	.entry-thumbnail img {
    		width: 100%;
    	}
    }

    alright.. Take care..

    #1756091

    dvismusic
    Member

    Hi,
    Your find the trick but this is not working with ipad and iphone format, where the master head will not feet the screen size of each of them …
    – Could you do something to do it ?
    Dvismusic

    #1756092

    s3qu3lblog
    Member

    Try this and tell me if it works..

    .tel,.tel:visited {
    display:block;
    color:#fff;
    background-color:#000;
    padding:1em;
    text-decoration:none;
    }
    .tel:hover,.tel:focus {
    color:#000;
    background-color:#fff;
    }
    @media screen and (min-width: 28.5em) {
    .tel,.tel:visited {
    background:none;
    cursor:default;
    }
    .tel,.tel:focus {
    color:#000;
    }
    }
    #1756093

    s3qu3lblog
    Member

    Or just play around with that line..

    @media only screen and (max-device-width: 480px) {
    }
    #1756094

    s3qu3lblog
    Member

    or this to set up another image size with a phone version..

    @media only screen and (max-device-width: 480px) {
        div {
            background-image: url('myImageUrl.png');
            height: 200px;
            width: 400px;
        }
    }
    #1756095

    timethief
    Member

    Page loading time is a major factor when it comes to attracting and keeping readers. We have only 3-4 seconds before folks start clicking out if the site has not loaded. Your website is slower than 85% of all tested websites. http://tools.pingdom.com/fpt/#!/bdjdcE/http://beyondmatrix.wordpress.com/

    #1756096

    s3qu3lblog
    Member

    Personally i could care less, I’m not in for fame or gain.. if someone as a **** connection and don’t want to wait nor care about my design or my stuff then just don’t stay on my page..

    #1756097

    s3qu3lblog
    Member

    The loading is heavy just because of my HQ .gif that i made..

    #1756098

    s3qu3lblog
    Member

    i could even make it worst and add redirects and lol take everyone IP just for fun..

    #1756111

    dvismusic
    Member

    Hi, thanks to both of you, In fact I would like to add a new image before the normal design of twenty fourteen theme, not a .gif a I don’t want to slow down my site, furthermore on mobile device …

    #1756112

    dvismusic
    Member

    To s3qu3lblog, I will your codes and let you know …

    #1756113

    dvismusic
    Member

    To timethief, I will test my site with this tools, thanks for this advice !

    #1756122

    s3qu3lblog
    Member

    @dvismusic

    Hi
    i worked a little bit on it since i wanted to do the same thing, i couldn’t find a way around it but i found something that works great for me…

    The way i found out is totally remove the header for mobile and others devices like this..

    I re-arranged the header code too..

    /*Header-start*/
    @media screen and (min-width: 1100px) {
    #masthead {
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/nam3r2a.gif') no-repeat;
    background-repeat-x: no-repeat;
    background-color: #000000;
    background-size: contain;
    color: #fffff;
    width: 1200px;
    height: 325px;
    margin: 10px;
    margin-top: 0px;
    }
    /*Header-End*/
    
    /*Header-Mobile-Start*/
    @media only screen and (max-device-width: 480px) {
    #masthead {
    }
    /*Header-Mobile-End*/

    And i found a website where you can test it on other devices..
    http://www.mobilephoneemulator.com

    #1756123

    s3qu3lblog
    Member

    Oupss wrong code use this one.

    /*Header-start*/
    @media screen and (min-width: 1100px) {
    #masthead {
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/nam3r2a.gif') no-repeat;
    background-repeat-x: no-repeat;
    width: 1200px;
    height: 325px;
    margin: 10px;
    margin-top: 0px;
    }
    /*Header-End*/
    
    /*Header-Mobile-Start*/
    @media only screen and (max-device-width: 480px) {
    #masthead {
    }
    /*Header-Mobile-End*/
    #1756124

    timethief
    Member

    @dvismusic
    You’re welcome. Twenty Fourteen is a responsive width theme. See here http://theme.wordpress.com/themes/features/responsive-layout/
    The mobile theme is a completely different theme. Responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading. When we use a responsive width theme we go to > Appearance > Mobile and disable the mobile theme.
    Your site is private but when you make it public you can use this tool to see how it displays in various devices http://www.responsinator.com
    Hope this helps and best wishes.

The topic ‘Twenty Fourteen Image Header, how to change for a..’ is closed to new replies.