you're reading:
Borders, Header customization, Html & inline css codes, Images, Pages (static), Themes

Custom header image in Motion

http://wpbtips.wordpress.com/

Good news if you’re not a fan of the ubiquitous white: the latest addition to wp.com themes is Motion, a beautiful dark-colored theme designed by 85 ideas.

(Hopefully widget maniacs will resist its other temptation: widgets can be placed in the sidebar as well as a 3-column bottombar as well as the header! Another first in this theme is its double top navigation: tabs for static pages above title and tagline, tabs for post categories below – with the Home tab very intelligently put in the categories section.)

Hopefully, too, you won’t miss a header image. But my experience in the wp.com forum tells me that some users will ask for one, so I worked out a few possibilities. If you can’t do without a header image, go to Appearance>Widgets, add a text widget (and nothing else) to the “header” module, and put one of the following in it:

A. For an image to the right of the title and tagline, spanning the right half of the header

<img src="IMAGE URL HERE" alt="DESCRIPTION HERE" />

The image must be 470px wide. In my opinion, its height should be small – say around 50px.

For an image without the widget background around it, make the image 492×62 and use this code:

<img style="margin:-14px;" src="IMAGE URL HERE" alt="DESCRIPTION HERE" />

B. For an image below the title and tagline, spanning the entire header

<div style="position:relative;right:502px;top:80px;padding-bottom:60px;">
<img src="IMAGE URL HERE" alt="DESCRIPTION HERE" /></div>

The image must be 980px wide.

For an image with a border, make the image 970px wide, and add this after “img”:

style=”background-color:#HEX HERE;padding:5px;”

(For hex color codes, see “Colors” under Links 1 in my sidebar.)

C. For an image spanning the entire header and covering the original title and tagline

<div style="position:relative;right:502px;">
<a href="BLOG URL HERE">
<img style="margin-top:-14px;margin-bottom:-14px;" src="IMAGE URL HERE" alt="DESCRIPTION HERE" /></a></div>

The image must be 980px wide, and its height must be no less than 80px. Naturally, it must include the blog title.

Alternatively, you can make it semi-transparent [*] and let the original title and tagline show through:

<div style="position:relative;right:502px;-moz-opacity:0.3;opacity:.30;filter:alpha(opacity=30);">
<a href="BLOG URL HERE">
<img style="margin-top:-14px;margin-bottom:-14px;" src="IMAGE URL HERE" alt="DESCRIPTION HERE" /></a></div>

[*] But watch out: may not work in Explorer.

In both cases, for an image with a border make the image 970px wide and add this after the margin commands in the image style code:

background-color:#HEX HERE;padding:5px;

Update: WP added a Custom Header option to the theme (under Appearance); but that’s just for a 50×50 px image replacing the three intersecting circles to the left of the blog title.

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

