WordPress.org

Forums

Tiny Forge
[resolved] Remove or move footer widget on just home page (28 posts)

  1. nicolesage
    Member
    Posted 1 year ago #

    Hi again. Sorry for all the Saturday posts.

    I'm trying to either remove the footer widgets from only the home page ('front page template') and not the other pages that use 'default template' or, ideally move them to the bottom of the page. There is not content on the home page except a full page background image, navigation and footer widgets. Since there is no content the footer widgets on the hope page are on top of the page right under the navigation.

    Is this something I edit in the file 'front-page.php'? I don't want it to change on any of the other pages which uses 'default template' but I'm not sure which .php file is the default.

    Is there anyway to achieve this? Changing behavior of the footer widget only on the home page and nowhere else.

    Thank you!

  2. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    If you home page doesn't have any content, it is not a good thing, especially in terms of google (SEO), there should be at least something that search engines could index.

    Are you putting some slider in there?

  3. nicolesage
    Member
    Posted 1 year ago #

    The client just wants the image, which is a photograph of the businesses cut out sign/logo so when you go to their page that is the first thing you see large and centered. Then the navigation sitting up top above it and the footer is their business hours and address. Then when you click onto any other page, the image lowers in opacity and text overlays it.

    i hope I'm making sense.

    I understand what you are saying about the google SEO but unfortunately i'm following client's design desires.

  4. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    If you want to move footer down, insert your image in a <div> that has parameters of height and width.

    If you want to hide it, you may try:

    body.home footer {
    display: none;
    }
  5. nicolesage
    Member
    Posted 1 year ago #

    I'm not sure how to place the image in a <div> since I am using the plugin 'Background Manager' so the image on every page is a full screen. Any suggestions where to look to accomplish moving the footer down while still using this plugin on the page?

    The code worked to remove the footer (thank you!!) But now the client is asking for the footer to be on the home page since it has the business hours, etc but moved down.

    Any direction to accomplish this would be greatly appreciated. Thank you!

  6. nicolesage
    Member
    Posted 1 year ago #

    Would it work to move it down using something like the about code that removed it but instead of 'display: none' it moves it to the bottom or the screen?

  7. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    It is very hard (and unproductive) to help by doing a guess work. Please provide your site address, so it would be possible to see real situation.

  8. nicolesage
    Member
    Posted 1 year ago #

    I understand and apologize for that. The client does not want it live until it is completed. If you let me know when you are on the message board and have time to check the site I will make it live and send the link. I will be at the computer working on it most of the day so will keep checking back to see when you are on.

    Sorry for any inconvenience.

  9. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    I'm here.

  10. nicolesage
    Member
    Posted 1 year ago #

    Great, thank you!

    Website is here

  11. nicolesage
    Member
    Posted 1 year ago #

    So what I am trying to do is on the home page move the footer down towards the bottom so it sits right under the image of the sign. That way their homepage has their hours and such because all they want are those and the image which is their logo.

    thank you!

  12. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    I'm experimenting a bit, but even if you get the footer down, it will be somehow interrupted by the background image, in this case perhaps you could make it smaller? On my laptop monitor, that has pretty high resolution background image extends past to bottom of the screen.

  13. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    The screen capture: https://imgur.com/Artfye3

  14. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    I noticed that on narrower browser window it gets better, but wide screen are pretty popular these days.

  15. nicolesage
    Member
    Posted 1 year ago #

    Thank you, I appreciate you experimenting! I've been trying several ways also with sticky footers and positioning in the css but nothing seems to be moving it.

    I see what you mean about the image extending, I could make it smaller. right now the images is 1060 x 826 but the plugin I used to make it full screen is supposed to make it responsive so the image shouldn't be extending. I will have to play with that a bit.

  16. nicolesage
    Member
    Posted 1 year ago #

    hmmm yes I see what you mean now. Maybe I should play with making the overall image wider so it fits to the wider screens?

  17. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    Try this:

    footer#colophon {
        position: absolute;
        bottom: 0px;
        width: 100%;
    }
  18. nicolesage
    Member
    Posted 1 year ago #

    So that works but it applies it to every single page. I was trying to make it work with just the home page since all the other pages have content so by making the footer absolute it overlaps with content on those other pages.

    maybe something with bogy.home footer instead of footer#colophon?

    That might not make sense, I'm still learning by experimenting.

  19. nicolesage
    Member
    Posted 1 year ago #

    OK so I did:

    body.home footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    }

    which seems to be working except now on the mobil homepage it's acting weird by overlapping footer onto the menu bar.

  20. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    I suggest you start using style.css that is provided with child theme example. This way you will have better perspective where goes what, also you will be able to apply css rules only for certain media queries - they will affect only certain screen size. In this case you could add css rules just starting with 770px screen size.

  21. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    BTW look at this too: http://themehybrid.com/plugins/restaurant

    There are many plugins like that, but Justin Tadlock is WP super star, I always check plugins of such guys, because they do as it should be done.

    This guy is also top dog from WP-Begginer: https://wordpress.org/plugins/restaurant-menu-manager/screenshots/

    Check out his plugin too: https://wordpress.org/plugins/food-and-drink-menu/screenshots/ it has nice out of the box look, not tested, just looking at images

    In terms of SEO take a look at this too: https://wordpress.org/plugins/recipe-schema/

  22. nicolesage
    Member
    Posted 1 year ago #

    I am using a child's theme and refer to the theme's style sheet for help.

    In changing the rule to the 770px media screen, would it be adding a padding to the top? or do I need to target the footer for this? Any tips on what direction to go would be greatly appreciated. Basically just on the home page of cell phone view I need to move the footer down so it does not overlap the menu.

    Thank you for all your help this afternoon!

  23. nicolesage
    Member
    Posted 1 year ago #

    Also thank you for all those links! I just saw that post.

  24. nicolesage
    Member
    Posted 1 year ago #

    So I played with the below adding in just the 'padding-top' but it changes the padding on the view on the computer, not on the cell phone screen.

    /* 12.1 Minimum width of 770 pixels */
    @media screen and (min-width: 770px) {
    /* Three footer widget areas */
    #footer-widgets {
    width: 100%;
    border-top: none;
    padding-top: 20%;
    }
    #footer-widgets.three #footer-widget-left {
    float: left;
    width: 30%;
    padding-right: 2.3%;
    padding-top: 20%;
    }
    #footer-widgets.three #footer-widget-middle {
    float: left;
    width: 30%;
    padding-left: 2.5%;
    padding-right: 2.3%;
    padding-top: 20%;
    }
    #footer-widgets.three #footer-widget-right {
    float: right;
    width: 30%;
    padding-left: 2.5%;
    padding-top: 20%;

    Am I at least in the right direction to adjust the footer on cell phone screens? Need it moved down slightly so it does not overlap the menu.

    thank you!

  25. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    Mobile screen is everything in the beginning. Media queries is everything going wider; min 770px, then min 960px. So if you want to move footer down just for the wide display, you can include it in 770px or 960px media query.

    As far as I remember, default config for mobile view looks good without modifications.

  26. nicolesage
    Member
    Posted 1 year ago #

    hmm OK. I guess I'm just having a hard time understanding why the footer now overlaps the menu when viewing on the cell phone screen. and then when I tap the menu and it drops down, then text from the footer is mixed in with the menu items. Trying to find out where along the lines I put something in my child's theme to possibly cause this.

  27. nicolesage
    Member
    Posted 1 year ago #

    Am I totally off by doing something like this (it fixed the overlapping problem on the cell phone but then on the computer the footer was back up in the middle of the screen:

    body.home footer @media screen and (min-width: 770px) {
    position: absolute;
    bottom: 0px;
    width: 100%;
    }

    I originally had just this (which worked for moving footer down on computer but caused it to overlap on cell phone):

    body.home footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    }

  28. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    You wrote css incorrectly. It should be:

    @media screen and (min-width: 770px) {
    	body.home footer {
    		position: absolute;
    		bottom: 0px;
    		width: 100%;
    	}
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.