Customizing About Me page

RB13 · February 18, 2015

Hello,
New to this forum. I was directed here by one of the SmugMug Heros. I am attempting to move a text box with my bio info higher up on my About Me page. I need it positioned differently than it is but was told the basic limitations of the template won't let me.

I would also like to change the font.

Would anyone be able to offer suggestions? I'm new to this kind of website customizing.

Many thanks!
RB13

RB13 · February 18, 2015

Sorry. My page is: http://ronbathphotography.smugmug.com/PAGES/About-Me

Allen · February 18, 2015

Can't see because of the page password.

Tom Foster · February 19, 2015

The password (I'm sure he won't mind me sharing) is 'notreadyyet'... got this from the hint box!

I don't understand what the exact problem is however, can you not move the box when customising page content and design?

RB13 · February 19, 2015

Thanks guys for looking. And yes, Tom, I cannot move the text box. And exactly what I want to do is move it up to just below my mug. Tuck it in below mug and by images. Need to be able to select and change font as well.

Tom Foster · February 19, 2015

Looks fine on mobile but I see what you mean if I view as desktop.

What about bringing the other picture up so you have them in a 2x2 grid and then have the text full width? Alternatively you could do it with a HTML table and the images in the individual cells in a layout of your choosing. That should work I would think but then layout on mobile may be more of an issue then.
I've had this issue before actually, not easy to have things of differing heights in different columns without the layout going crazy!

Tom Foster · February 19, 2015

Oh and I think you can change font easily enough on the theme settings/customise theme options. I'm out at the moment so can't give you the exact name of the page but that at least is easy enough to do!

RB13 · February 19, 2015

I found the way to access font change by customizing theme option. THANKS!

I see what you mean about changing the three display photos to match my mug size, but I don't care for that look as much.

And, I am HTML ILLITERATE, so when you said "Alternatively you could do it with a HTML table and the images in the individual cells in a layout of your choosing." you lost me. Are you talking about creating code?

As easily as everything has gone up to this point in my Smugmug designing experience, I'm a bit flabbergasted at not being able to scoot that darn copy block up 3".

And you're right, it does look fine on Mobile...but the majority of my intended audience, family, friends, specific clients, will be accessing it via desktop.

Lille Ulven · February 19, 2015

Let me see if I can manage to write that html code down for you here...

<table>
  <tr>
    <td>
     <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/DEATH-VALLEY-NATIONAL-PARK/i-GFbNmsG/0/M/Death%20Valley%2C%20Dante%27s%20Peak--M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_121" class="sm-image" data-clientid="sm-image-model_2" alt="" title=""></img>
    </td>
    <td>
      <img itemprop="image" src="http://ronbathphotography.smugmug.com/PAGES/TEXT-LOGO/Branding/i-wfJSRZD/0/S/Self%20Portrait-251-S.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_147" class="sm-image" data-clientid="sm-image-model_3" alt="" title=""></img>
    </td>
  </tr>
  <tr>
    <td>
        <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/LIFESTYLE/i-hJFsptg/0/M/La%20Grange-3610-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_173" class="sm-image" data-clientid="sm-image-model_4" alt="" title=""></img>
</br>
<img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/BOTANICALS-/i-RQPHXD4/0/M/San%20Diego%2C%20JAN%202014-4-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_199" class="sm-image" data-clientid="sm-image-model_5" alt="" title=""></img>
    </td>
    <td>
<p><span style:"font-size=16px">
Really, the three most important things to know about me are that I love God, I love my family and I love photography. I am truly blessed and I hope it shows in my work.
</br>
Actually, the word "work" is not accurate. Photography is not work, it's a passion and a gift. Ask any photographer. What we get to do is an amazing privilege.
</br>
My career began with a plastic camera, some film and a photo scrapbook complete with lick & stick corners to hold the pictures in place. I was nine and it was a present from my Aunt.
</br>
Over the last 39 years I worked on four newspapers in the Midwest; 29 of those years at a weekly Business paper. I have received many awards for my photographs, but the biggest "reward" has been the countless wonderful people and places I have been able to meet, see and photograph. I retired from Photojournalism in 2013.
</br>
I continue to do client work. Whether it is portraiture, street, landscape, abstract, event, commercial or photojournalism, architectural or botanical, photography delights me. And I love sharing that delight with others.
</br>
I want to take the viewer somewhere they have never been before, or show a different way of seeing the commonplace and everyday. It's all about connecting visually.
</br>
Thanks for visiting my site.
</br>
</br>
If you have a comment, an inquiry about purchasing prints, or you need a photographer, click on the Contact link on this page.
</span></p>
    </td>
  </tr>