67 thoughts on “Custom header image in Motion

  1. @Panos
    I’m smiling because yesterday afternoon I put this theme up on a test blog and played around with inserting headers too. Thanks for sharing this information. I’m sure someone will post to the forums asking about it very soon. :)

    Posted by timethief | February 12, 2010, 23:22
  2. You bet they will!

    Posted by Panos | February 13, 2010, 03:10
  3. Hey Panos, I found the header module on the far right side of the screen when I went to appearance>widgets, but it would not let me cut and paste or type into the drop down window. Please help

    Posted by adminmo | February 14, 2010, 19:54
  4. @adminmo: It’s like the sidebar module; you open it, drag a text widget to it, type or paste into the text widget, click Save.

    Posted by Panos | February 16, 2010, 12:09
  5. Thanks. I figured it out right after I sent the email. But I will have loads of other questions about motion but I’ll try to be more judicious in my query making.

    Thanks tho bro

    Mo

    Posted by Mo | February 17, 2010, 03:56
  6. You’re welcome (questions are welcome too)!

    Posted by Panos | February 18, 2010, 02:33
  7. Ok one more custom header question…There is a default header for motion which is the three colored rings. They are beautiful but prefer there be just the background there. There is not that option when I go to appearances>customer header. The only option is to put your own up there which would really clash with the color scheme. I would like there to be no default header. I like the text option that I used and want the default removed. Help

    Posted by adminmo | February 18, 2010, 05:00
  8. Yes, the only option is to put your own up there, so the only way to do what you’re looking for is put a suitable one. Copy and upload this:

    http://wpbtips.files.wordpress.com/2010/02/motionheaderpatch50.png

    Two notes:
    a) Your header image is too short (leaves an empty rectangle to the right). As I’m saying in the post, the image must be 980px wide.
    b) Apparently you have deleted the blog title. That’s not advisable: it will kill your blog in Google.

    Posted by Panos | February 18, 2010, 07:17
  9. I agree with Panos. The most important link in your blog is the blog title link in the header. I would never sacrifice that Google juice for aesthetics.

    Posted by timethief | February 18, 2010, 07:38
  10. Panos you’re my bestest friend!!!!

    Posted by adminmo | February 19, 2010, 06:36
  11. Yep you’re a light in a dark cave a freakin’ torch you are. P.S. Imma have a lot more questions

    Posted by Mo | February 19, 2010, 06:38
  12. Just had a thought, is there a way I can make my blog title invisible in that case? I think design wise the blog title in Motion is really the pits. If I can make it invisible that could work. If not I’ll just rely on the other SEO strategies I plan to implement once I can get the design elements and extras in place.

    Posted by Mo | February 19, 2010, 08:03
  13. @tt: Thanks for weighing in!

    @Mo: You’re welcome (but cut the exaggerations please)!

    Make the title invisible? Well, in theory you can mask it. Copy and upload this mask, then copy the URL you’ll get:

    http://wpbtips.files.wordpress.com/2010/02/motionttmask.png

    Put it in the widget where you’ve got the header image, like that (before the div for the image):

    <div style="position:relative;right:452px;">
