Need help? Check out our Support site, then


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

  1. 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.

  2. 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

  3. 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;
    }
  4. 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 !!

  5. 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..

  6. 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..

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

  8. 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;
    }
    }
  9. Or just play around with that line..

    @media only screen and (max-device-width: 480px) {
    }
  10. 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;
        }
    }
  11. 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/

  12. 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..

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

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

  15. 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 ...

  16. To s3qu3lblog, I will your codes and let you know ...

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

  18. @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

  19. 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*/
  20. @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.

  21. if you want my whole code new code that truncated and added configuration for almost everything possible...

    /*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*/
    
    /*Page-Lenght-Start*/
    @media screen and (min-width: 1100px) {
    	#page {
    		max-width: 1920px;
    		width: 100%;
    	}
    /*Page-Lenght-End*/
    
    /*Page-Backgroud-Color-Start*/
    .site {
        background-color: #000000;
    }
    /*Page-Backgroud-Color-End*/
    
    /*Page-Description-Start*/
    .site-description {
        color: #cc0000;
    	  font-size:140%;
    }
    /*Page-Description-End*/
    
    /*Page-Title-Start*/
    .site-title {
        color: #cc0000;
    	  font-size:140%;
    }
    /*Page-Title-End*/
    
    /*Page-Content-Start*/
    #content-area a {
        color: #fffff;
    	  font-size: 80%;
    }
    #content-area .entry-title {
        color: #cc0000;
        font-size: 100%;
    }
    .content-area {
        color: #fffff;
    	  font-size:120%;
    	  width: 100%;
    }
    	.entry-thumbnail img {
    		width: 120%;
    	}
    }
    /*Page-Content-End*/
    
    /*Page-Primary-Sidebar-Start*/
    #primary-sidebar a {
        color: #fffff;
    	  font-size: 80%;
    }
    #primary-sidebar .widget-title {
        color: #cc0000;
        font-size: 100%;
    }
    .primary-sidebar .widget {
    	   color: #fffff;
        font-size: 80%;
    	width: 100%;
    }
    /*Page-Primary-Sidebar-End*/
    
    /*Page-Second-Sidebar-Start*/
    #content-sidebar a {
        color: #fffff;
    	  font-size: 80%;
    }
    #content-sidebar .widget-title {
        color: #cc0000;
        font-size: 100%;
    }
    .content-sidebar .widget {
    	   color: #fffff;
        font-size: 80%;
    	width: 100%;
    }
    /*Page-Second-Sidebar-Start*/
    
    /*Page-Entries-Title-Start*/
    		.archive-title, .page-title {
        color: #cc0000;
        font-family: "Comic Sans MS" !important;
        font-size: 21px;
    }
    /*Page-Entries-Title-End*/
    
    /*Page-Entries-Description-Start*/
    .taxonomy-description p {
        font-family: Comic Sans MS;
        color: #FFFFFF;
        font-size: 14px;
    }
    /*Page-Entries-Description-End*/
  22. Thanks to both of you !
    Dvismusic

Topic Closed

This topic has been closed to new replies.

About this Topic