Joomla Templates Club 406,261 posts

[ezaban Friend ezabanJoin date: August 2013Posts: 38Downloads:33Uploads:0 Thanks: 16 Thanked: 1 times in 1 posts]

#198039

Hi,

I want to have a module position that sticks to the bottom and moves up and down by scrolling the page. How to define it on JA Sugite? Does it have by default?

Thanks

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#536148

using this documentation http://www.joomlart.com/forums/topic/how-to-create-new-module-position-updated/ create a module position in /templates/ja_sugite/tpls/blocks/footer.php

use this css for that position


.fixedmodule{
position:fixed;
bottom:0px;
width:100%;
}

add this fixedmodule in module suffix or as DIV wrapper in the footer page.

give a try.

[ezaban Friend ezabanJoin date: August 2013Posts: 38Downloads:33Uploads:0 Thanks: 16 Thanked: 1 times in 1 posts]

#536606

Hi dear Chavan,

I tried the code, I defined a module and it shows successfully in the footer. But I want it to stick at the bottom of screen and scrolls by the page. I added the code in the custom.css file css folder in order not to be overwritten. Actually, the code you kindly provided didn’t make it sticky or maybe I need to add some other codes in other files, bootstrap css file for instance.
If so, can you please instruct me on itThanks

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#536608

in which position you have created the module and where it is on your site page. I don’t see any new modules on the footer.

[ezaban Friend ezabanJoin date: August 2013Posts: 38Downloads:33Uploads:0 Thanks: 16 Thanked: 1 times in 1 posts]

#536615

I had unpublished it, it is published now. It is called “eNamad”. At the right side and bottom of the page in the footer. It contains a picture, I want it to be sticky on the screen and always be visible

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#536629

check your site Now. I think its fixed. I made some changes on custom.css and footer.php files.

1 user says Thank You to chavan for this useful post

1. ezaban

[ezaban Friend ezabanJoin date: August 2013Posts: 38Downloads:33Uploads:0 Thanks: 16 Thanked: 1 times in 1 posts]

#536630

Yes, I just checked it and it is working fine. I appreciated it, thanks a lot

[ezaban Friend ezabanJoin date: August 2013Posts: 38Downloads:33Uploads:0 Thanks: 16 Thanked: 1 times in 1 posts]

#536636

Thanks Chavan, It was working good by the changes you made. But I have one problem. Since you came to the back-end and kindly changed custom.css file and footer.php to make the module sticky I can see that whenever I turn the website to development mode, color settings and every modifications I had made before shows correctly, but when I disable this development mode and compile less to css, the story changes completely and it seems that a JA Sugite template appears with all default settings (plus custom.css changes of course)

[ezaban Friend ezabanJoin date: August 2013Posts: 38Downloads:33Uploads:0 Thanks: 16 Thanked: 1 times in 1 posts]

#536759

The problem is solved, it seems that the theme used in the site had been set to “use default” which should have been “default”.
Thanks BTW

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#536776

Glad its fixed. have a nice day 🙂

1 user says Thank You to chavan for this useful post

1. ezaban

[Fernando Ribeiro Friend Fernando RibeiroJoin date: December 2012Posts: 23Downloads:79Uploads:17 Thanks: 4]

#540397

Dear Chavan,

I found this thread and have relation with my problem and I would like a help to solve.

I would like to make the footer a sticky footer, in others words, when the page have a few information I would like the footer in page bottom… but, in mobile or when have more information I would like the footer after the mainbody information.

I’m trying a lot of CSS possibilities, but nothing is working and I would like to know if you can help me.

I’m attaching the images.

thank you.

---

Attachments:

1. 
2. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#540433

GO to this File: /templates/ja_sugite/css/template.css

Add this css code

.t3-wrapper{
padding-bottom: 66px !important;
position: relative !important;
display:block !important;
clear:both !important;
}
.t3-footer {
bottom: 0 !important;
position: absolute !important;
width: 100% !important;
}

If this doesn’t work, please send me the admin details in PM

1 user says Thank You to chavan for this useful post

1. Fernando Ribeiro

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#540724

@fern_ribs

Go to this File: /templates/ja_sugite/css/template.css

1. Replace this code

.t3-footer {
background: #00334e ;
color: #fff ;
font-size: 11px;
bottom: 0 !important;
position: absolute !important;
width: 100% !important;
}
With

.t3-footer {
background: #00334e ;
color: #fff ;
font-size: 11px;
width: 100% !important;
}

2. Replace this code

.t3-mainbody {
padding-top: 28px;
padding-bottom: 28px;
}

With

.t3-mainbody {
padding-top: 28px;
padding-bottom: 28px;
margin-bottom: -60px;
min-height: 100%;
}

1 user says Thank You to chavan for this useful post

1. Fernando Ribeiro

[Fernando Ribeiro Friend Fernando RibeiroJoin date: December 2012Posts: 23Downloads:79Uploads:17 Thanks: 4]

#540838

Thanks Chavan! It’s worked! Thanks.

[Author]

Posts