<img style="margin-top:-14px;margin-bottom:-14px;" src="MASK_URL_HERE" /></a></div>

    This mask is 92px high, so to compensate you must add this to the style of the div enclosing the header image code:

    margin-top:-92px;

    In practice, the transparency may not work in the lousy browser called Explorer (and unfortunately used by more than 50% of internet users). When I worked out the codes for this post, I tested it in IE and it worked; today it doesn’t. So I would strongly suggest you abandon all that and use my suggestion for an image that covers the title (first code under “C” in the post) instead of a transparent one (with a different version of your header image, of course – one with colors that would blend with the theme bg).

    Posted by Panos | February 19, 2010, 13:47
  14. Can anyone tell me how to make my own custom header for the motion theme (without CSS upgrade) which will appear transparent like the default one. I’ve made a png with transparent background, but so far when I upload it the new header always appears with a black bakground.

    Posted by Matt Freer | February 20, 2010, 11:26
  15. @Matt: Please upload the image via Media > Add New, copy the URL you’ll get and paste it here so I can have a look at it.

    Posted by Panos | February 20, 2010, 11:49
  16. Ok I’ve tried it with other png images I have and it still puts a black background on the header when uploaded. Take this image for instance (http://kalaalog.com/wp-content/uploads/2007/08/plant-small.png) I realise the image is the wrong size etc, but it makes the point.

    Posted by Matt Freer | February 20, 2010, 20:47
  17. No it doesn’t make the point, because the point was my seeing what exactly you’re trying to upload, not my seeing what an image with a transparent bg looks like – I know what it looks like!

    If you “realise the image is the wrong size”, then you should also have the answer to your question. When you upload an image in the wrong size, it has to be cropped. The cropped version created by WP is always a jpg, hence no transparency. If you want a transparent image, your png must be the right size (for Motion, 50 x 50 px).

    Posted by Panos | February 21, 2010, 01:24
  18. Great – thans Panos, that explains the problem then, I hadn’t realised cropping it would turn it into a jpeg. I’ll have another go at creating a png the correct size. Thanks for your help.

    Posted by Matt Freer | February 21, 2010, 09:28
  19. You’re welcome. You should avoid cropping in general, because the tool is cranky: transparencies apart, cropping often doesn’t work at all, or produces pixelated images, distorted images, black images…

    Posted by Panos | February 21, 2010, 10:00
  20. PS “I hadn’t realised cropping it would turn it into a jpeg.” Yes, I believe no one would imagine that. I wouldn’t have realized it either if I hadn’t experimented and examined the results in the source code. But I just checked the relevant Support doc, and (to my surprise, because the docs are often silent on tricky details such as this) it does mention the fact:

    http://en.support.wordpress.com/themes/custom-header-image/

    Posted by Panos | February 21, 2010, 10:12
  21. “You should avoid cropping in general, because the tool is cranky …”

    Agreed. For best results with images optimize and pre-size all images to the exact sizes required to avoid using the cropping tool altogether.

    Posted by timethief | February 22, 2010, 06:49
  22. That is just awesome page!!! Thank you. I did the A option without widget background, but it doesn’t work, the background is still in it… But that’s ok. My question is: how can I change (or mask) english parts of page like “filed under” and “latest entries”? http://www.motywujsie.pl

    Posted by Admin | July 19, 2010, 23:47
  23. You’re welcome!

    You can’t change the English parts yourself. (Maybe you can hide them if you have the paid CSS upgrade, but even if it’s possible it’s very tricky.) You should send a request to WP:
    https://en.support.wordpress.com/contact/
    Note that the problem isn’t limited to Polish: I tried French and German too, same problem.

    Posted by Panos | July 20, 2010, 05:45
  24. Hi Panos!
    Thanks for making this available. I just started to use this theme and love it however I changed a few things and would like to make further changes.
    Admin, I did change those, but I had to go to home.php to find that part and changed everything I wanted, to Hungarian (my native language).
    My question is: do you have an idea how to disable the dashed line under the pictures and all the links? I couldn’t find…

    Posted by merci | September 2, 2010, 15:10
  25. Hi merci,

    You need to specify no borders for linking items. But I can’t tell you exactly how to do that, as my blog and my experience are limited to wp.com blogs while yours is self-hosted (different software).

    In a wp.com blog, if you didn’t have the CSS upgrade you would have to do what I’m showing in this post:

    http://wpbtips.wordpress.com/2009/12/24/unwanted-features-in-mistylook/

    If you had the CSS upgrade, you would add this to your CSS:

    .postcontent a { border: none; }

    Hope this helps.

    Posted by Panos | September 2, 2010, 17:40
  26. Thanks for the quick response!
    The strange thing is, that I want some border and I could set it at postcontent (just what you mentioned), but the dashed line did not dissapear! even when there were no borders at all, the dashed line was there.
    I guess it is because these pictures are links as well and I wish to disable this dashed line for all the links. Can you help me in this?

    Posted by merci | September 2, 2010, 17:54
  27. @merci: In that case the CSS would be:

    .postcontent a { border: none; }
    .postcontent img { border: 1px solid #660000 !important; }

    Of course I’m talking wp.com again. And of course the border I’ve specified above is just an example – for the various possibilities check this post:
    http://wpbtips.wordpress.com/2009/10/14/borders-pt-1/

    Posted by Panos | September 3, 2010, 14:21
  28. thanks a lot Panos, I’ll check how this works
    and thanks for the link as well, I’ve found a lot of useful staff here, I appreciate the work you do with all these themes
    bless you:)
    merci

    Posted by merci | September 3, 2010, 14:24
  29. You’re welcome (and thanks for the compliment)!

    Posted by Panos | September 3, 2010, 14:28
  30. Hey Panos, I Love this theme thanks, and the category buttons are cool,
    but I am totally stuck on how to change the text that came with it saying: “Hey there! Thanks for dropping by….etc”
    Peter

    Posted by wonderfeel | September 6, 2010, 12:01
  31. @Peter: Obviously you found out how!

    Posted by Panos | September 6, 2010, 18:46
  32. Yeah Cheers Panos, i’m a happy chappy now, WP support was super quick, have now ventured into widgets …peace!

    Posted by wonderfeel | September 7, 2010, 06:51
  33. @wonderfeel: Searching the forum would have been even quicker! For example:
    http://en.forums.wordpress.com/topic/motion-theme-editing-front-page-rss-link?replies=9#post-436614

    Posted by Panos | September 7, 2010, 09:43
  34. doh! i was searching forums for “Hey there! Thanks for dropping by” b/c this text was the only way i knew to describe it, but thanks for giving me more faith in the forum :-)
    Hay, just noticed the dude who brought the cracker answer to that thread has an icon much like ur own …

    Posted by wonderfeel | September 7, 2010, 10:39
  35. Since you had already found the solution, I thought I’d better add that forum link in case others come here with the same question. Icon is my own (because that dude is me)!

    Posted by Panos | September 7, 2010, 10:52
  36. I custom listed a number of pages on the sidebar to show different books I have written using the widget, but these pages are listed on the top of the page beside Home and About. Can I delete all of the pages titles I listed. I think it is on the Page Navigation section above the title on of my blog on this motion template

    Posted by Mark Mann, Author, Professional Counselor, Astrologer | October 14, 2010, 06:13
  37. @Mark: You need to create a custom top menu. See here:

    http://en.support.wordpress.com/menus/

    Posted by Panos | October 14, 2010, 12:57
  38. Thanks Panos. I was able to cusomize hte Page Navigation Section using the appearance/menu.

    I have another question. I am using the Motion template, which I like very much. Below the name of my blog, the categories are listed in a banner across the page above my posts. I have four or five categories, but I would like them in a certain order. I can’t seem to find a way to order them the way I would like. Any suggestions? Thanks.

    Posted by Mark Mann, Author, Professional Counselor, Astrologer | October 14, 2010, 19:24
  39. You’re welcome.

    As you’ve found, categories are ordered alphabetically. The only way to override that is by adding the HTML for a space before the actual name, but this is rather limited. Give me the names of your categories in the order you want them so we can see if it would work.

    But your category links don’t have to be where they are now. If you wouldn’t mind displaying them next to the Home tab, or in the sidebar, you can order them any way you like. First step: go to Appearance > Theme Options, check the option “Hide category links in top navigation”, click Update Options. Then (to display them next to “Home”) go to Appearance > Menus, add them to the menu you have created, rearrange, save. If you’d rather display them in the sidebar, you can create links to them in a Text widget, or you can create a new menu and add the Custom Menu widget (let me know if you need more details on either of these solutions).

    Posted by Panos | October 14, 2010, 23:43
  40. hi Panos – it seems like you a quite a guru! wonder if you can help… keen to use the Motion theme BUT want it to be really simple, and to remove ALL of the following:

    1) the ‘hey there!’ sentence at the top
    2) the 3-column bottombar
    3) the navigation tabs for post categories
    4) the right sidebar with ‘recent entries’ and ‘browse popular categories’

    Is it possible to do all this without the CSS upgrade?
    Cheers! Rosie

    Posted by theafterlifeinvestigations | January 2, 2011, 13:06
  41. Hi and Happy New Year.

    Re no.3 (assuming you mean the tabs in the header area): Appearance > Theme Options > “Hide category links in top navigation”.

    Re the rest, see here:
    http://wpbtips.wordpress.com/2009/09/28/the-no-widgets-paradox/
    The problem in Motion is that all widget areas are enclosed in a darker background, so if you want nothing in place of the default Header/Sidebar/Footer items you’re left with those empty dark rectangles: that’s the part you can’t remove without the CSS upgrade.

    Posted by Panos | January 4, 2011, 09:42
  42. ThankyouThankyouThankyou for the header tips! I would have never figured this out. Your directions were step by step and so easy!

    Posted by Jacque | January 16, 2011, 06:16
  43. I was wondering if I can ask a question about the top, TOP, menu bar.

    My blog is at stevenbiringer.wordpress.com:

    Question 1: At the top you’ll find a list of pages:
    * Discography
    * Gear List
    * Producer Portfolio

    I like them and they were being added automatically and then all of a sudden, the *Home and *Rss button disappeared and since I’ve added new pages they don’t appear either.

    Question 2: Is there any way I can turn these buttons into mouse-over>drop-down lists with more links?

    Thanks!

    Posted by stevenbiringer | February 1, 2011, 20:12
  44. The default menu of the theme displays all your parent pages (plus the Home and RSS links), and no dropdowns.

    Since you aren’t seeing those now, you have activated a custom menu. You need to edit it (in Appearance>Menus) to make it display whatever you wish, including dropdowns – see here how:
    http://en.support.wordpress.com/menus/

    Posted by Panos | February 1, 2011, 21:44
  45. PS Since I am an experienced volunteer active in the wp.com forum, there’s no need for you to post the same question both there and here.

    Posted by Panos | February 1, 2011, 21:46
  46. Hi – I’m completely new and noob at this. Its my first time and I’m slowly figuring things out. In the html in wordpress where do I insert in order to make the banner so it goes all the way across?

    Thanks for the help.

    Posted by gT | February 8, 2011, 21:02
  47. Hi,
    I’m not sure I understand your question. You mean 1) where to put one of the code models I’m giving in my post or 2) how to make the regular (minuscule) header image larger? If 1, the answer is in paragraph three of my post; if 2, do you have the paid CSS upgrade?

    Posted by Panos | February 8, 2011, 23:16
  48. oooh…i gotcha now. see. newb. thanks!

    Posted by gT | February 9, 2011, 02:50
  49. @gT: you’re welcome.

    Posted by Panos | February 9, 2011, 16:09
  50. Hi,
    Thanks for this very helpful post! I wanted to ask, is there any way to add the header image in a way that covers up the original title, description and logo, but with a width of 640 instead of 980 px? In other words, can I add a header image that’s 640 px wide, without the remaining 340 px on the right being shaded with the widget background?
    MTIA.

    Posted by Eclectologist | February 20, 2011, 13:58
  51. Hi,
    In a wp.com blog it’s not possible without the CSS upgrade. In a self-hosted blog (like yours) it probably is, but I can’t help you with that – see point 1 here:
    http://wpbtips.wordpress.com/comment-guidelines/

    Posted by Panos | February 20, 2011, 15:04
  52. OK – I’ll see if I can find help at the wordpress.org forums. Thanks again for the tip.

    Posted by Eclectologist | February 28, 2011, 11:21
  53. Hi Panos,
    I have read your earlier comments and I appreciate your good work. I would like you to help me now :)
    I have the “Motion” theme. And, the background image that comes with it is this :

    http://s2.wp.com/wp-content/themes/pub/motion/images/bodybg.jpg

    Now, suppose instead of the above, I have my own custom background, and I want to remove/edit the part where its written “Hey there ! Thanks for dropping by …..”, how do I do that ??

    I have already read [ http://wpbtips.wordpress.com/2009/09/28/the-no-widgets-paradox/ ], but as I said the background image is different here, than what’s default. So how do I change it ??

    Thanks in advance :)

    Posted by smilingsun08 | September 17, 2011, 15:28
  54. Hi,
    But sorry, I can’t reply to such a generalized question. Remove or edit are two different things: you want a different text in place of the default one, or an image, or nothing? And is it the frame around the widget that bothers you or not? And what will your custom bg be, a single color or an image?

    Posted by Panos | September 17, 2011, 17:43
  55. Ohh thank you so much, seems I just figured it out after reading your views here :
    http://en.forums.wordpress.com/topic/motion-theme-editing-front-page-rss-link?replies=9#post-436614

    I think, if I want a different text, I can add a Text Widget, and write whatever I want.
    But, if I want it empty, then I still have a white translucent bar (which probably will not go away!!), after I have used an empty Text Widget.

    By the way, how can I add a ‘linked’ image there ?? one that may link to some different website ?? [also please tell how I can add a normal image in that place ... "Hey there ! Thanks for dropping...."]

    And, I wish to use an image and not a solid BG.

    Thank you so much in advance :)

    Posted by smilingsun08 | September 17, 2011, 17:53
  56. Also, two more questions. {If you don’t mind ;)}

    1. If I make my own Custom Menu, then the “Home”,”About” and “RSS” disappears. I can now make a new page for the “Home” and “About”. Well and Good. But, how can I also make a page for the “RSS” icon. (so that there’s an RSS icon at the top !!)

    2. I want to use a widget from “http://flagcounter.com/”, and want to add it to my home-page, Can you tell me where I need to post the code from “http://flagcounter.com/” once I have have designed it there (according to my needs).
    Probably, answer to this will explain how I can add a link from an online translation page too.

    Danke …

    Posted by smilingsun08 | September 17, 2011, 18:04
  57. a) If you want an image bg and nothing in place of the header widget, then no you cannot get rid of the translucent frame: it’s part of the CSS of the theme, and can only be removed if you have the paid Custom Design upgrade. (If you used a solid color bg, then I would be able to hide the frame without the upgrade.)

    b) To add an image (no matter if it’s going to be a plain image or a linking one), you start by creating the image, at a resolution of 72 and preferably in the desired dimensions (because you get better image quality if you don’t let WP do the resizing); then you go to Media > Add New, upload the image, and copy tits URL.

    Then you add an Image widget, paste the URL of the image and the URL of the page you want to link to, Save.
    http://en.support.wordpress.com/widgets/image-widget/

    Or you can use coding in a text widget instead – see here:
    http://wpbtips.wordpress.com/2009/04/01/codes-useful-for-text-widgets/
    If you do it via a text widget, then I might be able to hide the frame around it. But I can’t work this out for you unless I see the actual image.

    Posted by Panos | September 17, 2011, 18:12
  58. Re next couple of questions:

    1. For a tab next to Home and About, you get the URL of your RSS feed and create/add a custom link in the custom menu (but it won’t include the icon). If you want the icon, add the RSS links widget to Header or Sidebar.

    2. You paste the code in a text widget in your sidebar.

    Posted by Panos | September 17, 2011, 18:20
  59. Thank you so much. You have been of great great help to me. :)
    But, I will be back !! :D

    Posted by smilingsun08 | September 17, 2011, 18:23
  60. You’re welcome (yeah, you need to be back for b above)!

    Posted by Panos | September 17, 2011, 18:37
  61. Hey Panos,
    I have a question here. How can we recover a widget in the “Inactive Widgets” menu, if we accidentally delete it.
    I deleted a “Blog Subscriptions” widget, when what I actually wanted was to clear all the data there :(

    Please reply …
    Thanks in advance

    Posted by smilingsun08 | September 20, 2011, 21:08
  62. Widgets move to Inactive if you drag them there yourself or if you switch from a theme to a differently structured one. If you delete a widget, you can add it again from Available Widgets, but you add a fresh one: the data you had entered in the original one are gone. You would be able to recover them if your page had been cached by Google when you had the widget on (but it hasn’t, since you haven’t been writing posts yet).

    Posted by Panos | September 20, 2011, 21:29
  63. Oh yes, thank you so much for the help.
    Actually, I am experimenting all my problems before I begin writing posts ;)

    But, you have been of great help !!
    Thank you …

    Posted by smilingsun08 | September 20, 2011, 21:36
  64. You’re welcome. And yes, I don’t think you’ve got your priorities right!

    Posted by Panos | September 21, 2011, 05:16
  65. Hello,
    I wanted to know something about “Media Library”.
    The problem is, I lose space even if I delete the files.

    Let me explain it to you.
    When I upload an image to just experiment if it looks good for the background, and suppose I am not satisfied, I delete the file(s) from the “Media Library”. But, I am shocked to see that even though I have deleted those files, I have lost some storage space in the process. Can you explain how I can get it back ?? [Although, its not such a big problem now, but it may be so at a later point of time!]

    Thanks in advance …

    Posted by smilingsun08 | September 23, 2011, 18:37
  66. No don’t worry. First, one or a few images are insignificant: in case you’re not aware of this, WP gives you 3GB of space, which is enough for several thousand images (assuming you don’t waste your storage space by unnecessarily uploading high resolution files instead of images at a resolution of 72 – which is what all browsers display). Second, when you delete a file from your Media Library, WP doesn’t remove it immediately, but they do eventually.

    Posted by Panos | September 23, 2011, 22:38

Trackbacks/Pingbacks

  1. Pingback: Custom header image workaround for the theme Motion « WP XPERT - February 15, 2010

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,420,756 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: