HTML to make a logo?

sml · December 31, 2013

I have just about finished my "new" SmugMug site. However, I'd like to adjust something with my existing text in the "Logo" block.
I've written to the Heroes, but didn't get specific advise in this case (though I have found them to be extremely supportive and helpful throughout the process!!).

As it stands, I have "stephen m. levin photography" all in one line. Using Maven Pro font. I'd just like to have it in two lines with my name in the top line and "photography" in a smaller (same) font underneath and right justified. I've played around with HTML for a long time this AM and can't quite seem to come up with the recipe to do this.
I'm assuming I could then drop that into an HTML block, replacing the existing "logo" block. Does that sound right?
Any suggestions?

By the way, I tried to do this in Photoshop...seems it would be easy. But, I can't access Maven Pro there and it's also not available on the Adobe Creative Cloud.

Thx!

Hikin' Mike · December 31, 2013

That's kind of what I did. I deleted the existing Logo Block and added a HTML/CSS Block and added the code there.

Try this:

HTML:
[html]
<div id="my-header">
<div id="my-logo">
<a href="/" title="stephen m. levin photography" rel="home">
<span id="my-title">stephen m. levin</span>
<span id="my-description">photography</span>
</a>
</div>
</div>
[/html]

CSS:

#my-header {
    font-family: 'Maven Pro', sans-serif;
    margin: 0 auto;
    width: auto;
    text-align: center;
    }

#my-logo {
    display: inline-block;
    }

#my-title {
    display: block;
    font-size: 1.5em;
    }

#my-description {
    font-size: 1em;
    }

sml · January 1, 2014

Wow! I can't believe you provided that for me! Thanks so much.
I REALLY need to learn more about HTML and CSS. I may take a class/seminar this winter...
Anyways, this will be a good starting point. I played around with it. Not "exactly" what I wanted. The font I have must be a derivative of Maven Pro....doesn't look the same. But, I'll spend some time with it to see if I can get it to match the existing text.
Again...thanks SO much!! Really appreciated.
Happy New Year.

Hikin' Mike · January 1, 2014

sml wrote: »

Wow! I can't believe you provided that for me! Thanks so much.
I REALLY need to learn more about HTML and CSS. I may take a class/seminar this winter...
Anyways, this will be a good starting point. I played around with it. Not "exactly" what I wanted. The font I have must be a derivative of Maven Pro....doesn't look the same. But, I'll spend some time with it to see if I can get it to match the existing text.
Again...thanks SO much!! Really appreciated.
Happy New Year.

I was bored...

! Seriously though, not a big deal. I needed a break from creating a plugin for my Wordpress site.

Not sure why your font isn't displaying though. I'll see if I can figure something out.

Hikin' Mike · January 1, 2014

Try this. I added the 'font-face' code just in case, and increased the font size.

@font-face {
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: 400;
    src: url(http://themes.googleusercontent.com/static/fonts/mavenpro/v4/MG9KbUZFchDs94Tbv9U-pfY6323mHUZFJMgTvxaG2iE.eot),
        url(http://themes.googleusercontent.com/static/fonts/mavenpro/v4/MG9KbUZFchDs94Tbv9U-pfY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'), 
        url(http://themes.googleusercontent.com/static/fonts/mavenpro/v4/MG9KbUZFchDs94Tbv9U-pT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),
        url(http://themes.googleusercontent.com/static/fonts/mavenpro/v4/MG9KbUZFchDs94Tbv9U-paCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
    }    
#my-header {
    font-family: 'Maven Pro', sans-serif;
    margin: 0 auto;
    width: auto;
    text-align: center;
    }

#my-logo {
    display: inline-block;
    }

#my-title {
    display: block;
    font-size: 60px;
    }

#my-description {
    font-size: 50px;
    }

sml · January 1, 2014

So thankful to you for taking the time to work on this! Not at all what i expected.
It's still much smaller than the existing text.
If you can give me some general pointers with the code, perhaps I can play around with it? And I'll add the color, too (#ee8557).

Again, thanks.
(Took me a long time to get started on Dgrin! I shouldn't have waited so long!!)

Steve

(Attaching screen shots....HTML and existing text.)

Hikin' Mike · January 1, 2014

PM sent.

HTML to make a logo?

Comments