Ad in footer?

[Shades.]

How would I go about putting a small banner in the middle of the footer?

[Kindred]

add code into index.template.php in the same section as the copyright is called...    (think it's html_template_below, or something like that)

[Shades.]

add code into index.template.php in the same section as the copyright is called...    (think it's html_template_below, or something like that)

Well I've been trying that for a while now is why I'm asking here   cause I can't figure out how to put it in the middle, and so that it doesn't break the codes or the lines that are already there.

Here is my code that is there (it's not default):

Code Select Expand

    // Show the footer with copyright, terms and help links.
    echo '
    <div id="footer">
        <div class="inner_wrap">';

    // There is now a global "Go to top" link at the right.
    echo '
        <ul>
            <li class="floatright">2022 &copy; <a href="https://bikerhound.com">BikerHound.com</a> | <a href="', $scripturl, '?action=help">', $txt['help'], '</a> ', (!empty($modSettings['requireAgreement'])) ? '| <a href="' . $scripturl . '?action=agreement">' . $txt['terms_and_rules'] . '</a>' : '', ' | <a href="#top_section">', $txt['go_up'], ' &#9650;</a></li>';
    // Show the load time?
    if ($context['show_load_time'])
        echo '
        <li class="floatright clear">', sprintf($txt['page_created_full'], $context['load_time'], $context['load_queries']), '</li>';
echo '
            <li class="copyright">', theme_copyright(), '</li>
                        <li>Web Designs by: <a href="https://shadesweb.com.com" target="_blank" class="new_win">ShadesWeb.com</a></li>
                        <ul>
        </ul>';

    echo '
        </div>
    </div><!-- #footer -->';

}
I want to put an adsense code in the middle/center in that big ol' blank spot lol!


Thanks!

[Mick.]

To achieve this, You could use Flexbox. Let's build a new SMF Footer...

The CSS..

Code Select Expand

.footer_column {
  flex-basis: 100%;
  padding: 0;
  margin: 5px 0;
  color: #fff;
  text-align: center;
}

@media screen and (min-width: 800px) {
  .footer_row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: auto;
  }
  .footer_column {
    flex: 1;
  }
}

The new Footer with new classes.

Code Select Expand

// Show the footer with copyright, terms and help links.
echo '
<div id="footer">
<div class="footer_row">';

// There is now a global "Go to top" link at the right.
echo '
<div class="footer_column">', theme_copyright(), '</div>
<div class="footer_column">Your Ad</div>
<div class="footer_column"><a href="', $scripturl, '?action=help">', $txt['help'], '</a> ', (!empty($modSettings['requireAgreement'])) ? '| <a href="' . $scripturl . '?action=agreement">' . $txt['terms_and_rules'] . '</a>' : '', ' | <a href="#top_section">', $txt['go_up'], ' &#9650;</a>';

// Show the load time?
if ($context['show_load_time'])
echo '
<p>', sprintf($txt['page_created_full'], $context['load_time'], $context['load_queries']), '</p>
                </div>';

echo '
</div><!-- .footer_row -->
</div><!-- #footer -->';

You can add as many blocks as you want but ideally 4 is the max in my opinion.
<div class="footer_column">Another Space killed by Shades</div>

[Shades.]

Well we're getting there that got me a lot closer than what I was doing but it's still a little funky. The "page created" time is off to the right and needs to slide back under the "Help and Terms".

(see new attachment)

[Mick.]

I moved the closing div over. Try this..

Code Select Expand

// Show the footer with copyright, terms and help links.
echo '
<div id="footer">
<div class="footer_row">';

// There is now a global "Go to top" link at the right.
echo '
<div class="footer_column">', theme_copyright(), '</div>
<div class="footer_column">Your Ad</div>
<div class="footer_column"><a href="', $scripturl, '?action=help">', $txt['help'], '</a> ', (!empty($modSettings['requireAgreement'])) ? '| <a href="' . $scripturl . '?action=agreement">' . $txt['terms_and_rules'] . '</a>' : '', ' | <a href="#top_section">', $txt['go_up'], ' &#9650;</a>';

// Show the load time?
if ($context['show_load_time'])
echo '
<p>', sprintf($txt['page_created_full'], $context['load_time'], $context['load_queries']), '</p>
                </div>';

echo '
</div><!-- .footer_row -->
</div><!-- #footer -->';


[Shades.]

That's looking real good!

Hows about floating left and right so the copyright is all the way to the left and the help and terms is all the way to the right?

[Mick.]

Remove max-width: 1200px;

I set that based on default.

[Shades.]

Not quite what I meant but that helped too!

I guess what I mean is how can I center the whole table and justify the text? In other words I need the text alignment to be like it is at the bottom of this forum and the add centered. Is that easy to do?

Sorry I'm tryna learn...my eyes are bleeding lol!

Edit: In the image attached I set the text alignment to "Justify" for an example, now I just need to center that whole thing and I'm good!

[Mick.]

I know what you meant.

Flexbox creates boxes with an equal width. When adding text, naturally it will be aligned to the left. So I centered them inside that box so it looks nicer. But what you now want is more to add which I don't know by heart. I would have to sit down and play with it. You wanted a centered ad space. You have it. Maybe and just maybe, adding a span to move the help thingy to the right but I doubt it will work. Trial and error is your best friend.

try something like:

Code Select Expand

<div class="footer_column"><span style="text-align: right;"><a href="', $scripturl, '?action=help">', $txt['help'], '</a> ', (!empty($modSettings['requireAgreement'])) ? '| <a href="' . $scripturl . '?action=agreement">' . $txt['terms_and_rules'] . '</a>' : '', ' | <a href="#top_section">', $txt['go_up'], ' &#9650;</a></span></div>
Remove max-width: 1200px; and text-align: center;

[Mick.]

Use this one. This works.

Code Select Expand

.footer_column {
  flex-basis: 100%;
  margin: 5px 0;
  color: #fff;
}
@media screen and (min-width: 800px) {
  .footer_row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: auto;
  }
  .footer_column {
    flex: 1;
  }
}


