Custom footer on the homepage

Etienne

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

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

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

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

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