Footer

PhilippeH · 2016-09-16 04:58:42

Hello,

And yes it's me again!

This time, I wonder how it is possible to get off at the bottom left of the copyright, to the same level and right social networking icons.

I know I'm a little no, but this is the first time I had my nose in PHP, and here I am getting a little lost!

My test site: http://test.vuedailleurs.com

Thank you in advance.

Philippe

rod barbee · 2016-09-16 05:07:34

you should be able to move things with custom css

Did you want the social icons in the footer with the copyright? or did you just want to center them.

rod barbee · 2016-09-16 05:10:07

have you seen this tutorial?
http://backlight.theturninggate.net/?pa … age-footer

PhilippeH · 2016-09-16 05:21:21

Thank you,

Yes, and I made a mixture of the tutorial and that of mblanchette1 is discussing PHPlugins.

I would like the social icons in the footer with copyright. The social icons to the right and copyrights to the left, if possible.

Philippe

Daniel Leu · 2016-09-16 06:19:30

Would you mind to post your phplugins function. This way it is a bit easier to help.

PhilippeH · 2016-09-16 06:28:31

I'm sorry, but I do not speak English and I use Google translation.
Is this the file you want?

function ttg_footer_bottom( $style, $path ) {
echo '
<div class="custom_footer">
<div class="content clearfix">

</div>

</div>

</div>
</div>
';
return true;
} // END

Merci Daniel

rod barbee · 2016-09-16 06:55:37

Daniel will likely post some code for you, but you'll want to use the responsive grid a bit better. Right now you're using "col_4", which gives you a column 1/3 the width of the page.
You'll need to add some more html to add another column for your copyright information.

More here on using the Responsive Grid
http://ttg-tips-and-tricks.barbeephoto. … backlight/

PhilippeH · 2016-09-16 07:01:02

I'll watch it all.

Thank you.

Philippe

Daniel Leu · 2016-09-16 07:01:31

PhilippeH wrote:

I'm sorry, but I do not speak English and I use Google translation.
Is this the file you want?
Merci Daniel

Pas de problème! But I'll keep the answer in english ;-)

Thank you for the code! It is much easier to help like this!

I would start with this:

function ttg_footer_bottom( $style, $path ) { 
    echo '

<div class="custom_footer">
<div class="content page__width">
<div class="footer_copyright">		
   <p>
	  &copy; 2014 - 2016 - Phoneographie.com - Philippe Hamiche - Tout droits réservés
   </p>
</div>

<div class="footer_social">
       <a href="https://www.twitter.com/PhilippeHamiche/" target="_blank"><img src="/image/icons/webicon-twitter-s.png" title="Twitter"/></a>
       <a href="https://www.facebook.com/philippe.hamiche/" target="_blank"><img src="/image/icons/webicon-facebook-s.png" title="Facebook"/></a>
       <a href="https://plus.google.com/b/100300750167091687192/100300750167091687192/" target="_blank"><img src="/image/icons/webicon-googleplus-s.png" title="Google Plus"/></a>
</div>     
</div>     
</div>  

    ';
    return false;
} // END

And then you'll need some custom css:

footer {
   background-color: #212121;
}
.footer_social {
   float:left;
}
.footer_copyright {
   float: right;
}
.footer_copyright p{
   color: white;
   font-size: 0.857rem;
   line-height: 55px;
   margin: 0 auto;
   padding: 0;
   min-height: 55px;
   text-align: right;
}

Hope this helps!

rod barbee · 2016-09-16 07:07:35

that's a bit easier than setting up the responsive grid columns.
How do you think it will work on a phone? Does it need a media query to stack the social buttons above the footer on mobile?

Daniel Leu · 2016-09-16 07:27:41

rod barbee wrote:

that's a bit easier than setting up the responsive grid columns.
How do you think it will work on a phone? Does it need a media query to stack the social buttons above the footer on mobile?

In my test, it turned into two lines. The order of the two divs (social, copyright) might be reversed to have the social buttons above the copyright.

There is a lot of room to tinker with the look and feel

rod barbee · 2016-09-16 08:03:50

There is a lot of room to tinker with the look and feel wink

There sure is. It gives me some ideas for a three column footer with social stuff, copyright, and maybe even an additional bit of nav links leading to things like a newsletter page, licensing statements, etc.

Daniel Leu · 2016-09-16 08:15:08

rod barbee wrote:

There is a lot of room to tinker with the look and feel wink
There sure is. It gives me some ideas for a three column footer with social stuff, copyright, and maybe even an additional bit of nav links leading to things like a newsletter page, licensing statements, etc.

Yep, that's something I am looking at as well. Maybe some additional items coming from blog posts too.

PhilippeH · 2016-09-16 09:30:02

I have not yet ssay your code, but here's the PHP code I managed to do.

PHP

I do not have the right font (Open Sans) for the copyright or the script for the automatic changing of the year, and the icons of social médéa I can not align to the left.

I will try this tomorrow, for me it is 2:30 am and I think I'll go to bed.

thank you

Philippe

function ttg_footer_bottom( $style, $path ) {
echo '
<div class="custom_footer">
<div class="content clearfix">

<div class="col_6 alpha">

<p><font size="0.857rem"><font face="open sans">© 2014 - 2016 - Phoneographie.com - Philippe Hamiche - Tout droits réservés</font></font></p>

</div>

<div class="col_4">
<p> </p>

</div>

<div class="col_2 omega">

<p>
<a href="https://www.twitter.com/PhilippeHamiche/" target="_blank"><img src="/image/icons/webicon-twitter-s.png" title="Twitter"/></a>
<a href="https://www.facebook.com/philippe.hamiche/" target="_blank"><img src="/image/icons/webicon-facebook-s.png" title="Facebook"/></a>
<a href="https://plus.google.com/b/100300750167091687192/100300750167091687192/" target="_blank"><img src="/image/icons/webicon-googleplus-s.png" title="Google Plus"/></a>
</p>
</div>

</div>

</div>
</div>
';
return true;
} // END

