WordPress.com Forums » Tag: Header image - Recent Posts

thesacredpath on "Sight theme: Adjust header image width"

thesacredpath — Tue, 14 May 2013 18:19:53 +0000

If you want a full-width header image, can you respond in the other thread you started on that so we can keep from confusing things with me answering in two different places?

thesacredpath on "Sight theme: Adjust header image width"

thesacredpath — Tue, 14 May 2013 18:19:04 +0000

Do you want a full-width header, or do you want to put a logo to the right of the existing header? In another thread you started you stated you wanted a full width header image.

thesacredpath on "Allow "Sight" theme banner logo across entire page"

thesacredpath — Tue, 14 May 2013 17:59:17 +0000

Add the following to your custom CSS and create a new header image that is 975px x 181px, upload it to your media library, get the URL of that image (save module at right on upload media page), and replace URL OF IMAGE between the double quote marks in the background declaration below.

.site-header {
padding-right: 0;
}

.site-header hgroup {
background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
width: 100%;
}

winbassett on "Sight theme: Adjust header image width"

winbassett — Tue, 14 May 2013 11:44:39 +0000

Nothing seems to change.
http://thewayfaring1.files.wordpress.com/2013/05/header_23.jpg

timethief on "Allow "Sight" theme banner logo across entire page"

timethief — Mon, 13 May 2013 17:28:03 +0000

You're welcome and please be patient while waiting as only a couple of Volunteers help with CSS and they aren't logged in.

winbassett on "Allow "Sight" theme banner logo across entire page"

winbassett — Mon, 13 May 2013 17:24:14 +0000

Thanks!

timethief on "Allow "Sight" theme banner logo across entire page"

timethief — Mon, 13 May 2013 17:23:31 +0000

I tagged this thread and it will be moved to the CSS Forum for you.

winbassett on "Allow "Sight" theme banner logo across entire page"

winbassett — Mon, 13 May 2013 17:16:47 +0000

I'd love to be able to put an image that spans the entire banner area on the frontpage.

Currently, see http://thewayfaring.com

Thanks!

thesacredpath on "Sight theme: Adjust header image width"

thesacredpath — Mon, 13 May 2013 04:35:36 +0000

The code would look something like this although adjustments would likely be necessary depending on logo size.

#header {
background: url("URL OF IMAGE") no-repeat scroll left top transparent;
text-indent: -9999px;
}

#header a {
display: block;
}

#header a:hover {
background-color: transparent;
}

If you upload the image to your media library and then post the URL of that image here, we can get closer than the above.

winbassett on "Sight theme: Adjust header image width"

winbassett — Sun, 12 May 2013 20:46:29 +0000

@thesacredpath

I'm trying to add an image (logo) to the right of my site title in "Sight." Can you help with the CSS (just using URL for image path for now).

Thanks!

thesacredpath on "Sight theme: Adjust header image width"

thesacredpath — Sun, 12 May 2013 20:21:53 +0000

You are welcome.

mensalcoweb on "Sight theme: Adjust header image width"

mensalcoweb — Sun, 12 May 2013 17:52:40 +0000

Yeah!!! that worked ;)

Thank you so so so much!

thesacredpath on "Sight theme: Adjust header image width"

thesacredpath — Sat, 11 May 2013 03:31:20 +0000

Sorry, I see that now. It didn't show originally with Firebug in Firefox. Delete what I gave you and add the following.

.site-header hgroup {
background: url("http://mensalco.files.wordpress.com/2013/05/header05.jpg") no-repeat scroll right top transparent;
width: 975px;
}

.main-navigation {
margin-top: 0;
}

mensalcoweb on "Sight theme: Adjust header image width"

mensalcoweb — Sat, 11 May 2013 01:38:13 +0000

Almost there! there's a white area on the right side and the bottom.
The image size that I uploaded is 975x164

thesacredpath on "Sight theme: Adjust header image width"

thesacredpath — Sat, 11 May 2013 01:09:17 +0000

Give this a try.

.site-header hgroup {
background: url("http://mensalco.files.wordpress.com/2013/05/header05.jpg") no-repeat scroll left top transparent;
width: 100%;
}

mensalcoweb on "Sight theme: Adjust header image width"

mensalcoweb — Sat, 11 May 2013 00:50:23 +0000

ok, here it is:
http://mensalco.files.wordpress.com/2013/05/header05.jpg

