Trying to add logo to existing page

[Curtis Thompson]

hello…

unfortunately i’ve never heard of nvu until now – it looks like a standard drag-n-drop authoring tool, but as to how specifically add or interact with it, i would be of no use… :-/

that said – looking at your html and css, i think you could just do it by hand relatively easily, and it might be a route you’d want to consider going forward, as it will make small changes much easier to do.

if you open up your html file in a local text editor, you will see this snippet:

that’s your picture, and the div that contains it. according to your styles (style.css – again easily openable in a text editor), i see that there are no height settings on the div, meaning that it will host more content w/o clipping it…so i’d just paste your logo html right in there beneath it like this:

as the images will be right up next to each other vertically, you have 2 choices at that point to adjust the spacing and placement of the logo:

1. do it in the logo file – make the canvas size of the logo file large enough to fit the space and allow padding around it.

2. adjust the css. this is not as easy, but still easy enough if you want to learn css. you can control alignment and margin with values easily enough to get it placed nicely.

then upload that logo file and your new html file via cyberduck and you should be good to go!

sorry to not be able to offer up how to do it in your specific tool there, but don’t be afraid to just work with the html anyway – it’s amazingly simple and if you get used to it, you’ll find that you have a lot more power and control that way.

let me know if you need any additional guidance!

sitruc

[Neil Orman]

I really appreciate this response, Siturc! Extremely helpful, and I will take your advice and try to get comfortable working directly in HTML. I had just one question right now, about getting the logo graphic in there, before I figure out how to adjust the size etc. You mentioned I should paste my ‘logo html.’ What does that mean exactly? Does that mean I need to FTP the image file itself to the Web server, then copy the URL from that uploaded file? Or something else?
Much appreciated again,
Neil

[Curtis Thompson]

hello…

[Neil Orman] ” You mentioned I should paste my ‘logo html.’ What does that mean exactly”

i meant the img tag snippet that i put in that first response there, although going back and looking, it seems that it got converted and eaten by the system. let’s try this again…if you view the raw html of your current file, you’ll see your div with your picture in it:

<div id="picture"><img src="Neilheadshot.jpg" height="277" width="277"></div>

so then you can add the html image tag for your new logo file (naturally swapping in your stuff instead of my holder vars here):

<div id="picture">
<img src="Neilheadshot.jpg" height="277" width="277">
<img src="[YOURIMGNAME]" height="[WHATEVERHEIGHT]" width="[WHATEVERWIDTH]">
</div>

then re-upload that file and your logo file to the server and it should show up!

sitruc

[Neil Orman]

I see now, thanks Sitruc! So I have the logo in the page now, and am just trying to create space between my headshot and the logo. If you go to the page, you should see what I’m talking about. Any quick advice there? I promise that’s the last question. Thanks very much again either way.
https://www.thinkpiecefilms.com/

[Curtis Thompson]

hello…

i don’t mind the questions – fire away! glad you got the logo in there…

so you have three options:

1. add space in the logo file itself – so currently your logo is 771×306 (see below for more on that, btw) – so you could open it in photoshop or some other editor and make the canvas slightly larger so that space was created around it.

2. you can add a br tag after the headshot image and before the logo image tag to create one line of space. so like this:

3. you can get into your css file and add custom margins for that image. the easiest way to do that would be to alter the image tag to include an id:

and then open up your style sheet file in a text editor and add something like this anywhere in it (logically you might put it near the styles for the parent "picture" div, but it really doesn't matter):

#offsecpic {
margin: 10px 0 0 0;
}

that means that the element with the id "offsecpic" (your picture) has a margin of 10px at the top and zero on the right, bottom and left. if you wanted to make it 10xpx on both the top and bottom for any reason, you would do "margin: 10px 0 10px 0;"

then upload the style sheet and the html and you're good to go.

wrt the image size - you have it at the original size, which is pretty large. typically in web land you don't want your image to be any larger than it is displayed, because then the file is larger in file size than you really need. not the end of the world at all, but just thought i'd mention it.

congrats on your official selection, btw - that's pretty cool!

sitruc

[Neil Orman]

Much appreciated, Sitruc! I can’t thank you enough for such thorough, helpful advice. I want to play around with it more, based on your guidance, but for the moment I adjusted the canvas size and it worked like a charm. Thank you again, and thanks also very much for the kind words.
Neil

[Curtis Thompson]

glad it worked! and feel free to come back with any other questions you might have…