</table>

So with

<table></table>

you open up for the general layout of a table.

<tr></tr>

defines the range of one row.

<td></td>

are cells in a row.

So to make your layout work (hopefully) I defined a table of two columns and two rows, this because to get started with your text at the top of the second photo (from top).
The first row contains two columns which each contain one image.
The second row contains again two columns, but the first column here contains two images, while the second one would include all your text. Just copy it in where I have the "..." and for every new paragraph you'll have to add a

</br>

.
This should in theory do the trick for you.

Good luck!

Lille Ulven

RB13 · February 20, 2015

Lille...Thanks so much for taking the time to write this out for me. I am so appreciative of your generosity. But I am truly a fish out of water with this HTML stuff.

I copied your code, dragged the HTML box onto my About Me page, pasted it in and then had no clue what to do from there. When I did all of that, it duplicated the four images and the first graph of my text. I just didn't know what to do next.

Sorry to be so dense.

Ron

denisegoldberg · February 20, 2015

RB13 wrote: »

Lille...Thanks so much for taking the time to write this out for me. I am so appreciative of your generosity. But I am truly a fish out of water with this HTML stuff.

I copied your code, dragged the HTML box onto my About Me page, pasted it in and then had no clue what to do from there. When I did all of that, it duplicated the four images and the first graph of my text. I just didn't know what to do next.

Lille's code is intended to be used instead of the content elements you had already defined.

Remove the existing content elements and add an HTML element containing Lille's code.

You might consider starting by creating a new page for this. That will allow you to compare your already existing page with the new page using HTML.

--- Denise

Tom Foster · February 20, 2015

You'll have to remove the initial info and images you have there. The HTML is instead of what you have already, rather than in addition to!

Lille Ulven · February 20, 2015

First of all, you're welcome, Ron - and no your are not dense, my "instructions" just weren't detailed enough.
Yes, as Denise and Spectacular Edinburgh said, you would have to remove what was "before" on your about page or create a new page.

And I edited my post above so that you'll be able to just copy it onto a new page without making any changes to the text. (Your entire text should be in it now.)

I'll put in the new code (with the entire text) here too, so it will be easier to find for you.

<table>
  <tr>
    <td>
     <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/DEATH-VALLEY-NATIONAL-PARK/i-GFbNmsG/0/M/Death%20Valley%2C%20Dante%27s%20Peak--M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_121" class="sm-image" data-clientid="sm-image-model_2" alt="" title=""></img>
    </td>
    <td>
      <img itemprop="image" src="http://ronbathphotography.smugmug.com/PAGES/TEXT-LOGO/Branding/i-wfJSRZD/0/S/Self%20Portrait-251-S.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_147" class="sm-image" data-clientid="sm-image-model_3" alt="" title=""></img>
    </td>
  </tr>
  <tr>
    <td>
        <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/LIFESTYLE/i-hJFsptg/0/M/La%20Grange-3610-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_173" class="sm-image" data-clientid="sm-image-model_4" alt="" title=""></img>
</br>
<img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/BOTANICALS-/i-RQPHXD4/0/M/San%20Diego%2C%20JAN%202014-4-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_199" class="sm-image" data-clientid="sm-image-model_5" alt="" title=""></img>
    </td>
    <td>
