FORUMS: list search recent posts

Trying to add logo to existing page

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Neil Orman
Trying to add logo to existing page
on Sep 29, 2013 at 12:25:25 pm

Hi,
I'm a Web design novice and I'm trying to add a logo to a Web page a friend designed for me. Up to this point I've only been adding/changing text, with a program called Nvu, and then using an FTP program called cyberduck. This time I'm trying to add a graphical element with this logo, which seems more complicated. I was trying to figure out how to do it through this Nvu program, but was worried I was going to hopelessly mess up by page, which can be viewed at:
http://www.thinkpiecefilms.com/
My idea was to add the logo, which is from a film festival, right below my headshot next to my bio text.
Can anyone give me any brief advice on whether I can do this as a layman, with this program Nvu or otherwise? And if so how? Going forward I'm also trying to figure out how I'm going to make small changes like this, which are slightly more complicated than just adding or changing text, without having to pay someone every time (and if paying is the only way, I'd appreciate knowing that too).
Thank you very much!
Neil


Return to posts index

Curtis Thompson
Re: Trying to add logo to existing page
on Sep 29, 2013 at 5:40:44 pm

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


Return to posts index

Neil Orman
Re: Trying to add logo to existing page
on Sep 29, 2013 at 6:25:32 pm

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


Return to posts index


Curtis Thompson
Re: Trying to add logo to existing page
on Sep 29, 2013 at 6:36:10 pm

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


Return to posts index

Neil Orman
Re: Trying to add logo to existing page
on Sep 29, 2013 at 9:53:58 pm

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.
http://www.thinkpiecefilms.com/


Return to posts index

Curtis Thompson
Re: Trying to add logo to existing page
on Sep 30, 2013 at 12:15:09 am

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 771x306 (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:

<div id="picture">
<img src="Neilheadshot.jpg" height="277" width="277"><br/>
<img src="2013_BAFF_Official_Selection_Wht.png" height="200" width="277">
</div>


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:

<div id="picture">
<img src="Neilheadshot.jpg" height="277" width="277"><br/>
<img id="offsecpic" src="2013_BAFF_Official_Selection_Wht.png" height="200" width="277">
</div>


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


Return to posts index


Neil Orman
Re: Trying to add logo to existing page
on Sep 30, 2013 at 2:54:41 am

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


Return to posts index

Curtis Thompson
Re: Trying to add logo to existing page
on Sep 30, 2013 at 5:25:12 pm

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


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]