thesacredpath on "Sight theme: Adjust header image width"

thesacredpath — Fri, 10 May 2013 23:56:33 +0000

We can do that. Have you prepared the image and uploaded it to your media library? If so, get the URL of that image by going to media > library, click on "edit" and then in the save module at upper right, copy the URL and paste it here.

mensalcoweb on "Sight theme: Adjust header image width"

mensalcoweb — Fri, 10 May 2013 23:22:45 +0000

Thanks for your reply, but unfortunately is the heigh that is flexible, but not the width, so I thought there could be a css to allow me change it.

Is there another way?
Thanks!

thesacredpath on "Sight theme: Adjust header image width"

thesacredpath — Fri, 10 May 2013 21:07:28 +0000

Sight supports the flexible header image. Upload the image at appearance > header in the side you want and then click the "use as is" button to insert the header without cropping or resizing.

mensalcoweb on "Sight theme: Adjust header image width"

mensalcoweb — Fri, 10 May 2013 18:51:37 +0000

Hi there, I need some help to adjust the image size of the header.
Any suggestions?
Thanks!!

thesacredpath on "Move header image above menu bar"

thesacredpath — Tue, 23 Apr 2013 20:59:24 +0000

You are welcome.

cablueprinting on "Move header image above menu bar"

cablueprinting — Tue, 23 Apr 2013 20:51:02 +0000

Magic! Thanks :)

thesacredpath on "Move header image above menu bar"

thesacredpath — Tue, 23 Apr 2013 20:47:05 +0000

Add this to the custom CSS:

.site-header img {
box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.2);
}

cablueprinting on "Move header image above menu bar"

cablueprinting — Tue, 23 Apr 2013 19:59:57 +0000

Thanks thesacredpath.
I was just trying the copy/paste option to see if I could get it to work. I have erased it all and just added the code you gave me and it worked. Thanks!

Now can you tell me how to remove the line above the image? :)

cablueprinting on "Move header image above menu bar"

cablueprinting — Tue, 23 Apr 2013 19:54:34 +0000

Ok I did... Can you help me now??

thesacredpath on "Move header image above menu bar"

thesacredpath — Tue, 23 Apr 2013 19:53:44 +0000

Take a look at this and see what you think. Add it AFTER all your existing CSS. In general it is not a good idea to paste the entire stylesheet into the CSS edit window unless you are making, massive changes to virtually everything, otherwise it can create conflicts. It is best to put into the edit window, only the specific selectors, an only the specific declarations you are adding or changing.

.site-header {
    position: relative;
}

.main-navigation {
    position: absolute;
    top: 135px;
    width: 100%;
}

.wrapper {
    margin-top: 30px;
}

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-top: none;
}

timethief on "Move header image above menu bar"

timethief — Tue, 23 Apr 2013 19:46:51 +0000

This site is a free hosted WordPress.com blog http://fourthingsbycablueprinting.com/ and I suggest you link you username to it. Dashboard -> Users -> Personal Settings -> then scroll down to Account Details. Then scroll down to where it says ‘Primary Blog‘ select the URL for your primary wordpress.com blog and then save changes.

timethief on "Move header image above menu bar"

timethief — Tue, 23 Apr 2013 19:45:28 +0000

This site http://www.cablueprinting.com/ linked to your username is not a free hosted WordPress.com blog and you cannot get support for it here. WordPress.com and WordPress.org blogs are separate and have separate logins. We provide support here only for free hosted WordPress.COM blogs and no others. You are posting to the wrong support forums. If you don't have a username account at WordPress.org click http://wordpress.org/support/ and register one on the top right hand corner of the page that opens, so you can post to the support forums there and receive advice from WordPress.org bloggers.

cablueprinting on "Move header image above menu bar"

cablueprinting — Tue, 23 Apr 2013 19:38:43 +0000

I want my header image above the menu... Dont know how else to say it :|
I have the custom CSS upgrade and am ok at CSS but I cant figure this out...

designsimply on "Widening header image Blogum theme"

designsimply — Tue, 23 Apr 2013 15:14:57 +0000

I tried doing that, but it is not giving me the option to click "use as is."

I don't think Blogum has the flexible header image option just yet, but you can indeed make a change like that with custom CSS. Since cupofchic has switched themes, if anyone else is looking for help doing that, please make a separate help request with a link to the blog you're working on.