Adding a Gif to the right of the Main title

monaleasaa · Member · Feb 22, 2012 at 6:41 pm
Copy link

Add topic to favorites
I am using the Twenty Eleven template and I have a picture in the Main Title which is positioned against the left side of the page. I would like to place a small GIF to the right side of the Main Title. Is that possible and if so, once I determine the size of space available, how do I put it up there?

Thanks,

Millgrove Wood Products

The blog I need help with is: (visible only to logged in users)
blakelandscapes · Member · Feb 22, 2012 at 8:27 pm
Copy link
I don’t have a solution but actually have a somewhat similar problem. I have replaced the blog title with a logo, which is on the left and woud like to position the header just to the right of that.

http://www.blakelandscapes.net
timethief · Member · Feb 22, 2012 at 9:02 pm
Copy link
@monaleasaa
All CSS editing is theme specifci and you posted a link to a private blog. Which theme are you working with?
timethief · Member · Feb 22, 2012 at 9:04 pm
Copy link
@blakelandscapes
Please do not post into more than one thread on the same issue. You have already posted this one https://en.forums.wordpress.com/topic/re-position-header-in-2010?replies=3 and Staff will get to you as soon as they can.
blakelandscapes · Member · Feb 22, 2012 at 9:04 pm
Copy link
I’m working with 2010. Not sure why that is my member link. The blog is http://www.blakelandscapes.net
blakelandscapes · Member · Feb 22, 2012 at 9:05 pm
Copy link
My bad
timethief · Member · Feb 22, 2012 at 9:16 pm
Copy link
No problem. :) Only one Staff member appears to be helping with CSS editing these days. Please be patient while waiting.
designsimply · Member · Feb 23, 2012 at 10:49 am
Copy link
I would like to place a small GIF to the right side of the Main Title. Is that possible and if so, once I determine the size of space available, how do I put it up there?
```
#site-title span a {
  padding-right: 40px;
  background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) no-repeat center right;
}
```
Replace http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png with your image link. Adjust the 40px right padding until it fits with the size of your image.
monaleasaa · Member · Feb 27, 2012 at 6:28 pm
Copy link
Hi again, I used the code above to place a small Gif file to the right of the main menu on the Twenty Eleven Template, using the following location address for the file:

C:UsersuserMillgrove Wood Products FilesTest Millgrove Logo Saw-Blade and Log.gif

but it’s doesn’t show up.

Am I not using the correct address or do I have to move this Gif file onto the web?

Millgrove wood products

Thanks,
timethief · Member · Feb 27, 2012 at 7:10 pm
Copy link
@monaleasaa
This is just to make you aware of the notice Staff have posted at the support link http://en.support.wordpress.com/contact/

Support will be closed this Sunday and Monday. It will re-open on Tuesday, February 28th. The forums are open over the break.
monaleasaa · Member · Feb 27, 2012 at 9:43 pm
Copy link
np, thx very much… :)
timethief · Member · Feb 27, 2012 at 9:49 pm
Copy link
I thought to might want to know so you could adjust how you organize your time and life.
originalwebdesigner · Member · Feb 28, 2012 at 4:14 pm
Copy link
Hello ….
I am becoming an active member in a short time … :-)
the path to your image
C:UsersuserMillgrove Wood Products FilesTest Millgrove Logo Saw-Blade and Log.gif
is the path ON YOUR HARD DRIVE
Yes you have to upload it somewhere (most probably your media libraryin WP) and then copy/paste its address ..
Something like :
http://zeredac.files.wordpress.com/2012/02/troubadour.jpg
Inbetween background: url( ….)
monaleasaa · Member · Feb 28, 2012 at 5:50 pm
Copy link
That’s what I thought, but I wasn’t sure where to upload it too… Thanks very much for the advice .. cheers
monaleasaa · Member · Feb 29, 2012 at 6:26 pm
Copy link
HI. I’m still having problems with the gif that I created.. i can’t get it to show up.

I tested the code, using the WP logo and it appeared and I adjusted the size for the positioning and that worked. However the logo I created won’t show up.

I have adjusted the size of my logo and placed the http address but still nothing.
(http://millgrovewoodproductsltd.files.wordpress.com/2012/02/millgrove-logo-saw-blade-and-log-100.gif) (Twenty Eleven Template)

would you mind taking a look to see what I’m missing? Thanks,
monaleasaa · Member · Feb 29, 2012 at 10:23 pm
Copy link
Update,,, I copied the code listed above and placed it further down the template. Refreshed the site and the WP logo appeared,. Now the WP logo is a “png” file and the one that I created is a “gif” file. So I created a png file for my logo and reduced the size and it shows up, however it is not a clear, acceptable image.

When I replace my png file with my gif file, the gif logo does not appear … Why????

What am I doing wrong? Thanks,,,,,
designsimply · Member · Mar 1, 2012 at 4:05 pm
Copy link
I have adjusted the size of my logo and placed the http address but still nothing.
(http://millgrovewoodproductsltd.files.wordpress.com/2012/02/millgrove-logo-saw-blade-and-log-100.gif) (Twenty Eleven Template)

The link you listed here is no longer a working image link. It looks lik you uploaded an image but then you deleted it. Can you please try the following?

1. Go to Media → Add New in your blog

2. Either drag the millgrove-logo-saw-blade-and-log-100.gif image from your desktop or file manager into the area inside the dashed line to upload it or click the Select Files button and find the millgrove-logo-saw-blade-and-log-100.gif image on your hard drive and select and upload it.

3. Copy the Image URL that shows up after the image is uploaded.

4. Use the Image URL from step 3 in the CSS posted above: https://en.forums.wordpress.com/topic/adding-a-gif-to-the-right-of-the-main-title?replies=16#post-825671

If the image doesn’t look good resized, you can try adding a query string to the end of the link such as ?w=32

It should look something like this except with a different file name and you can choose a different size other than 32 that works best for your image.

If you’re not sure how to add a query string, post your Image URL in a reply here and we’ll show you an example for how it works.
monaleasaa · Member · Mar 5, 2012 at 4:01 pm
Copy link
HI, I tried the code above and I have re-placed the gif image but still nothing… and I’m getting really confused..

Here’s the code that I have:

#site-title span a {
padding-right: 40px;
background: url http://millgrovewoodproductsltd.files.wordpress.com/2012/02/millgrove-logo-saw-blade-and-log-100.gif?w=32
}

If I use just the following code, then it doesn’t load.:

I really need to understand what i’m doing wrong so I can get this site out of here …thanks

Twenty Eleven Template
monaleasaa · Member · Mar 6, 2012 at 1:10 am
Copy link
If there is someone who can help me get this right, i would appreciate it.
designsimply · Member · Mar 6, 2012 at 9:33 pm
Copy link
There are two problems with the code you posted.

First, you must put parentheses around the link in the background line, like this:

background: url(YOUR_IMAGE_URL);

Second, you need a working image link. It appears you may have uploaded an image, but then you deleted it from your media library: http://millgrovewoodproductsltd.files.wordpress.com/2012/02/millgrove-logo-saw-blade-and-log-100.gif?w=32

Let’s start with the image. I looked in your media library and I found this image:
http://millgrovewoodproductsltd.files.wordpress.com/2012/03/millgrove-logo-saw-blade-and-log-100.png

Try copying and pasting the following code exactly into your Appearance → Custom Design → CSS page. Make sure the parentheses are still there after you save changes.
```
#site-title span a {
padding-right: 70px;
background: url(http://millgrovewoodproductsltd.files.wordpress.com/2012/03/millgrove-logo-saw-blade-and-log-100.png?w=60) no-repeat right;
}
```

No items found.