<p><span style:"font-size=16px">
Really, the three most important things to know about me are that I love God, I love my family and I love photography. I am truly blessed and I hope it shows in my work.
</br>
Actually, the word "work" is not accurate. Photography is not work, it's a passion and a gift. Ask any photographer. What we get to do is an amazing privilege.
</br>
My career began with a plastic camera, some film and a photo scrapbook complete with lick & stick corners to hold the pictures in place. I was nine and it was a present from my Aunt.
</br>
Over the last 39 years I worked on four newspapers in the Midwest; 29 of those years at a weekly Business paper. I have received many awards for my photographs, but the biggest "reward" has been the countless wonderful people and places I have been able to meet, see and photograph. I retired from Photojournalism in 2013.
</br>
I continue to do client work. Whether it is portraiture, street, landscape, abstract, event, commercial or photojournalism, architectural or botanical, photography delights me. And I love sharing that delight with others.
</br>
I want to take the viewer somewhere they have never been before, or show a different way of seeing the commonplace and everyday. It's all about connecting visually.
</br>
Thanks for visiting my site.
</br>
</br>
If you have a comment, an inquiry about purchasing prints, or you need a photographer, click on the Contact link on this page.
</span></p>
    </td>
  </tr>
</table>

Good luck!

Lille Ulven

Tom Foster · February 20, 2015

Lille Ulven wrote: »

First of all, you're welcome, Ron - and no your are not dense, my "instructions" just weren't detailed enough.

...

Lille Ulven

Just wanted to say thanks, it's not my thread but it's helpful people like you who go to this much effort that makes this a great forum to come to for help!

Lille Ulven · February 20, 2015

Tom as far as I can see, this is what makes this forum great - everybody tries to help everybody. Hey, I am a coder when I am not photographing, sure it is database code that I write, but a little HTML is easy done for me. So why not share my knowledge with those that are not at that place (yet) and help them to learn and grow as others have helped me learn and grow stuff (among others shifting tires on my bike).
And for myself - I avoid forums where the first reply is "Read the f... manual" or "go learn to code" - not everybody wants that and not everybody has the mindset for that. There are things I'll never get my head around to do... so someone might come and help me with that.

By the way Ron I am just trying to improve on the code that I gave you so that it will mostly be ready for you to post. But that might take a couple more minutes.

Tom Foster · February 20, 2015

Lille Ulven wrote: »

Tom as far as I can see, this is what makes this forum great - everybody tries to help everybody. Hey, I am a coder when I am not photographing, sure it is database code that I write, but a little HTML is easy done for me. So why not share my knowledge with those that are not at that place (yet) and help them to learn and grow as others have helped me learn and grow stuff (among others shifting tires on my bike).
And for myself - I avoid forums where the first reply is "Read the f... manual" or "go learn to code" - not everybody wants that and not everybody has the mindset for that. There are things I'll never get my head around to do... so someone might come and help me with that.

By the way Ron I am just trying to improve on the code that I gave you so that it will mostly be ready for you to post. But that might take a couple more minutes.

Agreed! I am sure I could have come up with something similar but it would have taken me a fair amount longer and would have probably not been so concise! Not done much proper coding in a while, I suspect the coding on my page is a bit of a mess as a result! Still, it works... Mostly! [emoji14]

Allen · February 20, 2015

Using tables will work but as the browser is resized it might not flow and you'd have to scroll right
to see it all. Instead it would probably better to use div's which will flow better. Also the photos
might not auto resize. If you look at folders and galleries the photos auto change size with different
browser widths. It's just a matter of trying these to see what works better. Photo resizing is probably
the optimal look but not sure how to accomplish that.

Lille Ulven · February 20, 2015

I've got something that works with a table... Allen of course has a point with using div instead.

But let's try this one - and go on from there

<table>
    <colgroup>
        <col width="600px">
        <col width="400px">
    </colgroup>
  <tr>
    <td>
     <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/DEATH-VALLEY-NATIONAL-PARK/i-GFbNmsG/0/M/Death%20Valley%2C%20Dante%27s%20Peak--M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_121" class="sm-image" data-clientid="sm-image-model_2" alt="" title=""></img>
    </td>
    <td>
      <img itemprop="image" src="http://ronbathphotography.smugmug.com/PAGES/TEXT-LOGO/Branding/i-wfJSRZD/0/S/Self%20Portrait-251-S.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_147" class="sm-image" data-clientid="sm-image-model_3" alt="" title=""></img>
    </td>
  </tr>
  <tr>
    <td>
        <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/LIFESTYLE/i-hJFsptg/0/M/La%20Grange-3610-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_173" class="sm-image" data-clientid="sm-image-model_4" alt="" title=""></img>