Daniel Leu · 2016-09-16 09:42:18

You should use 'return false' in order to avoid the two footers, unless this is what you want.

PhilippeH · 2016-09-16 20:55:22

Daniel thank you, something I just did.

So that's what I did: On the home page http://test.vuedailleurs.com I have inserted the PHP code that I managed to write. With this code I do not know if there is a price support script to automatically change the copyright date, and I do not manage to line up on the left three icons of social networks. I looked in the documentation but I have not found anything!

I also insert PHP code you provided me on the contact page: http://test.vuedailleurs.com/?page=contact (? Why this strange URL), but I can not change the size of typography is to align all as I would like!

Thank you,

Philippe

rod barbee · 2016-09-16 22:16:39

With this code I do not know if there is a price support script to automatically change the copyright date

try this instead of the code you have:

<p style="font-size:0.857rem; font-family: \'Open Sans\';">&copy; 2014-<?php echo date("Y") ?> - Phoneographie.com - Philippe Hamiche - Tout droits réservés</p>

I took out the font tag as that is depreciated in html5. The back-slashes are used to escape the single quotes around 'Open Sans'

(? Why this strange URL)

Page url format is controlled in Backlight Settings > Website Settings > Page URL Format

I also insert PHP code you provided me on the contact page: http://test.vuedailleurs.com/?page=contact ...., but I can not change the size of typography is to align all as I would like!

You also have two footers. As Daniel suggested above, use return false; to remove the default footer and only display the one you created.
You'll need to add some padding left and top to the social icons and some padding right to the copyright text. You can just add the styling to each of those classes in your custom css:

to the .footer-social class, try adding padding-top: 12px; and padding-right: 20px;

to the .footer-copyright class, try adding padding-right: 20px;

play with the amount of padding to get things where you want them.

Daniel Leu · 2016-09-16 23:55:05

PhilippeH wrote:

I also insert PHP code you provided me on the contact page: http://test.vuedailleurs.com/?page=contact (? Why this strange URL), but I can not change the size of typography is to align all as I would like!

You can change this in Backlight > Settings > Website Settings > Page URL Format. I use the format 'about.php'.

PhilippeH · 2016-09-17 01:21:36

For the PHP code that Daniel gave me was in function ttg_footer_bottom So I set ttg_footer_top, which removed the first page footer.

By account it is impossible to align the copyright and social networks icons on the contact page as I did on my homepage.

Are there a solution to move the social network icons that appear on my homepage on the right, and are in a responsive grid column?

thank you,

Philippe

rod barbee · 2016-09-17 01:27:17

have you tried using the same phplugins and custom css on your about page as you use on your home page?

Daniel Leu · 2016-09-17 02:04:41

Why don't you use the same code on your about page that you use on your frontpage?

By account it is impossible to align the copyright and social networks icons on the contact page as I did on my homepage.

You didn't use the float:left/right styles I had in my original code.

Are there a solution to move the social network icons that appear on my homepage on the right, and are in a responsive grid column?

That's what you use on your frontpage, isn't it?

PhilippeH · 2016-09-17 19:03:23

Hello,

After many hours of trial and error, that's what I managed to do. I finally make a code to blend so nicely by Daniel and Rod, and I was pretty successful air. http://test.vuedailleurs.com

As against the copyright, there is no automatic exchange with data enter the Backlight configuration software

Regarding the different codes on the home page and contact page is that I wanted to see which suited me best.

Thank you to you for your advice, and your patience.

Philippe

Last edited by PhilippeH (2016-09-18 00:24:14)

Daniel Leu · 2016-09-18 00:39:04

Philippe,

In order not to have to update the copyright notice on January 1st, you can use following code:

<p>© 2014 - '.date("Y").' - Phoneographie.com - Philippe Hamiche - Tout droits réservés</p>

PhilippeH · 2016-09-18 06:52:11

Daniel thank you for that bit of code. it's done now.

Philippe

Daniel Leu · 2016-09-18 12:37:02

:-)

Community @ The Turning Gate

#1 2016-09-16 04:58:42

Footer

#2 2016-09-16 05:07:34

Re: Footer

#3 2016-09-16 05:10:07

Re: Footer

#4 2016-09-16 05:21:21

Re: Footer

#5 2016-09-16 06:19:30

Re: Footer

#6 2016-09-16 06:28:31

Re: Footer

#7 2016-09-16 06:55:37

Re: Footer

#8 2016-09-16 07:01:02

Re: Footer

#9 2016-09-16 07:01:31

Re: Footer

#10 2016-09-16 07:07:35

Re: Footer

#11 2016-09-16 07:27:41

Re: Footer

#12 2016-09-16 08:03:50

Re: Footer

#13 2016-09-16 08:15:08

Re: Footer

#14 2016-09-16 09:30:02

Re: Footer

#15 2016-09-16 09:42:18

Re: Footer

#16 2016-09-16 20:55:22

Re: Footer

#17 2016-09-16 22:16:39

Re: Footer

#18 2016-09-16 23:55:05

Re: Footer

#19 2016-09-17 01:21:36

Re: Footer

#20 2016-09-17 01:27:17

Re: Footer

#21 2016-09-17 02:04:41

Re: Footer

#22 2016-09-17 19:03:23

Re: Footer

#23 2016-09-18 00:39:04

Re: Footer

#24 2016-09-18 06:52:11

Re: Footer

#25 2016-09-18 12:37:02

Re: Footer

Board footer