Custom footer on the homepage

Etienne · August 8, 2015

Hello,

is it possible to custom the footer (example the content and color) but only on one page (Homepage).

So the footer content on Homepage is different to the others pages footer.

I try to add the CSS : .sm-page-widget- IDN° {
color: .... ;
content: '....' ;
}
but it does not work. I see that the IDN° is not always the same in the Inpector :scratch

If you can help.

Thanks

Etienne

Hikin' Mike · August 8, 2015

You can put that CSS ONLY on your home page. You can also use the '.sm-page-home' prefix:

.sm-page-home .sm-page-widget-[B]1234567[/B] {
    /* code here*/
    }

Just change that number to the 7-number node for your widget.

Etienne · August 9, 2015

Thanks : details about CSS code
Thanks for the answer,

I can change the color now (with the code) but not the text content.

I have more question

(it's the first time I use the Widget number :

- In the web inspector, here is the code of the footer :

<div class="sm-page-layout-region sm-page-layout-region-bottom" data-layout-region="Bottom"><div class="sm-page-layout-row yui3-g" data-layout-row="T"><div class="sm-page-layout-column yui3-u" style="width: 100%;" data-layout-column="0"><div id="sm-page-widget-Xcvxt2Kj" class="sm-page-widget sm-page-widget-html sm-page-widget-11619474" data-typeid="11619474">
<div class="sm-page-widget-content"><div class="sm-page-widget-header"></div><div id="sm-page-widget-J6DDtrzn" class="sm-page-widget-body"><p> TITI
</p></div><div class="sm-page-widget-footer"></div></div>
</div>
</div></div></div>

I didn't know which widget number choose. I see the only number that does not change is in red (11619474). Is it this one ? Can you explain me why ?

So I add the CSS code :

.sm-page-home .sm-page-widget-11619474 {
color: red;
content: 'toto' ;
}

And it works for the color : only on the main page

But impossible to change the content text : exemple TITI --> toto.

If you can help me for the CSS code ....

Thanks

PS : in he the smug mug Interface , I put a HTML block in the footer :

<p> TITI
</p>

Allen · August 9, 2015

Use the class name for this specific widget in the CSS.
class="sm-page-widget sm-page-widget-html sm-page-widget-11619474"

In this case there are three class names that are apply to this widget.
all widgets
all html widgets
this specific widget

Etienne · August 10, 2015

Thanks. It works now .

For information, to change the text content, I use this and it works to :

.sm-page-home .sm-page-widget-xxxxxxxx p {
text-indent: -9999px;
line-height: 0;
}

.sm-page-home .sm-page-widget-xxxxxxxx p:after {
text-indent: 0;
display: block;
line-height: initial;
color: white;
content: 'New content' ;
text-align:center;
}

Have a nice day.

Etienne

Custom footer on the homepage

Comments