</td>
    <td>
<p><span style:"font-size=16px">
Really, the three most important things to know about me are that I love God, I love my family and I love photography. I am truly blessed and I hope it shows in my work.
</br>
</br>
Actually, the word "work" is not accurate. Photography is not work, it's a passion and a gift. Ask any photographer. What we get to do is an amazing privilege.
</br>
</br>
My career began with a plastic camera, some film and a photo scrapbook complete with lick & stick corners to hold the pictures in place. I was nine and it was a present from my Aunt.
</br>
</br>
 Over the last 39 years I worked on four newspapers in the Midwest; 29 of those years at a weekly Business paper. I have received many awards for my photographs, but the biggest "reward" has been the countless wonderful people and places I have been able to meet, see and photograph. I retired from Photojournalism in 2013.
</br>
</br>
I continue to do client work. Whether it is portraiture, street, landscape, abstract, event, commercial or photojournalism, architectural or botanical, photography delights me. And I love sharing that delight with others.
</span></p>
    </td>
</tr>
<tr>
    <td height:"400px">
<img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/BOTANICALS-/i-RQPHXD4/0/M/San%20Diego%2C%20JAN%202014-4-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_199" class="sm-image" data-clientid="sm-image-model_5" alt="" title=""></img>
    </td>
<td vertical-align:top;>
    <p><span style:"font-size=16px">
I want to take the viewer somewhere they have never been before, or show a different way of seeing the commonplace and everyday. It's all about connecting visually.
</br>
</br>
Thanks for visiting my site.
</br>
</br>
</br>
</br>
If you have a comment, an inquiry about purchasing prints, or you need a photographer, click on the Contact link on this page.
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
  </span>  
</p>
</td>
  </tr>
</table>

Now I am going to have a shower and who knows after that maybe I will read up to div and see if I can make it work even better with that.

RB13 · February 20, 2015

Oh my gosh. Just got back and LOOK at all of your responses!!! You are all the best. You're right, Tom. GREAT FORUM.

I'm heading back to my page. I'm going to use your last coding, Lille on a NEW page starting from scratch. Will let you know what happens.

Many thanks.

RB13 · February 20, 2015

Ok, it is really getting close to what I have in mind. First of all, I did create a second About Me (2) page to work on with your code, Lille. (Thanks for the tip, Denise) Now the photos all appear slightly larger than my first page, as does the actual header About Me.
I AM able to line up the top of the grouping to match the Menu box on the far left, BUT, I don't know how to separate my MUG shot from the first image and the text box from the other images. And, ultimately the three display photos should
be about 2 picas between each other. I looked at the code to see where that might be inserted, but just not sure.
I am trying to duplicate the distances between each display photo and also the distance my mug shot and text box are to the display photos as seen on my original About Me page attempt.

Lille Ulven · February 20, 2015

Hi Ron.

Try this one for the space between the columns:

<table cellpadding="10px" cellspacing="10px">
    <colgroup>
        <col width="600px">
        <col width="400px">
    </colgroup>
  <tr>
    <td>
     <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/DEATH-VALLEY-NATIONAL-PARK/i-GFbNmsG/0/M/Death%20Valley%2C%20Dante%27s%20Peak--M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_121" class="sm-image" data-clientid="sm-image-model_2" alt="" title=""></img>
    </td>
    <td>
      <img itemprop="image" src="http://ronbathphotography.smugmug.com/PAGES/TEXT-LOGO/Branding/i-wfJSRZD/0/S/Self%20Portrait-251-S.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_147" class="sm-image" data-clientid="sm-image-model_3" alt="" title=""></img>
    </td>
  </tr>
  <tr>
    <td>
        <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/LIFESTYLE/i-hJFsptg/0/M/La%20Grange-3610-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_173" class="sm-image" data-clientid="sm-image-model_4" alt="" title=""></img>
