Twenty Fourteen Image Header, how to change for a..
-
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: (visible only to logged in users)
-
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
-
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; } -
THERE YOU GO PEOPLE
I SOLVED THE BIGGEST PROBLEM OF TWENTY FOURTEEN
after over 50 tutorials 5 hours of research and my countless testFOR 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 !!
-
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.. -
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..
-
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 -
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; } } -
Or just play around with that line..
@media only screen and (max-device-width: 480px) { } -
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; } } -
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/
-
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..
-
-
-
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 …
-
-
-
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 -
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*/ -
@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.
WordPress.com Forums 
