ThemeShaper Forums » Thematic

[closed]

Different Menu Images

(16 posts)
  • Started 4 years ago by knowlsy
  • Latest reply from orenlebbo
  • This topic is not resolved
  1. knowlsy
    Member

    I'm fairly new to css but am managing to find out how to tweak the things i want to tweak while messing around with a few child themes. I am however stuck on my menu...

    I want different coloured buttons for different pages (which will subsequently be the colour of the menu tab, but i think i can work that bit out). My menu is going to be pretty static, so it doesn't have to be something that updates itself when new pages appear.

    I think I'll have to use some images as I want to curve my buttons at the top (and for some reason can't get curvy corners working to display them in ie).

    If anyone could give me some pointers I'd appreaciate it! I've read lots of bits and bobs out there but can't my head around it like I'm managing with other issues.

    Thanks!

    Chris

    Posted 4 years ago #
  2. this post comments and colorizes the menu (you prolly have to delete the #category designations) in an obvious way to help you figure out what does what

    http://forums.themeshaper.com/topic/solving-the-superfish-nightmare

    and this is the great post on how to do cool things w/ the menu. if you know your menu will be static the last section may be appropriate for you.

    http://themeshaper.com/wordpress-menu-tricks/

    Posted 4 years ago #
  3. knowlsy
    Member

    Thanks!

    I've had a look and it's helped me get my head round it a bit, but i'm still unsure how best to add images for the tab/button, and different images for each tab/button. I've searched through the forum but can't find anyone in the same situation...

    Posted 4 years ago #
  4. well what have you tried? post some code. also check out this post. this person did exactly what it sounds like you want to do:

    http://forums.themeshaper.com/topic/im-beginning-to-hate-menus

    if you hard code your menu you can easily add spans around the links

    <li id="num1"><a href="#"><span class="blue">Blue Link</span></a></li>

    and the css

    #num1 a span.blue{
    background: blue;
    }

    but you may not need the spans, unless you are doing some advanced menu stuff. you can just do

    #num1 a {
    background: blue;
    }
    Posted 4 years ago #
  5. knowlsy
    Member

    thanks for your help, i've lifted the code from the person who was begining to hate menus. at first i thought i had it, but not.

    I was just working on it on a wamp server, but have uploaded it all to show you what's going on http://www.salesianyouthministry.com/

    there are repeats of buttons in firefox, and internet explorer doesn't show them unless you have hovered over them all remain over the menu, but does not repeat them.

    i also keep getting a message about line 72 in functions.php, that is the begining of the code that i lifted.

    this is the only code i added which should have anything to do with the menu

    #access {
    overflow:visible;
    z-index:100;
    height:35px;
    margin-top: 10px;
    }
    
    .menu{
    margin: 0 0 0 50px;
    float: left;
    }
    
    .menu li{
    display: inline;
    }
    
    .menu li a{
    float: left;
    height: 40px;
    text-indent: -99999px;
    padding-right: 0px;
    }
    
    .menu li a:visited{
    }
    
    .menu li a:hover, .menu li .current{
    }
    
    .menu li.tab-home a {
    background-image: url(Images/tabblue2.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 132px;
    }
    
    .menu li.tab-home a:hover {
    background-image: url(Images/taborange.gif);
    }
    
    .menu li.tab-1 a{
    background-image: url(Images/tabgreen.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 132px;
    }
    
    .menu li.tab-1 a:hover {
    background-image: url(Images/tabblue.gif);
    }
    
    .menu li.tab-2 a {
    background-image: url(Images/tabyellow.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 132px;
    }
    
    .menu li.tab-2 a:hover {
    background-image: url(Images/tabmint.gif);
    }
    
    .menu li.tab-3 a {
    background-image: url(Images/tabyellow.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 132px;
    }
    
    .menu li.tab-3 a:hover {
    background-image: url(Images/tabblue2.gif);
    }
    Posted 4 years ago #
  6. I'm so glad my codes are able to help someone else ;)!!! Knowlsy, I had a hell of a time with my menu at first, so I know how your feeling!!!

    I'm not sure I will be able to help much....

    Add the height to the ".menu li.tab-# a {}", you shouldnt have to add the height to the hover's, least I did not have too.

    Your functions.php, can you post it also? Sometimes it is easy to overlook something that is or is not needed in this file.

    As for the <span> stuff, it is all still a little new to me. Helga (the other commentor) is awesome when it comes to helping someone on here, she knows her stuff! So don't hesitate to take her advice.

    Let us know how things turn out.

    Posted 4 years ago #
  7. @rscamero- idk about awesome, but i appreciate the compliment! did you ever post the full code for your menu? i am sure it would be a valuable resource here.

    @knowlsy- i also don't know what the heck is going on in your menu. but i WOULD suggest that you change

    <ul class="menu">

    to

    <ul class="sf-menu">

    b/c then you will pick up the thematic default menu styling. obviously you dont want it to look like thematic, but you should at least take advantage of the fact that thematic's layout already works flawlessly w/o the need for the banging of heads into keyboards. it is generally easier to deviate from something that IS working than to try to do everything from scratch. from there you will still be able to apply your above css backgrounds (changing .menu for .sf-menu of course.

    edit to add:

    in looking at your source code you appear to be calling 2 links per list element

    <li class="tab tab-1">
      <a href="http://www.salesianyouthministry.com/"> </a>
      <a href="http://www.salesianyouthministry.com/?page_id=13">Schools</a>
    </li>

    that first empty link gets a tab-shaped background. also- you are using the negative text-indent technique to get rid of the text... are your images going to have text in them at some point?
    `

    Posted 4 years ago #
  8. Here is my menu code(s)

    The CSS....

    .menu {
    margin: 0;
    }

    .menu li {
    display: inline;
    }

    .menu li a {
    text-indent: -99999px;
    float: left;
    margin-top: 15px;
    }

    .menu li.tab-home a {
    width: 91px;
    height: 24px;
    background: url(images/menu_02.png) no-repeat scroll 0 0;
    }

    .menu li.tab-home a:hover {
    background: url(images/menu_02.png) no-repeat scroll 0 -25px;
    }

    .menu li.tab-1 a {
    height: 24px;
    background: url(images/menu_03.png) no-repeat scroll 0 0;
    width: 105px;
    }

    .menu li.tab-1 a:hover {
    background: url(images/menu_03.png) no-repeat scroll 0 -25px;
    }

    .menu li.tab-2 a {
    width: 136px;
    height: 24px;
    background: url(images/menu_04.png) no-repeat scroll 0 0;
    }

    .menu li.tab-2 a:hover {
    background: url(images/menu_04.png) no-repeat scroll 0 -25px;
    }

    .menu li.tab-3 a {
    background: url(images/menu_05.png) no-repeat scroll 0 0;
    height: 24px;
    width: 150px;
    }

    .menu li.tab-3 a:hover {
    background: url(images/menu_05.png) no-repeat scroll 0 -25px;
    }

    .menu li.tab-4 a {
    background: url(images/menu_06.png) no-repeat scroll 0 0;
    height: 24px;
    width: 125px;
    }

    .menu li.tab-4 a:hover {
    background: url(images/menu_06.png) no-repeat scroll 0 -25px;
    }

    .menu li.tab-5 a {
    background: url(images/menu_07.png) no-repeat scroll 0 0;
    height: 24px;
    width: 155px;
    }

    .menu li.tab-5 a:hover {
    background: url(images/menu_07.png) no-repeat scroll 0 -25px;
    }

    .menu li.tab-6 a {
    background: url(images/menu_08.png) no-repeat scroll 0 0;
    width: 155px;
    height: 24px;
    }

    .menu li.tab-6 a:hover {
    background: url(images/menu_08.png) no-repeat scroll 0 -25px;
    }

    Code in my functions.php.....

    <?php
    //
    // My custom menu
    //
    function custom_childtheme_access(){?>
    <div id="access">
    <div class="skip-link">(a href="#content" title="<?php _e('Skip navigation to the content','thematic');?>"><?php _e('Skip to content','thematic');?></div>
    <div class="menu">
    <ul class="menu">
    <li class="tab tab-home">(a href="http://jamiescreativecorner.com/">Home
    <li class="tab tab-1">(a href="http://jamiescreativecorner.com/about">About
    <li class="tab tab-2">(a href="http://jamiescreativecorner.com/contact">Contact
    <li class="tab tab-3">(a href="http://jamiescreativecorner.com/projects">Projects
    <li class="tab tab-4">(a href="http://jamiescreativecorner.com/inspire">Inspire
    <li class="tab tab-5">(a href="http://jamiescreativecorner.com/featured">Featured
    <li class="tab tab-6">(a href="http://jamiescreativecorner.com/advertise">Advertise

    </div><!-- #menu -->
    </div><!-- #access -->

    If anyone copies and paste..... remember to change the '(a href' to '<a href'.

    Posted 4 years ago #
  9. knowlsy
    Member

    Thanks for all your help!!

    adding sf-menu instead of menu seems to have stabalised things, at least in firefox.

    Helga, do you know where the other link is coming from? one link is given by me in my functions.php (i think it's the first link that is mine). In what other file are these things contained, and can i modify it, or overide something to stop it functioning?

    sadly some plonker gave out the url, so i've had to redirect it to a different site, does anyone know of someewhere i can upload thematic, and my childtheme onto wordpress so that i can show you it online? im working on my wamp server at the moment, but clearly that's not much good if you're trying to help me...

    oh, also about text on the menu items, that will be there, i just threw together some tabs to get the idea, later i'll be putting text on individual ones.

    thanks again!

    Posted 4 years ago #
  10. You can make a sud-directory for your site and install another wordpress there then use it as a test site. Depending on your host and how much disk space you have monthly, after creating the test site, designing it to you liking, transfer all your coding to your main site, I would uninstall the sub-directory so that you don't loose that disk space.

    OR

    (which this is what I recommend for a "live" test site)

    You can sign up with one of the many FREE hosting sites and run a test blog that way if you don't want to mess with anything within your main hosting site.

    As for the link you asked about, I took a look at your site (well the link you had posted a few post up) and I'm confused as to which link your talking about, or I would try to help ya with it.

    Posted 4 years ago #
  11. knowlsy
    Member

    Thanks rscamero, I'm trying to sort out wordpress on one of these free ones, but it's a pain in the bum because i'm sat on a free wifi and it won't allow ftp traffic! I'll try and find some proper internet and sort it so you can help!!

    The link thing is a little odd. the problem i'm trying to fix at the moment is that my menu buttons are repeating. The first button which links to home, coming after <li class="tab tab-home"> in the functions.php file only has one button, and when you inspect item in firebug, in the html on the left it shows up only one link to the homepage. the rest of the tabs show up two links, one of which comes from me in the functions.php file, the other does not. I'm trying to work out where the other one comes from, as that may be the same place that is doubling up my tabs! I've searched through all the files in the themes folder and can't find the links it is showing, so have no clue why it is there... i am awfully confused!!

    Posted 4 years ago #
  12. First, are we looking at the same website?

    Here is the site I'm looking at....
    http://www.salesians.org.uk/dbuk/

    Looking at that site with firebug, I don't even see your custom (tab tab-home, tab tab-1 etc etc) Here is what I'm seeing....

    <div id="nav">

    • (a href="index.html">Home
    • (a title="See where they are, what they do and who's there" href="communities.html">Communities
    • (a title="What's been happening in our province and further afield" href="news.html">News
    • (a title="A brief overview of from 1887 to the present day" href="history.html">History
    • (a title="Meet St John Bosco, St Dominic Savio and others" href="saints.html">Saints
    • (a title="Maybe you are thinking of serving young people as a Salesian priest or brother?" href="vocations.html">Vocations
    • (a title="You can work with us for a few months or longer!" href="volunteers.html">Volunteers
    • (a title="Other Salesian sites around the world" href="links.html">Links

    </div>

    Or am I going to the wrong site?

    Posted 4 years ago #
  13. Ooops..... THIS is (edited so it doesn't link from here) what I'm seeing

    <div id="nav")
    <ul)
    <li)(a href="index.html">Home
    <li)(a title="See where they are, what they do and who's there" href="communities.html">Communities
    <li)(a title="What's been happening in our province and further afield" href="news.html">News
    <li)(a title="A brief overview of from 1887 to the present day" href="history.html">History
    <li)(a title="Meet St John Bosco, St Dominic Savio and others" href="saints.html">Saints
    <li)(a title="Maybe you are thinking of serving young people as a Salesian priest or brother?" href="vocations.html">Vocations
    <li)(a title="You can work with us for a few months or longer!" href="volunteers.html">Volunteers
    <li)(a title="Other Salesian sites around the world" href="links.html">Links
    </ul)
    </div)

    Or am I going to the wrong site?

    Posted 4 years ago #
  14. knowlsy
    Member

    yeh, sorry, this is the site i have had to re-direct to because somebody gave out the link!! so ignore all of this!!

    i'm still on the connection that doesn't allow ftp traffic, so i can't sort out either a subsiduary on the website, or a free host one like you sugested.

    I've been trying different things to fix it all day and am not getting very far.

    does anybody know of a different way? is there a way to simply add individual images to the menu that already exists in thematic? I know how i can just add an image to them all, but i don't know how to add them to individual tabs (to get the different coloured, curved top tabs i'm looking for)

    thanks again!

    Posted 4 years ago #
  15. Hi rscamero92.
    thank you so much for the css code.
    i'm using Thesis theme and it works great with it. it was exactly what i was looking for... :)
    i do have a question:
    is there a way to add another menu with the same default behaviour (tabs, images...) and edit it in the same way as the first one ?
    thanks again :)
    Oren

    Posted 3 years ago #
  16. i have another problem.
    please check my nav menu below header: http://www.xn--4dbcyzi5a.com/
    it look great in Chrome and FF but it messed up in explorer

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.