</td>
    <td>
<p><span style:"font-size=16px">
Really, the three most important things to know about me are that I love God, I love my family and I love photography. I am truly blessed and I hope it shows in my work.
</br>
</br>
Actually, the word "work" is not accurate. Photography is not work, it's a passion and a gift. Ask any photographer. What we get to do is an amazing privilege.
</br>
</br>
My career began with a plastic camera, some film and a photo scrapbook complete with lick & stick corners to hold the pictures in place. I was nine and it was a present from my Aunt.
</br>
</br>
 Over the last 39 years I worked on four newspapers in the Midwest; 29 of those years at a weekly Business paper. I have received many awards for my photographs, but the biggest "reward" has been the countless wonderful people and places I have been able to meet, see and photograph. I retired from Photojournalism in 2013.
</br>
</br>
I continue to do client work. Whether it is portraiture, street, landscape, abstract, event, commercial or photojournalism, architectural or botanical, photography delights me. And I love sharing that delight with others.
</span></p>
    </td>
</tr>
<tr>
    <td height:"400px">
<img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/BOTANICALS-/i-RQPHXD4/0/M/San%20Diego%2C%20JAN%202014-4-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_199" class="sm-image" data-clientid="sm-image-model_5" alt="" title=""></img>
    </td>
<td vertical-align:top;>
    <p><span style:"font-size=16px">
I want to take the viewer somewhere they have never been before, or show a different way of seeing the commonplace and everyday. It's all about connecting visually.
</br>
</br>
Thanks for visiting my site.
</br>
</br>
</br>
</br>
If you have a comment, an inquiry about purchasing prints, or you need a photographer, click on the Contact link on this page.
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
  </span>  </p>
</td>
  </tr>
</table>

The thing I changed to give you some space between your rows is this first tag:

<table cellpadding="10px" cellspacing="10px">

If you want less space than you'll have to adjust the values from 10px to less - for more space, well you set it to something higher than 10px

Allan I tried the div variant - but cannot get the text to the top of the div-cells. Any advise on that one?

Good luck

Lille Ulven

Some code for Allen

- not working yet, using embedded CSS since I am not coding right on a smug mug page

<head>
        <style type="text/css">
    .Table
    {
        display: table;
    }
    .Title
    {
        display: table-caption;
        vertical-align: text-top;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        vertical-align: text-top;
    }
    .Row
    {
        display: table-row;
        vertical-align: text-top;
        align-content: center;
    }
    .Cell
    {
        display: table-cell;
        /*height: 150px;*/
        /*vertical-align: text-top;
        align-content: center;*/
        /*align-items: baseline;
        align-content: stretch;*/
        
    }
</style>
    </head>
    <body>
        <div class="Table">
            <div class="Heading">
                <div class="Cell">
                    <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/DEATH-VALLEY-NATIONAL-PARK/i-GFbNmsG/0/M/Death%20Valley%2C%20Dante%27s%20Peak--M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_121" class="sm-image" data-clientid="sm-image-model_2" alt="" title="">           </img> 
                </div>
                <div class="Cell">
                    <img itemprop="image" src="http://ronbathphotography.smugmug.com/PAGES/TEXT-LOGO/Branding/i-wfJSRZD/0/S/Self%20Portrait-251-S.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_147" class="sm-image" data-clientid="sm-image-model_3" alt="" title="">                      </img>
                </div>
            </div>
            <div class="Row">
                <div class="Cell">
                    <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/LIFESTYLE/i-hJFsptg/0/M/La%20Grange-3610-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_173" class="sm-image" data-clientid="sm-image-model_4" alt="" title="">
                    </img>
                </div>
                <div class="Cell">
                    <p><span style:"font-size=16px">
