WordPress.org

Ready to get started?Download WordPress

Forums

Turning the buttom menu into a contact bar (14 posts)

  1. M_torp
    Member
    Posted 1 year ago #

    Hello, thanks for reading.
    I'm no expert and know only little about coding, but i'm quite familiar with the basics of WordPress.

    However i have some trouble with the layout of my site le-broc.dk, basicly i wanna add a contact bar to the buttom of my page cause it's more useful than a menu bar in my case.

    This is by default not possible with my theme "Adventure Journal" and i therefor fear that i have to change some code, which i have no idea how to do.
    Hopefully somebody can help me?

    Note: I marked the area "Contact bar centered here" in case somebody wonder what i mean.

    Thank you

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    You should either create a Child Theme or use a Custom CSS/Style plugin when making changes to themes not custom.

    Then if you want that contact bit centred, try adding the following CSS;

    .nav-footer li {
     width: 100%;
    }
  3. CodeBotics
    Member
    Posted 1 year ago #

    As Andrew suggest, you first need to learn how to create a child theme. Once you've done this, add the following code to 'footer.php':

    <?php
    /**
     * @package WordPress
     * @subpackage Adventure_Journal
     */
    ?>
    			<!-- begin footer -->
    			<div class="clear"></div>
                <div id="footer">
    				<div class="nav-horz nav-footer"><div style="width: 100%; text-align: center">TYPE YOUR CONTACT DETAILS HERE</div></div>
    				<?php wp_footer(); ?>
    				<div class="clear"></div>
                </div>
              </div>
            </div>
    		<div id="colophon">
    			<a id="ctxophon" href="http://www.contextureintl.com/?sref=aj" title="A WordPress Theme by Contexture International"></a>
    			<a id="wpophon" href="http://www.wordpress.org" title="Powered by WordPress"></a>
    			<div class="clear"></div>
    		</div>
        </div>
    </body>
    </html>
  4. CodeBotics
    Member
    Posted 1 year ago #

    I've made the child theme for you: http://www.codebotics.co.uk/files/adventure-journal-child.zip

    I can't guarantee that it'll work, as I haven't tested it. Once you've installed the theme (here: http://le-broc.dk/wp-admin/theme-install.php?tab=upload) go to http://le-broc.dk/wp-admin/theme-editor.php?file=footer.php&theme=adventure-journal-child and change "TYPE YOUR CONTACT DETAILS HERE" to whatever contact info you wanted to add.

    Hope this helps!

  5. dudd
    Member
    Posted 1 year ago #

    Or go to the footer.php template and then you can edit there

    [ Signature moderated. ]

  6. CodeBotics
    Member
    Posted 1 year ago #

    Or go to the footer.php template and then you can edit there

    This will work, but causes problems when the theme is updated. It's considered 'the right way' to make a child theme, as you can keep your changes when the theme is updated.

  7. M_torp
    Member
    Posted 1 year ago #

    Great thank you everyone. I'll try to get a better understanding of chil themes soon.

    Anyway i did as you told me CodeBotics, but as you can see the text is floating a bit above where it should be? Any thoughts on that?

  8. CodeBotics
    Member
    Posted 1 year ago #

    Try changing style="width: 100%; text-align: center" to style="width: 100%; text-align: center; margin-top: 0px; padding-top: 12px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px;"

  9. CodeBotics
    Member
    Posted 1 year ago #

    And if you want the colour to be the same as the links originally were:
    style="width: 100%; text-align: center; margin-top: 0px; padding-top: 12px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; color: #603913;"

  10. M_torp
    Member
    Posted 1 year ago #

    Thank didn't quite go middle but i played a bit with it and it looks alright now.

    Thanks a lot again :)

  11. CodeBotics
    Member
    Posted 1 year ago #

    No problem :) You can get rid of the padding-left and padding-right if you like, they're not changing how it looks at all.

  12. M_torp
    Member
    Posted 1 year ago #

    I did but i'm still curious why you put them in there?

  13. CodeBotics
    Member
    Posted 1 year ago #

    I copied the styles from the original theme, and forgot to get rid of them when I added it to the code above!

  14. M_torp
    Member
    Posted 1 year ago #

    ic thanks :)

Topic Closed

This topic has been closed to new replies.

About this Topic