Code Select Expand

// Show the footer with copyright, terms and help links.
echo '
<div id="footer">
<div class="footer_row">';

// There is now a global "Go to top" link at the right.
echo '
<div class="footer_column"><div style="text-align: left; margin-left: 10px;">', theme_copyright(), '</div></div>
<div class="footer_column"><div style="text-align: center;">Your Ad</div></div>
<div class="footer_column"><div style="text-align: right; margin-right: 10px;"><a href="', $scripturl, '?action=help">', $txt['help'], '</a> ', (!empty($modSettings['requireAgreement'])) ? '| <a href="' . $scripturl . '?action=agreement">' . $txt['terms_and_rules'] . '</a>' : '', ' | <a href="#top_section">', $txt['go_up'], ' &#9650;</a></div>';

// Show the load time?
if ($context['show_load_time'])
echo '
<p>', sprintf($txt['page_created_full'], $context['load_time'], $context['load_queries']), '</p>
</div>';

echo '
</div><!-- .footer_row -->
</div><!-- #footer -->';


[Shades.]

Thank you very much just what I needed!

I changed it around and did some (trial and error) and did this:

Just posting this for my reference mainly (but anyone in need)

Index.css:

Code Select Expand

/***** Begin Custom Footer grid *****/

.footer_column {
  flex-basis: 100%;
  padding: 0;
  margin: 5px 0;
  color: #fff;
}
@media screen and (min-width: 800px) {
  .footer_row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: auto;
    max-width: 90%;
  }
  .footer_column {
    flex: 1;
  }
}

/***** End Custom Footer grid *****/
I put the max-width: 1200px; back in there for now cause I'm gonna play around with different sizes and forum widths to see what works best.

index.template.php:

Code Select Expand

// Show the footer with copyright, terms and help links.
echo '
<div id="footer">
<div class="footer_row">';

// There is now a global "Go to top" link at the right.
echo '
<div class="footer_column"><div style="text-align: left; margin-left: 10px;">', theme_copyright(), '</div>
<div class="footer_column"><div style="text-align: left; margin-left: 10px;">Web Designs by: <a href="https://shadesweb.com.com" target="_blank" class="new_win">ShadesWeb.com</a></div></div></div>
<div class="footer_column"><div style="text-align: center;">2022 &copy; <a href="https://bikerhound.com">BikerHound.com</a></div></div>
<div class="footer_column"><div style="text-align: right; margin-right: 10px;"><a href="', $scripturl, '?action=help">', $txt['help'], '</a> ', (!empty($modSettings['requireAgreement'])) ? '| <a href="' . $scripturl . '?action=agreement">' . $txt['terms_and_rules'] . '</a>' : '', ' | <a href="#top_section">', $txt['go_up'], ' &#9650;</a></div>';

// Show the load time?
if ($context['show_load_time'])
echo '
<div class="footer_column"><div style="text-align: right; margin-right: 10px;"><p>', sprintf($txt['page_created_full'], $context['load_time'], $context['load_queries']), '</p>
</div>';

echo '
</div><!-- .footer_row -->
</div><!-- #footer -->';
Thanks a million @Mick. 

Marking solved!

[Mick.]

That may not work as wanted earlier. You made a fourth box. Now your ad wont be centered and remember, we called box1 to creep to the left, box2 center, and box3 creep to the right. Right? Having another box creeping left, may not look good.

Would be best if used like this..

Code Select Expand

    // Show the footer with copyright, terms and help links.
    echo '
    <div id="footer">
    <div class="footer_row">';

    // There is now a global "Go to top" link at the right.
    echo '
        <div class="footer_column"><div style="text-align: left; margin-left: 10px;">', theme_copyright(), '<p>You can put your stuff in here</p></div></div>
        <div class="footer_column"><div style="text-align: center;">Your Ad</div></div>
        <div class="footer_column"><div style="text-align: right; margin-right: 10px;"><a href="', $scripturl, '?action=help">', $txt['help'], '</a> ', (!empty($modSettings['requireAgreement'])) ? '| <a href="' . $scripturl . '?action=agreement">' . $txt['terms_and_rules'] . '</a>' : '', ' | <a href="#top_section">', $txt['go_up'], ' &#9650;</a></div>';

    // Show the load time?
    if ($context['show_load_time'])
        echo '
        <p>', sprintf($txt['page_created_full'], $context['load_time'], $context['load_queries']), '</p>
        </div>';

    echo '
    </div><!-- .footer_row -->
    </div><!-- #footer -->';

Lookie here https://www.idesignsmf.com/dev-site2/index.php

[Shades.]

 

Lookie here https://www.idesignsmf.com/dev-site2/index.php

That looks good but turn on your "Page Created" time and see if it puts it under and off to the left of the help links. Cause that's what that code is doing to me.

[Shades.]

I don't even remember what I did in the code I posted above but it looks good on the front end. Just hope it don't break something else!

Look at it, the way I modified it (see attachment)

[Mick.]

Looks fine.

[Shades.]

Thanks I'm still tinkering with it b4 I put it on the main site.