Really, the three most important things to know about me are that I love God, I love my family and I love photography. I am truly blessed and I hope it shows in my work.
</br>
</br>
Actually, the word "work" is not accurate. Photography is not work, it's a passion and a gift. Ask any photographer. What we get to do is an amazing privilege.
</br>
</br>
My career began with a plastic camera, some film and a photo scrapbook complete with lick & stick corners to hold the pictures in place. I was nine and it was a present from my Aunt.
</br>
</br>
 Over the last 39 years I worked on four newspapers in the Midwest; 29 of those years at a weekly Business paper. I have received many awards for my photographs, but the biggest "reward" has been the countless wonderful people and places I have been able to meet, see and photograph. I retired from Photojournalism in 2013.
</br>
</br>
I continue to do client work. Whether it is portraiture, street, landscape, abstract, event, commercial or photojournalism, architectural or botanical, photography delights me. And I love sharing that delight with others.
</span></p>
                </div>
            </div> <!--ROW-->
            <div class="Row">  
                <div class="Cell">
                    <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/BOTANICALS-/i-RQPHXD4/0/M/San%20Diego%2C%20JAN%202014-4-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_199" class="sm-image" data-clientid="sm-image-model_5" alt="" title="">
                    </img>
                </div>
                <div class="Cell">
                   <p>
<span style:"font-size=16px">
I want to take the viewer somewhere they have never been before, or show a different way of seeing the commonplace and everyday. It's all about connecting visually.
</br>
</br>
Thanks for visiting my site.
</br>
</br>
</br>
</br>
If you have a comment, an inquiry about purchasing prints, or you need a photographer, click on the Contact link on this page.
</span>   </p>  
                </div>
            </div><!--Row 2-->
</div>
    </body>

Allen · February 20, 2015

You can not use head, body or style tags in html content box. Put the CSS in the html box CSS tab. Head
and body are already used on the page and can only be used one time. I'd also use different div class
names other the pre-common names to be safe.

Rather then all those <br>'s why not let the text flow and wrap for each paragraph?
You can control the text by using padding.

<span style:"font-size=16px; padding: Xpx Xpx Xpx Xpx">
   <p>Really, the three ....</p>
   <p>Actually, the word ....</p>
   ... 
</span>

Lille Ulven · February 20, 2015

Allen I know I cannot use head, body, style or html tags in the smugmug content boxes. But while trying this I do so on a plain html file outside of smugmug, that's why they were still there and the css included in the html and not in a separate CSS

And actually I did not know about the padding - I am not a website coder (yet), I remember some of it from days >10 years ago when I tried to do some html coding for a while and now I am basically "pick-learning" looking up what I need to do to archive what I want. But I am slowly but surely getting there. (Books aren't ordered yet, but I will get some - I know which ones.

)

But I just got it to work...

Ron if you'd rather use the div-tags instead of that table that I used before here is the "new" code:

You will have to add the following into the HTML-box:

        <div class="AboutMeTable">
            <div class="AboutMeHeading">
                <div class="AboutMeCell">
                    <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/DEATH-VALLEY-NATIONAL-PARK/i-GFbNmsG/0/M/Death%20Valley%2C%20Dante%27s%20Peak--M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_121" class="sm-image" data-clientid="sm-image-model_2" alt="" title="">           </img>
                </div>
                <div class="AboutMeRightCellPhoto">
                    <img itemprop="image" src="http://ronbathphotography.smugmug.com/PAGES/TEXT-LOGO/Branding/i-wfJSRZD/0/S/Self%20Portrait-251-S.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_147" class="sm-image" data-clientid="sm-image-model_3" alt="" title="">                      </img>
                </div>
            </div>
            <div class="AboutMeRow">
                <div class="AboutMeCell">
                    <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/LIFESTYLE/i-hJFsptg/0/M/La%20Grange-3610-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_173" class="sm-image" data-clientid="sm-image-model_4" alt="" title="">
                    </img>
                </div>
                <div class="AboutMeRightCell">
                    <span style:"font-size=16px; padding: 5px 5px 5px 5px"><p>
Really, the three most important things to know about me are that I love God, I love my family and I love photography. I am truly blessed and I hope it shows in my work.
                    </p>
                    <p>
