Please go ahead and add that logo…right now there is none, so we would be hard pressed to look at how to advise a CSS change.
Thanks for your quick response. I have given my best attempt to put my logo in the header using an image widget, you can see (barely) in the top right of the header what I get. It doesn’t even fill the available space. Originally i tried removing all text from the header to make more room for the logo, but all it did was shrink the white space of the header. I like the dimensions of the header the way they are now, i most likely need to scale the image to work within that space, which i could probably manage if i had any clue how to get it to do what i want it to do in the site.
So that you can see the whole logo trying to work with here, i posted in on one of my empty pages:
http://john-messenger.com/for-children/
There, of course, much smaller than i would like it to be in the logo. Ideally it would fit with the text sizes and header dimensions as they are in the header now. Also the proportions in the logo of of image to text size are correct.
Thanks!
There, of course, much smaller than i would like it to be in the logo. Ideally it would fit with the text sizes and header dimensions as they are in the header now
The image should be uploaded in a proper size and resolution as desired for site. It should be a Header Image and not a Featured Image.
The only option i see for loading it as a header image is the header background, which only lets me pick a half inch strip to stretch across the entire header…as background. Am i missing something?
No you are not, but by setting as header image there are few tricks…so please do so…note: do not use the crop function…just upload as header and say no to crop it…
Um, okay. Well i scaled it to a decent size, put it in without cropping, and now it has automatically been stretched to a ridiculous size. but here it is.
[Duplicated link moderated]
Making progress. Experimenting with different file types I switched header image from GIF to PNG and i got it the right size. Now i just need to shift it down thru the menu board so i can tighten up the header again to just the height of the top portion of the tree.
[Duplicated link moderated]
thanks!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Okay I’m studying HTML and CSS trying to get a grip on things here, in the meantime I have another specific question. I have somehow managed to get one of my png saved images to show at a decent size, as shown on my site:
http://john-messenger.com/
I took this same image out of microsoft publisher where i designed it, imported it into Gimp, made the background transparent, and then scaled the image by 50% (as i did in the image posted in the header now) and wordpress made it HUGE and fuzzy. So i went into gimp and scaled it again by 50% and uploaded it into my header and wordpress expanded it to the same giant size, only it was MORE fuzzy since it was expanding a smaller image. why is this happening? it’s still a png file, which seemed to be the golden ticket as far as getting any image to show up the way i sized it.
Thanks!
john
John – from what I can see, you may have better luck putting the tree graphic as a background image in the wrapper div – and then positioning the page elements around that image.
Sorry about the multiple posts, i stopped getting responses on this one and thought maybe it had moved to the bottom of the pile and people weren’t seeing it anymore or something.
Anyway, so you’re suggesting just putting the tree as the background image the way i had it, and then moving the whole menu bar up over it? Any ideas to get me started on how to try that? Also how to move apart the menu links to make space for the image to pass between them?
I’m starting to kind of understand how to modify things myself as people give me specific examples of how to do a thing i’m asking for. once i’ve done it with one thing, i get it and can do it with other things. so i’m now able to individually edit all the fonts all colors for individual menu items, a different post someone helped with doing it on one. but now i need to understand what it looks like to move individual menu items, or specific groups of menu items.
Thanks!
=============RE:
Okay here’s my website:
http://john-messenger.com/
Here’s what i’m trying to do. I’m new to CSS but I’m using Firebug to locate the elements I want to edit and playing around with trying to manipulate them. A lot of trial and error. But i want to do a few things that seem complex to me. The tree logo that is at the top, i want to move it down so that the words are just above the top of the menu bar and the image of the tree passes thru the menu bar, tree top in the header, roots in the body, and the menu items parted in-between “poetry” and “creative non-fiction” So i want “poetry” and “non-fiction” on the left side of the portion of the tree image going thru the menu bar, evenly spaced on their side, and all the other menu links on the right, evenly spaced on their side. I potentially want to invert the color of the tree trunk where it passes thru the menu bar from black to white so that the lines of the image don’t get lost passing thru the black menu bar. At this point, i would be happy if i was able to make any of the menu items move their positioning individually (so far i’ve only been able to affect them by changing their padding and thus squeezing them all or widening them all). Also, i would be happy if i could move the tree…at all. I figured how to move my head shot on the home page by adjusting the margins:
.alignleft {
float: left;
margin: -25px 10px 10px 0;
But the tree doesn’t give me pixels to play with, all i can find with Firebug relating to the trees alignment is:
#site-title img {
vertical-align: middle;
Which doesn’t do anything when i play with it.
Help!
Thanks
I would try putting the tree as a background image in this CSS:
#wrapper {
background: none repeat scroll 0 0 #F8F8F8;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
margin: 0 auto;
max-width: 1140px;
overflow: hidden;
position: relative;
}
I think that’s going to be the easiest way to get it below the header/menu section — as the wrapper contains the whole page. I jus think putting an image (not as background) in the header is going to be tricky (if it’s even possible) to get it to go behind lower elements on the page.
Thanks, I’ve gotten this far!
http://john-messenger.com/
Main things I’m struggling with now are to increase font size of all menu items, and shift the entire menu grouping to the left. I’ve tweaked it so it should space out just right if i can get the whole menu bar to left justify. couldn’t figure that one out.
Ah, one more thing. Now that i’ve adjusted padding to 6px the spacing is great (between links, not overall) but i will want just the “home” link (which is permanently highlighted in what is now “peru” which was a typing accident in Firebug that i really liked Tongue ) to have the peru colored portion around it be wider, that is to say, to have a little bit more space between “home” and “poetry” than the rest. I really like how that one chunk of color stands out in contrast to the rest of the black and white, but if it’s too narrow it doesn’t accomplish the balance if that makes sense. I’d like to give just “home” a padding of 20px
I think i’m starting to understand CSS enough that i get how to type commands, but even with firebug i still really have trouble finding the right selectors. I’ll get there. I really appreciate your help.
Thanks!
John
Wow, John, that looks great! Just to be sure – you want the home and poetry menu items on the other side of the tree?
THanks! Yes, the links are spaced well and there is a space between them for the tree, I just need to move all of them left so the home and poetry are on the left of the tree and everything else the right. And then adjust the horizontal padding of the “home” item only.
