How does footer (rank) for Forefront behave

Home Forums Automattic Forefront How does footer (rank) for Forefront behave

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #107875 Resolve

    theeagertraveller

    Hi there – I’m trying to populate the footer widget. I can see in the widget section under ‘Appearance’ that there is only 1 footer but in the page itself there are 3 columns in the footer.

    For instance, I have the RSS link widget at 4th rank in the footer widget but when I view the page, it goes to the 2nd column of the footer. I’d like to understand how the footer for the Forefront theme behaves please. So I know how to rank the widgets.

    Thanks for your help. Cheers

    The blog I need help with is theeagertraveller.com
    #138314

    Michelle

    The footer widgets are generally ordered first from left to right, then top to bottom. Once you get to the second row, the widgets are arranged in such a way that the spacing between the rows is even. I hope this helps!

    #138377

    theeagertraveller

    Honestly, the footer widget is a bit tricky for this theme :( For instance, the RSS link widget on my homepage is too far from the text widget above (social icons).

    Is there any code to arrange the widget as I wish? Currently, I have to do trial and error with the widget ranking until I get them to the position I want them. Also, if there is an override code to make the widgets closer to each other in the footer area.

    Thanks

    #138432

    Michelle

    I hear you about the footer widgets. It’s using a script called jQuery Masonry to arrange the widgets to best fit the available vertical space, and as a result, the widgets may not always follow a perfect logical ordering. You can see an example of this type of grid on this page. I’m afraid there it’s not possible to work around this, since we’re limited to only editing the CSS.

    However, the good news is, we can reduce the spacing between the widgets with CSS!

    .footer-widget-area .widget {
    margin-bottom: 25px;
    }

    I gave you similar code earlier for reducing space between widgtes, so paste this code below that code so it will take precedence. Feel free to adjust the 25px to whatever value works for you.

    #138436

    theeagertraveller

    That’s unfortunate but thanks for looking into this. Much appreciated.

    I placed the CSS you just provided under the ff, is that correct?

    /*

    Decrease space below widget area 1

    */

    .optional-widget-area .widget {

    margin-bottom: 30px;

    }

    Also, I noticed that on the CSS section, I see two symbols with “!” in a yellow triangle. I can see them on line 190 & 220. Should I be worried?

    Thank you.

    #138437

    theeagertraveller

    Oh btw, can you please help me with the code to add a bold line just at the top of the footer widget? I decided to go with color bacground white and simply wanted to add a bold line on top to act as a separator. Thank you.

    #138465

    Michelle

    Hi Jean,

    Yes, where you placed the CSS code is fine.

    Also, I noticed that on the CSS section, I see two symbols with “!” in a yellow triangle. I can see them on line 190 & 220. Should I be worried?

    I only see the warning on line 190 (we might have changed something for the other one you saw). It’s not a huge deal, but this particular warning says that the “-9999px” text indent doesn’t work well for sites that are using right-to-left languages. Since your site is left-to-right, there’s not much cause for concern. If you would like to remove the warning, however, you can add a “direction: ltr” that block. So, it would be:

    body.category .page-title,
    body.tag .page-title {
    text-indent: -9999px;
    direction: ltr;
    }

    #138469

    Michelle

    Oh btw, can you please help me with the code to add a bold line just at the top of the footer widget? I decided to go with color bacground white and simply wanted to add a bold line on top to act as a separator. Thank you.

    Yes, you can add a border with this code:

    .footer-widget-area {
    border-top: 2px solid #bb9e1f;
    }

    This will add a 2px thick border with the same gold color as your links. Of course, feel free to adjust this to your preferences. :)

    #138487

    theeagertraveller

    Thanks Michelle. Have placed both CSS and worked as expected.

    #138570

    Michelle

    You’re welcome, I’m glad that it works the way you wanted it to. :)

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘How does footer (rank) for Forefront behave’ is closed to new replies.