Actually, the word "work" is not accurate. Photography is not work, it's a passion and a gift. Ask any photographer. What we get to do is an amazing privilege.
</p>
                    <p>My career began with a plastic camera, some film and a photo scrapbook complete with lick & stick corners to hold the pictures in place. I was nine and it was a present from my Aunt.
</p>
                    <p> Over the last 39 years I worked on four newspapers in the Midwest; 29 of those years at a weekly Business paper. I have received many awards for my photographs, but the biggest "reward" has been the countless wonderful people and places I have been able to meet, see and photograph. I retired from Photojournalism in 2013.
                        </p>
</span>
                </div>
            </div> <!--ROW-->
            <div class="AboutMeRow">  
                <div class="AboutMeCell">
                    <img itemprop="image" src="http://ronbathphotography.smugmug.com/GALLERIES-/BOTANICALS-/i-RQPHXD4/0/M/San%20Diego%2C%20JAN%202014-4-M.jpg" id="sm-tile-image-yui_3_8_0_1_1424384706974_199" class="sm-image" data-clientid="sm-image-model_5" alt="" title="">
                    </img>
                </div>
                <div class="AboutMeRightCell">
                   <span style:"font-size=16px; padding: 5px 5px 5px 5px"><p>
I continue to do client work. Whether it is portraiture, street, landscape, abstract, event, commercial or photojournalism, 
architectural or botanical, photography delights me. And I love sharing that delight with others.
                        </p>
                    <p>
I want to take the viewer somewhere they have never been before, or show a different way of seeing the commonplace and everyday. It's all about connecting visually.
 </p>
                    <p>
Thanks for visiting my site.
                       </p><p>
</br>
</br>
If you have a comment, an inquiry about purchasing prints, or you need a photographer, click on the Contact link on this page.
</p></span> 
                </div>
            </div><!--Row 2-->
</div>

And this would be placed in the CSS-box (you should have two tabs on that screen that pops up where you enter your html code, one for HTML (for the above code) and one for CSS (for the code below)):

   .AboutMeTable
    {
        display: table;
    }
    .AboutMeTitle
    {
        display: table-caption;
        vertical-align: text-top;
        font-weight: bold;
        font-size: larger;
    }
    .AboutMeHeading
    {
        display: table-row;
        font-weight: bold;
        vertical-align: text-top;
    }
    .AboutMeRow
    {
        display: table-row;
        vertical-align: text-top;
        align-content: center;
    }
    .AboutMeCell
    {
        display: table-cell;
        vertical-align: top;
        padding: 5px;
        
    }
.AboutMeRightCellPhoto
    {
        display: table-cell;
        vertical-align: bottom;
        padding: 5px;
        width: 270px;        
    }
  .AboutMeRightCell
    {
        display: table-cell;
        vertical-align: top; 
        padding: 15px;
        padding-top: 20px;
        width: 270px;        
    }

It will give you a little bit of a distance between the text of the 4th and 5th paragraph - but I must admit this was the best I could get to right now.

I hope that will do the trick for you.

Best of luck

Lille Ulven

denisegoldberg · February 20, 2015

Lille Ulven wrote: »

Allen I know I cannot use head, body, style or html tags in the smugmug content boxes. But while trying this I do so on a plain html file outside of smugmug, that's why they were still there and the css included in the html and not in a separate CSS

Lille -
If you want to mimic smug you could create an unlisted page on your site to experiment with code. I find it helpful to see the results in smug as opposed to building an outside page.

I usually have one or two unlisted pages that I use for experimenting.

--- Denise

Allen · February 20, 2015

Here's a simplified version.

<div style="float:left; width: 600px;">
  <div style="margin-bottom: 10px;">
    <img src="/photos/i-GFbNmsG/0/M/Death%20Valley%2C%20Dante%27s%20Peak--M.jpg" />
   </div>
  <div style="margin-bottom: 10px;">
      <img src="/photos/i-RQPHXD4/0/M/San%20Diego%2C%20JAN%202014-4-M.jpg" />
   </div>
   <div>
     <img src="/photos/i-hJFsptg/0/M/La%20Grange-3610-M.jpg" />
   </div>
