Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   [SOLVED] Trying to add menu images, understanding Montezuma's menus (http://forum.bytesforall.com/showthread.php?t=19297)

coolpillows Jan 9, 2013 11:12 PM

[SOLVED] Trying to add menu images, understanding Montezuma's menus
 
Just poking around Montezuma and it's a big difference from Atahualpa. Looks great.

Trying to add the menu icons. I got the proper code from the instruction page under Using Menu Icons. CSS for Icons in "Menu 1." I commented out the default menu1 CSS (#menu1 .page-blog, etc.) and replaced with this:

/* Part 1- for default state: */
#menu1 .sample-page > a > i { background-position: 0px 0px; }
#menu1 .donate > a > i { background-position: 0px -240px; }
#menu1 .gallery > a > i { background-position: 0px -264px; }
#menu1 .news > a > i { background-position: 0px -2112px; }
/* Part 2 - for hover state: */
#menu1 .sample-page:hover > a > i, #menu1 .sample-page.active > a > i { background-position: -24px 0px; }
#menu1 .donate:hover > a > i, #menu1 .donate.active > a > i { background-position: -24px -240px; }
#menu1 .gallery:hover > a > i, #menu1 .gallery.active > a > i { background-position: -24px -264px; }
#menu1 .news:hover > a > i, #menu1 .news.active > a > i { background-position: -24px -2112px; }

Site is currently here: www.thecatsquad.com/test/

But the images are not being replaced. I'm thinking this has something to do with having to create a custom menu in the WP Dashboard. Do I have to create the custom menu first? Then I'm thinking, backing further into the solution, do I have to create new main templates to make use of this new custom menu?

Thanks in advance!

lee

juggledad Jan 10, 2013 05:31 AM

what is your permalinks set to?

coolpillows Jan 10, 2013 07:52 AM

default: http://thecatsquad.com/test/?p=123

juggledad Jan 10, 2013 08:01 AM

Try setting your permalink to post-name

coolpillows Jan 10, 2013 08:27 AM

1 Attachment(s)
ok...just changed that and saved...still no change in icons. screenshot attached

<not sure why that would have any effect...why?>

juggledad Jan 10, 2013 10:54 AM

The problem is that the CSS classes are not matching what is being generated when the page is built. when the page is built you get
HTML Code:

<nav id="menu1-wrapper" class="menu-wrapper col7">
        <ul id="menu1" class="cf menu">
                <li class="page-sample-page"><a href="http://thecatsquad.com/test/sample-page/">About</a></li>
                <li class="page-donate"><a href="http://thecatsquad.com/test/donate/">Donate</a></li>
                <li class="page-gallery"><a href="http://thecatsquad.com/test/gallery/">Gallery</a></li>
                <li class="page-news"><a href="http://thecatsquad.com/test/news/">News</a></li>
</ul></nav>

but your CSS is
HTML Code:

/* Part 1- for default state: */
#menu1 .sample-page > a > i { background-position: 0px 0px; }
#menu1 .donate > a > i { background-position: 0px -240px; }
#menu1 .gallery > a > i { background-position: 0px -264px; }
#menu1 .news > a > i { background-position: 0px -2112px; }
/* Part 2 - for hover state: */
#menu1 .sample-page:hover > a > i, #menu1 .sample-page.active > a > i { background-position: -24px 0px; }
#menu1 .donate:hover > a > i, #menu1 .donate.active > a > i { background-position: -24px -240px; }
#menu1 .gallery:hover > a > i, #menu1 .gallery.active > a > i { background-position: -24px -264px; }
#menu1 .news:hover > a > i, #menu1 .news.active > a > i { background-position: -24px -2112px; }

so the classes don't match so they need to be
HTML Code:

/* Part 1- for default state: */
#menu1 .page-sample-page > a > i { background-position: 0px 0px; }
#menu1 .page-donate > a > i { background-position: 0px -240px; }
#menu1 .page-gallery > a > i { background-position: 0px -264px; }
#menu1 .page-news > a > i { background-position: 0px -2112px; }
/* Part 2 - for hover state: */
#menu1 .page-sample-page:hover > a > i, #menu1 .page-sample-page.active > a > i { background-position: -24px 0px; }
#menu1 .page-donate:hover > a > i, #menu1 .page-donate.active > a > i { background-position: -24px -240px; }
#menu1 .page-gallery:hover > a > i, #menu1 .page-gallery.active > a > i { background-position: -24px -264px; }
#menu1 .page-news:hover > a > i, #menu1 .page-news.active > a > i { background-position: -24px -2112px; }

There is a bug and I've reported it to the developer.

coolpillows Jan 10, 2013 11:01 AM

thanks for your help, JD!

okay...so i'm not crazy at least. conceivably, i could change the classes to match, but that might break other stuff. or should i just wait for an update in the codebase?

juggledad Jan 10, 2013 11:38 AM

If you want to use it now, I would change the classes to match. I don't know when an update is coming.

coolpillows Jan 10, 2013 11:52 AM

ok cool. is Mtz really new? i haven't been tracking.

also, i have a question about removing the breadcrumb bar. seems superfluous...where would i do that?

juggledad Jan 10, 2013 12:27 PM

In the header.php virtual templete

coolpillows Jan 10, 2013 12:35 PM

cool thanks!


All times are GMT -6. The time now is 11:57 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.