How to change title with an image in the theme 'Motion'?
-
Does anybody know how to change the title with an image in the theme ‘Motion’ ? don’t know CSS .. Would appreciate an answer! Thanks….
The blog I need help with is: (visible only to logged in users)
-
The three interlocking circles can be replaced by creating a new 50px x 50px image and then you can upload it at appearance > header.
To go further than that, we have to have more of an idea as to what you want. Right now the width of #logo which has the interlocking circle image and the site title is 480px wide and does not have a height defined, but that can be added.
What is the size of your logo? Can you upload it to your media library and then give use the URL of that image so that we can see what needs to be done?
-
Thank You!! I did now .. Here http://trolldolls.files.wordpress.com/2011/05/trolldollspink7.png
I want the page to look a little like the old one here: http://troll-dolls.tumblr.com/ (with the pink text instead of ordinary title) -
The following will get you started. Delete the informational text from the CSS edit window and paste the following in, press the preview button and see what you think. In some instances you might have to refresh the preview page to see the changes as some browsers will use a cached version of the page instead of pulling the updated one.
#header #logo { background: url("http://trolldolls.files.wordpress.com/2011/05/trolldollspink7.png") no-repeat scroll -50px 0 transparent; height: 178px; margin: 0 0 10px; width: 660px; } #header #logo img { display:none; } #header #headerbanner { margin: -85px 0 10px; ) -
Oops, don’t use the above, I forgot one bit. Use this instead.
#header #logo { background: url("http://trolldolls.files.wordpress.com/2011/05/trolldollspink7.png") no-repeat scroll -50px 0 transparent; height: 178px; margin: 0 0 10px; width: 660px; } #header #logo img { display:none; } #header #headerbanner { margin: -85px 0 10px; width: 268px; ) -
Thank you!!!
I think I have to do the image/text a little bit smaller, because now the text on the right side is above it.. or maby move that text more to the left.. -
The last bit of the above, should take care of that.
#header #headerbanner { margin: -85px 0 10px; width: 268px; } -
-
You are welcome, and if anything looks out of place or you need to make adjustments, just let us know. I’ll be heading off to dreamland here in a few minutes since it is coming up on midnight here in the middle of the Pacific, but I’ll be back in the morning.
-
-
something more (when time) .. wonder if it is possible to make the grey, transparente boxes under the text, just a teeny weeny bit darker, and if it is possible to have a box under where I write the blog text as well (the content).. and —- the comment box should be better too…… (sorry)
-
Header image in Motion also possible without the CSS upgrade:
-
It is a black 1px x 1px PNG image with transparency. You will have to recreate it with less transparency (more opacity). This is the existing image:
You then need to upload it to the media library and insert the new image URL into the appropriate places in the CSS. Those places would be:
#catnav { background: url("images/blacktrans.png") repeat scroll 0 0 transparent; #sidebar ul li.boxed { background: url("images/blacktrans.png") repeat scroll 0 0 transparent; } .posttop { background: url("images/blacktrans.png") repeat scroll 0 0 transparent; } #footer { background: url("images/blacktrans.png") repeat scroll 0 0 transparent; } #footer ul li { background: url("images/blacktrans.png") repeat scroll 0 0 transparent; } -
-
-
argh…. CSS is so diffidult!! Do the code thing about fix a box under “pages” as well? Like this on thos page: http://trolldolls.wordpress.com/amina/
-
The image is only 1px square, is it is as tiny as it can be (a single pixel).
The way I do transparent images, or images with transparency is to create an image that is say 200px by 200px so that it is easier to see and work with and then when I’m satisfied with it, I resize it to 1px x 1px, or 10px x 10px, or whatever size I plan on using and then save that as a PNG making sure I have transparency on when I save it.
The above sections of the CSS will change the lower footer area on all pages.
-
With the nature of your background image, posts and page content are going to be difficult to read since there is no background with opacity for the post and page content, especially over the reflections on the water, and when over the snow, the text almost disappears. One solution would be to add a transparent background color to the content. You might try the following and see what you think.
#content { background: url("images/blacktrans.png") repeat scroll 0 0 transparent; padding: 10px; } -
Here is a further tweak of the above. I inserted the full URL since I forgot the relative URL that is in the original CSS won’t work in the custom CSS also.
#content { background: url("http://s2.wp.com/wp-content/themes/pub/motion/images/blacktrans.png?m=1391151707i") repeat scroll 0 0 transparent; margin-bottom: 15px; padding: 10px 15px 0; } -
oh.. I thougt that was what I was going to make now.. a box for posts and content.. Will try the things above! :)
- The topic ‘How to change title with an image in the theme 'Motion'?’ is closed to new replies.
WordPress.com Forums 