</div>

<div style="float:right; width: 400px;">
   <div style="margin-bottom: 10px;">
      <img src="/photos/i-wfJSRZD/0/S/Self%20Portrait-251-S.jpg" />
   </div>
   <div>
       <span style="font-size=16px;font-size: 16px;">
         <p>Really, the three most important things to know about me are that I love God, 
            I love my family and I love photography. I am truly blessed and I hope it shows in my work.
         </p><br>
         <p>Actually, the word "work" is not accurate. Photography is not work, it's a passion and a gift. 
            Ask any photographer. What we get to do is an amazing privilege.
         </p><br>
         <p>My career began with a plastic camera, some film and a photo scrapbook complete with lick & 
            stick corners to hold the pictures in place. I was nine and it was a present from my Aunt.
         </p><br>
         <p> Over the last 39 years I worked on four newspapers in the Midwest; 29 of those years at a 
             weekly Business paper. I have received many awards for my photographs, but the biggest "reward" 
             has been the countless wonderful people and places I have been able to meet, see and photograph. 
             I retired from Photojournalism in 2013.</p>
       </span>
   </div>
</div>
<div style="clear: both;"></div>

Lille Ulven · February 21, 2015

Denise I knew about the "feature" of unlisted sites - and am using it for a Test-section on my page already. But in this case I deliberately decided against it, because I was using Ron's link in my own trials as well and did not want to either directly delete my hidden page again or forget about it and due to some mystery (have had that before) get my Test-pages up as listed sites... with that page that clearly belongs to Ron.
But what I should have done is testing those codes that I presented here on a trial page as well, just to see how they look on Smugmug... and than delete them right away while still having the code in the files.

Allen first of all I think I have a tendency to writing your name slightly wrong - I am sorry for that one. But not less important: thanks for giving me just some keywords with advise on how to do it. That was exactly what I needed to get hooked and have my fund coding and figuring out how to get there.

Ron I hope that you have found your way to do your About me page in here. Thanks for giving me such a fun time learning more HTML coding

RB13 · February 21, 2015

Lille, Allen and Denise...thanks so much for all your insights and hard work. I am humbled. Just saw all of your recent posts and heading over to give them all a try now.

Again. Very humbled.

Ron

Lille Ulven · February 21, 2015

You are very welcome, Ron.
And - I cannot speak for the others who replied though - it was not hard work it was a lot of fun working it out.

While looking at your page I found one little thing that you might want to address though:
When you have to scroll your page up the page content will be shown as going underneath your logo. - I haven't quite figured out how you have set it up, but I think there is a way to address this and have the photo disappear in the background once it reaches the header-hight.
For this you would do the following:
Go into Customization -> Content & Design -> Theme and customize your sites Theme by choosing a Header color in the Advanced tab (in your case the same as the body color) and than set the value for "Header Alpha" to 100%, once you save and publish your settings you should now have photos that slide behind your non-transparent header and by that would no longer be cut in by your logo.
Another way might be to "unpin" your header, so that when you scoll your site up the header is scrolled out of the screen as well.

Good luck

Lille Ulven

RB13 · February 22, 2015

I so appreciate all you have done Lille and the input from Allen and Denise. Thanks also for this tip about my logo. I'll give it a try. And, once I get my site permanently published, I would be happy to get a print made of any image that catches your eye as a thank-you for your trouble. btw, which country in Scandinavia are located? One of my top bucket list to do's is to shoot the Northern Lights in Norway. Dream shoot for me.

Ron

Lille Ulven · February 22, 2015

Thanks for that very nice offer Ron - I am really glad I could be of some help for you.
For my location - I am in that bucket list of your's than. Actually I do want to go up North and do the Northern Lights one day too. I have the camera now to handle the high ISOs now I only have to find some days off which I haven't made any other plans for in advance... maybe 2017 then... well rather 2018 so I can improve on my skiing skills first ;-)
But then I guess I am thankful for what I have been able to do so far - cycling north of the polar circle (among others on the Lofoten) and in New Zealand is pretty good too

Lille Ulven

Customizing About Me page

Comments