ThemeShaper Forums » Thematic

[closed]

adding icons to menu

(14 posts)
  • Started 1 year ago by cookieandkate
  • Latest reply from mrmikeman
  • This topic is not resolved

  1. cookieandkate
    Member

    Hi,

    I have read through the Thematic menus demystified post and read about Wordpress menu styling, but I'm still stumped. All I want to do is add a small twitter and a small RSS icon in the top navigation menu on my blog, http://cookieandkate.com. I already have text links listed in the top nav—they are left aligned, though, and I want the icons to appear separately, but in the same row, on the right.

    I've tried adding a custom CSS style to the links, and applying an image through the stylesheet, but it won't work. I must be doing something wrong. I would so appreciate your help!

    Sincerely,
    Kate

    Posted 1 year ago #

  2. sowingseeds
    Member

    Maybe something simple will get you what you want. How about adding a new division into thematic_aboveheader (I assume your menu is already in that hook)? Maybe then if you put the social media icons inside a class division styling would be not too difficult.

    So for example:
    function my_div_socmedia(){
    echo '<div id="socmedia"><div class="icons_social"><img src="path_to_icon1" /><img src="http://path_to_icon2" /></div></div>';
    }
    add_action('thematic_aboveheader','my_div_socmedia');

    Then in css:
    #socmedia { margin-left:50%; width: 480px; margin-top:-25px; } /*adjust margin-top to move icons up*/
    .icons_social { margin-left:200px; } /*adjust margin-left to move icons as far right as you wish*/

    Don't think you will need any 'clear:left' or equivalent.

    Posted 1 year ago #

  3. cookieandkate
    Member

    Thank you so much for your response! I'm sorry to be dense, but where would I insert the php code? In header.php, functions.php or elsewhere? I'm afraid to put it in the wrong spot.

    Thank you!

    Posted 1 year ago #

  4. ScottNix
    Member

    The php would go in the functions.php file of your child theme.

    Posted 1 year ago #

  5. cookieandkate
    Member

    I'm sorry to be a bother. I just looked at my functions.php and remember that I swapped the thematic menu for the wordpress menu. I'm guessing I need to edit the code provided by sowingseeds, right? Any suggestions?

    Here's what I have in my functions.php for the menu:

    // change Thematic #access menu for a Wordpress 3.0 menu
    function child_access_menu() {
    $menu_sys = 'wp_nav_menu';
    return $menu_sys;
    }
    add_filter('thematic_menu_type', 'child_access_menu');

    // Remove the standard Thematic menu
    function remove_menu() {
    remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_menu');

    // Moving the thematic menu above the header
    add_action('thematic_aboveheader','thematic_access');

    Posted 1 year ago #

  6. helgatheviking
    Moderator

    i don't think this:

    function child_access_menu() {
$menu_sys = 'wp_nav_menu';
return $menu_sys;
}
add_filter('thematic_menu_type', 'child_access_menu');

    is necessary any more. thematic 0.9.8 uses wp_nav_menu by default and then falls back to w page-based menu

    the only change you need to make to sowingseed's code is to change the location. (presuming it does what you want)

    sowingseed's code hooks into thematic_aboveheader and the code you've posted moves the menu to below the header

    add_action('thematic_belowheader','my_div_socmedia',10);

    i just added a priority number so that it comes after your thematic_access() in the html markup. did you at least try sowingseed's code? you would have seen that it places the images in a different place.

    i'd adjust the code such that you auto-generate your file's location. put the icons inside a folder called "images" in your child theme's directory

    function my_div_socmedia(){
echo '<div id="socmedia"><div class="icons_social"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/img1.gif" /><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/img2.gif" /></div></div>';
}
add_action('thematic_belowheader','my_div_socmedia');
    Posted 1 year ago #

  7. cookieandkate
    Member

    Hooray! It works!

    You're right, helgatheviking, the code you mentioned first is unnecessary. I didn't have to edit sowingseeds' code to move the icons above the header, though. All I did was change the image source code and add links. I also fiddled with the CSS until the icons showed up in the right spot.

    Here's the code I'm using, in case it's helpful to anyone:
    // Remove the standard Thematic menu
    function remove_menu() {
    remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_menu');

    // Moving the thematic menu above the header
    add_action('thematic_aboveheader','thematic_access');

    // add icons icons to menu above header
    function my_div_socmedia(){
    echo '<div id="socmedia"><div class="icons_social"><img width="18" height="18" alt="Follow me on twitter" src="http://cookieandkate.com/images/2011/08/twitter.png" />
    <img width="18" height="18" style="margin-left:2px;" alt="Subscribe via RSS" src="http://cookieandkate.com/images/2010/10/rss-small2.jpg">
    </div></div>';
    }
    add_action('thematic_aboveheader','my_div_socmedia');

    ONE little issue remains, though. When I hover my mouse over either of the icons, I don't see that I can click on the icon until my mouse is at the bottom edge of the icon. The icons are small, yes, but I should be able to click on them when I'm hovering directly over them. Any suggestions?

    Thanks again!

    Posted 1 year ago #

  8. helgatheviking
    Moderator

    it's a combo of positioning and the fact that #access has a high z-index. the more i think about it the more i think you might be better served by adding your links into the access function

    see this link:
    http://themeshaper.com/forums/topic/add-search-bar-to-thematic-using-override

    instead of the search form you'd just use the markup from your my_div_socmedia function

    Posted 1 year ago #

  9. sowingseeds
    Member

    Just a couple of comments. The link to topic on the search bar would be the way to go. Currently there is a link underline in between your two icons. There is a space between the coding for your two icons in functions. Put space between the two icons with:
    style="margin-right:10px;" after twitter.png.

    If you stay with what you have you could (I think) limit the width of #access to say 650px (if you have a width on #wrapper of 960px and center it with margin: 0 auto). That way you will not run up against the z-index issue that is covering the top part of your icons from being active as a links.

    Posted 1 year ago #

  10. sowingseeds
    Member

    Addendum: cleanest way is the replacing of the search bar in access through the link given by helgatheviking.

    Take Gene's code - 3rd post down.
    You can remove the initial <?php section through to the ?>;
    start at <div id="access">;
    then replace from <div id="access-search"> with your code,
    leaving the final </div><!-- #access -->
    <?php }

    Also you will now need to remove any negative top margin in your css on .icons-social.
    On your code it does not now need to be echoed... make sure no space (line break?) between the image and add a margin right to the first image.

    Posted 1 year ago #

  11. helgatheviking
    Moderator

    i don't think you can limit the width of access.... b/c then you won't get the menu centered the way you expect. best to put the social icons inside #access

    Posted 1 year ago #

  12. allenjcochran
    Member

    This tutorial was ultimately really helpful. I positioned my social media icons exactly how I wanted them using this function:

    function my_div_socmedia(){
    echo '<div id="socmedia"><div class="icons_social">
    <img src="http://allenjcochran.com/wp-content/uploads/2011/08/facebook-logo.png" />
    <img src="http://allenjcochran.com/wp-content/uploads/2011/08/twitter.png" />
    <img src="http://allenjcochran.com/wp-content/uploads/2011/08/linkedin-logo.png" />
    <img src="http://allenjcochran.com/wp-content/uploads/2011/08/mail.png" />
    </div>
    </div>';
    }
    add_action('thematic_header','my_div_socmedia');

    AND, this CSS:

    #socmedia {
    margin: 0 auto;
    width: 940px;
    margin-top: -35px;
    z-index: 100;
    }
    .icons_social {
    /*padding-left: 30%;*/
    text-align: right;
    }
    .icons_social img {
    width: 20px;
    height: 20px;
    padding: 5px;
    }

    BUT, i cannot get my links to work

    Any chance someone could tell me how to fix that? Is it all because of the z-index of #access?

    Posted 1 year ago #

  13. allenjcochran
    Member

    Oh my site is: www.allenjcochran.com

    Posted 1 year ago #

  14. mrmikeman
    Member

    using the above code and css, my social buttons have a tiny portion of it that is clickable.. can anyone provide a more efficiant way to putting social icons in the nav menu>

    Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.