WordPress.org

Ready to get started?Download WordPress

Forums

Help Moving Icons In Footer (6 posts)

  1. KMLProxy
    Member
    Posted 4 years ago #

    Hello,

    I have five icons on the bottom left side of my footer - three Twitter icons, a Facebook icon and a RSS icon. In the middle of the footer is the normal copyright information.

    What I would LIKE to do, is to move the Facebook and RSS icons to the RIGHT side of the footer.

    I would therefore have my three Twitter icons exactly where they are, copyright information in the middle, and the Facebook and RSS icons on the right side, in the mirrored position of the Twitter icons.

    Could someone tell me how exactly to move them? I edited them in by simply copying the RSS icon element in the footer.php that was already in the theme I built several times over, adding new CSS and changing relevant information.

    My website is here: http://www.thepoliticalpodium.com/

    Thank you very much for any help!

    Here is my CSS
    --

    .art-fb-tag-icon
    {
    position: relative;
    display: block;
    float: left;
    background-image: url('images/icon_web_facebook_politicalpodium.png');
    background-position: center right;
    background-repeat: no-repeat;
    margin: 0 5px 0 0;
    height: 32px;
    width: 32px;
    cursor: default;
    }

    .art-twpp-tag-icon
    {
    position: relative;
    display: block;
    float: left;
    background-image: url('images/icon_web_twitter_politicalpodium_pp.png');
    background-position: center right;
    background-repeat: no-repeat;
    margin: 0 5px 0 0;
    height: 32px;
    width: 32px;
    cursor: default;
    }

    .art-twrr-tag-icon
    {
    position: relative;
    display: block;
    float: left;
    background-image: url('images/icon_web_twitter_politicalpodium_rr.png');
    background-position: center right;
    background-repeat: no-repeat;
    margin: 0 5px 0 0;
    height: 32px;
    width: 32px;
    cursor: default;
    }

    .art-twll-tag-icon
    {
    position: relative;
    display: block;
    float: left;
    background-image: url('images/icon_web_twitter_politicalpodium_ll.png');
    background-position: center right;
    background-repeat: no-repeat;
    margin: 0 5px 0 0;
    height: 32px;
    width: 32px;
    cursor: default;
    }

    .art-rss-tag-icon
    {
    position: relative;
    display: block;
    float: left;
    background-image: url('images/icon_web_rss_politicalpodium.png');
    background-position: center right;
    background-repeat: no-repeat;
    margin: 0 5px 0 0;
    height: 32px;
    width: 32px;
    cursor: default;
    }

    Here is my footer.php
    --

    <div class="art-footer">
    <div class="art-footer-inner">





    <div class="art-footer-text">
    <p>
    <?php
    global $default_footer_content;
    $footer_content = get_option('art_footer_content');
    if ($footer_content === false) $footer_content = $default_footer_content;
    echo stripslashes($footer_content);
    ?>
    </p>
    </div>
    </div>
    <div class="art-footer-background">
    </div>
    </div>

    <div class="cleared"></div>
    </div>
    </div>
    <div class="cleared"></div>
    <p class="art-page-footer"></p>

    </div>

    <!-- <?php printf(__('%d queries. %s seconds.', 'kubrick'), get_num_queries(), timer_stop(0, 3)); ?> -->
    <?php ob_start(); wp_footer(); $content = ob_get_clean(); if (strlen($content)) echo '<div>' . $content . '</div>'; ?>
    </body>
    </html>

  2. KMLProxy
    Member
    Posted 4 years ago #

    Odd, for some reason the links within the art-footer-inner didn't show... in any event, here they are:

    a href="http://www.twitter.com/politicalpodium" class="art-twpp-tag-icon" title="@PoliticalPodium">
    a href="http://www.twitter.com/rightrepublic" class="art-twrr-tag-icon" title="@RightRepublic">
    a href="http://www.twitter.com/leftleague" class="art-twll-tag-icon" title="@LeftLeague">
    a href="http://www.facebook.com/pages/The-Political-Podium/141080072589452" class="art-fb-tag-icon" title="Facebook">
    a href="http://feeds2.feedburner.com/ThePoliticalPodium" class="art-rss-tag-icon" title="RSS">

  3. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    change the float:left to float:right on the art-fb and art-rss?

  4. KMLProxy
    Member
    Posted 4 years ago #

    That did the trick... although merely changing that value, now the Facebook icon is to the right of the RSS icon.

    I'd like the Facebook icon to be to the LEFT of the RSS icon, so that the RSS icon is the very most bottom right icon.

    Any tips?

  5. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    yeah, they are parsed in the order they appear in your links list

    so, move the rss link above the facebook link in your code

  6. KMLProxy
    Member
    Posted 4 years ago #

    I now have an issue where the footer is thicker than it originally was... any ideas?

Topic Closed

This topic has been closed to new replies.

About this Topic