Modifying layout -- adding footer content

gatoruss · September 19, 2015

I want my homepage to have a title, nav menu, background photo and a carousel of selected photos. I think I have successfully accomplished adding each to my home page, but I do not like the placement of the carousel. In order to keep it from laying out in the middle of the display and covering the central point of my bg photo, I needed to set the top margin to 350 px. But that forces the footer (with log-in link) off the display (see black arrow in lower right corner of screenshot below). I would like the carousel to be in the footer, I suppose. But the theme I began my tinkering with, doesn't have a footer. Is it possible to add a footer content block? if so, how?

Here is a screen shot of my current homepage:

[IMG]http://dgrin.com/<a href=http://www.smugmug.com/gallery/n-vM3KLN/i-DfWjP2k/A target=_blank>[/img]

Hikin' Mike · September 19, 2015

You really don't want a carousel in your header or footer because you'll see that on EVERY page....unless you really want that.

Can you post your site?

gatoruss · September 19, 2015

I am not wedded to a carousel. I would like a filmstrip type affect along the bottom of the display. I deleted the carousel and added "multiple photos." But the "strip" of photos sits right in the center. :-(

photos.gatoruss.net

Thanks for your help.

Hikin' Mike · September 19, 2015

You can try and add this to your theme's custom CSS:

.sm-page-widget-12345291 {
    position: absolute;
    width: 100%;
    bottom: 5%
    }

gatoruss · September 20, 2015

Thanks, Mike. I will play around with that.

BTW - Is there a resource that provides the name of the various CSS elements; for example, the ".sm-page-widget-12345291" that you reference? The "12345291" is the element ID, correct? How did you determine that?

Thanks again.

Allen · September 20, 2015

gatoruss wrote: »

Thanks, Mike. I will play around with that.

BTW - Is there a resource that provides the name of the various CSS elements; for example, the ".sm-page-widget-12345291" that you reference? The "12345291" is the element ID, correct? How did you determine that?

Thanks again.

I use "Inspect Element" in the Firefox browser. I believe Chrome has the same.
If you hover in a widget, right click, and pick "Inspect Element" some line in that widget will highlight. If you look up some, maybe 5-8 lines you'll see the red widget class names.
.sm-page-widget would affect all widgets
.sm-page-widget-9551091 is the specific class name for this widget

If you scroll to the very top in the inspect element box, 3 or maybe 4 lines down from the top you'll find the <body ... tag. In the class names .sm-page-node-2m6ZH is the specific class name for this page.

...
[COLOR=Yellow]<body[/COLOR] style="" class="sm-user-professional sm-page sm-page-node [COLOR=Yellow]sm-page-node-2m6ZH[/COLOR] 
                    sm-page-parentnode-zsB4B sm-page-parentnode-Qm7v4 
                     sm-page-parentnode-FqkP4 sm-page-initialized">
...
...
...
<div id="sm-page-widget-WFnHB7Gx" class="[COLOR=Red]sm-page-widget[/COLOR] 
                 sm-page-widget-galleries [COLOR=Red]sm-page-widget-9551091[/COLOR]" data-typeid="9551091">
    <div class="sm-page-widget-content">
    <div class="sm-page-widget-header"></div>
    <div id="sm-page-widget-9rnRBvhF" class="sm-page-widget-body">
        <div id="yui_3_8_0_1_1442528215409_1541" class="sm-tiles-grid  sm-tiles-spacing-12 sm-tiles-infohover-hide sm-tiles-center-image  sm-tiles-info-over sm-tiles-1x1 sm-tiles-M sm-tiles-col-4 sm-tiles">
            <ul class="sm-tiles-list"><li ....

Allen · September 20, 2015

In the body tag you'll also notice the sm-page-parentnode-XXXXX class names. These are the class names
of the parent folders, three in this case. You can apply CSS using a folder class name and the CSS will flow
down to all children. One will be your top page, homepage then folders and sub-folders.

gatoruss · September 20, 2015

Thanks, Allen.

The html code for my home page looks overwhelmingly complex. Using the "Inspector," I cannot seem to find an element to click on that shows the element ".sm-page-widget-12345291."

As for the body tag, mine reads differently from the one you posted. The is no "parent-node" references. It reads as follows (if I am logged out):

<body class="sm-page sm-page-node sm-page-node-WdsBgm sm-page-home sm-page-initialized">

If I save the page source and it open on a text editor (Notepad++), a search for 12345291 results in 3 hits (two lines of code - one with 1 hit and the other with 2 hits), as follows:

...
<link rel="stylesheet" href="http://cdn.smugmug.com/include/widgetcombo/combo.css?widget-12345291-33-2-p-2226683-1-1442703343-min.css" id="sm-pagemaster-css">
...
...
<div id="sm-page-widget-W5zPM6SJ" class="sm-page-widget sm-page-widget-images sm-page-widget-12345291 sm-page-widget-hidden" data-typeid="12345291">

I am lost...<img src="https://us.v-cdn.net/6029383/emoji/headscratch.gif" border="0" alt="" >

Allen · September 20, 2015

gatoruss wrote: »
Thanks, Allen.

The html code for my home page looks overwhelmingly complex. Using the "Inspector," I cannot seem to find an element to click on that shows the element ".sm-page-widget-12345291."

As for the body tag, mine reads differently from the one you posted. The is no "parent-node" references. It reads as follows (if I am logged out):
<body class="sm-page sm-page-node sm-page-node-WdsBgm sm-page-home sm-page-initialized">
If I save the page source and it open on a text editor (Notepad++), a search for 12345291 results in 3 hits (two lines of code - one with 1 hit and the other with 2 hits), as follows:
...
<link rel="stylesheet" href="http://cdn.smugmug.com/include/widgetcombo/combo.css?widget-12345291-33-2-p-2226683-1-1442703343-min.css" id="sm-pagemaster-css">
...
...
<div id="sm-page-widget-W5zPM6SJ" class="sm-page-widget sm-page-widget-images 
    [COLOR=Red]sm-page-widget-12345291[/COLOR] sm-page-widget-hidden" data-typeid="12345291">
I am lost...<img src="https://us.v-cdn.net/6029383/emoji/headscratch.gif" border="0" alt="" >

Looks like homepage does not have a parent so "parentnode" so would not show.

See red in quote, that's the widget class name.

Any widget you "inspect element" on will show that line with its class name. Look up from whatever
line is highlighted about 5-8 lines. I always try the click on top part of widget so I don't have to look
up far.

gatoruss · September 22, 2015

I edit the CSS as Mike suggested above, and it moved the block of photos ("my widget element") toward the bottom of the display, but not as far as I would have liked. So, I changed "bottom : 5%" to "bottom : 0%", and it moved slightly further downward; but again, not as far as I would have liked.

In reading up on " absolute positioning," it seems that the "bottom" property sets the bottom of the element in question (in my case "my widget element") in relation to the bottom of its nearest "positioned" ancestor -- from http://www.w3schools.com/css/css_positioning.asp :

An element with*position: absolute;*is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note:*A "positioned" element is one whose position is anything except*static.

So, if I am understanding this correctly, since the above CSS code (with "bottom : 0%", rather than "bottom : 5%") does not move "my widget element" to a position that is adjacent to (or at least very close to) the footer, it would seem that there must be some "positioned" ancestor element, in which "my widget element" is contained, that is affecting the position of "my widget element."

Any idea on how I might track down that ancestor element. I tried looking thru the html in the "Inspector" and "firebug," but (1) neither show the css (or at least I haven't figured out how to view the CSS), and (2) html is a morass!

Allen · September 22, 2015

Check for any CSS widgets in that area when logged in, sometimes these "hidden" things affect flow.
I used to put them directly below the breadcrumb but have moved them to the end of the page.

gatoruss · September 22, 2015

Allen wrote: »

Check for any CSS widgets in that area when logged in, sometimes these "hidden" things affect flow.
I used to put them directly below the breadcrumb but have moved them to the end of the page.

Dumb question: What is a "CSS widget"?

Allen · September 22, 2015

gatoruss wrote: »

Dumb question: What is a "CSS widget"?

In customize, in the right flyout, all the content blocks (Add Content Blocks) you drag out to the page are widgets.

Above that will be "On All Galleries" or "ON All Folders" or "Just This Page". This will show a list all widgets
currently on a page. If you hover any of these, on the page they should color highlight and say
where they apply. Colors might be different for different levels.

Hikin' Mike · September 22, 2015

Sorry, I miss-read your question. You can use negative margins, so you can try something like this:

.sm-page-widget-12372736 {
    position: absolute;
    width: 100%;
    [B]bottom: -35px;[/B]
    }

gatoruss · September 22, 2015

Allen wrote: »

In customize, in the right flyout, all the content blocks (Add Content Blocks) you drag out to the page are widgets.

Above that will be "On All Galleries" or "ON All Folders" or "Just This Page". This will show a list all widgets
currently on a page. If you hover any of these, on the page they should color highlight and say
where they apply. Colors might be different for different levels.

Allen, that you for your patience -- I am sorry that I am so obtuse, but in the red bolded language quoted above are you saying that if I hover over the list in the flyout, the corresponding element on the page will become highlighted, or that if i hover over the element on the page, the applicable html in the "Inspector" with become highlighted?

Sorry, I miss-read your question. You can use negative margins, so you can try something like this:
.sm-page-widget-12372736 { 
    position: absolute; 
    width: 100%; 
    bottom: -35px; 
    }

Thank you Mike for the updated code snippet. I am at work and cannot try that, but will this evening.

Allen · September 22, 2015

gatoruss wrote: »

Allen, that you for your patience -- I am sorry that I am so obtuse, but in the red bolded language quoted above are you saying that if I hover over the list in the flyout, the corresponding element on the page will become highlighted, or that if i hover over the element on the page, the applicable html in the "Inspector" with become highlighted?...

When you hover an item (widget) in the list for "On Just This ..." section of the right flyout that item's
header bar will highlight. If you look at the item's colored highlighted header it also says something like
red "on entire site" or green 'ON "Just This Page".

Inspector or "Inspect Element" in Firefox is activated from a right click menu for a spot on the page. If
clicked, in the menu, a box will pop up with the html highlighted for that spot hovered. If the spot
hovered is inside a widget, one of the html lines in that widget is highlighted in blue. Read up a few lines
and you can find the widget class name to use in CSS.
Here's an example of a widget I use for a title .

gatoruss · September 22, 2015

Thanks again, Allen and Mike. This has been very helpful.

It is interesting that when I add Mike's updated CSS code, it works as expected when the page is "published." Here's a screen capture:

Oddly, however, while in customize mode the "multiple photo block" shifts to the top right corner of the display, and it becomes impossible to add any additional content blocks to the page. Here's a screen capture:

If I wanted to add additional content blocks, I would need to add before updating my theme with Mike's suggested code.

Modifying layout -- adding footer content

Comments