Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] eplacement for page menu buttons & removal of text


  #1  
Old Jul 15, 2010, 02:08 PM
interage
 
98 posts · Apr 2009
Hey all...

So I've got a menu here:

http://www.green-tech.org/site/

I've managed to get graphic backgrounds for each button. However, I can't get the "trigger" area to extend to the actual size of the graphics - and I'd like to lose the text on the buttons as well. Hover state would be nice too...

UPDATED: Please see the last post in this thread.... I've made progress, but still need a hand.

Here's what I have:

div#menu1 ul.rMenu li.page-item-5 {
background: url(http://green-tech.org/site/02.jpg) no-repeat left top;
padding: 0 0 0 0;
height:116px;
width:212px;
}

Help?

Thanks!

M.

Last edited by interage; Jul 16, 2010 at 12:52 PM.
  #2  
Old Jul 16, 2010, 09:04 AM
interage
 
98 posts · Apr 2009
If it helps at all, I want the menuing to work JUST like this:

http://thehomeinspectioncompany.org/home.html

M.
  #3  
Old Jul 16, 2010, 09:31 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I would add a four cell widget area and put the graphics with links to the pages you want.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #4  
Old Jul 16, 2010, 09:37 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I just saw that you want dropdowns so what I said is not valid.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Jul 16, 2010, 09:38 AM
interage
 
98 posts · Apr 2009
Hey Larry!

Well thanks for the reply just the same.

Have a great one!

M.
  #6  
Old Jul 16, 2010, 11:05 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I was curious so started experimenting and this might help you with where you want to go. The following increased the "target area" the rMenu-ver a was necessary to keep the sub menus from being as wide. I would need to experiment more to figure how to get the hover images to work but wanted to post this.
HTML Code:
.page-item-5 a {height:100px;} 
.rMenu-ver a  {height:20px !important;}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Jul 16, 2010, 11:07 AM
interage
 
98 posts · Apr 2009
Thanks!!! I'm getting close too.



M.
  #8  
Old Jul 16, 2010, 12:03 PM
interage
 
98 posts · Apr 2009
OK - so here's where I am...

(and please - I've looked and looked before asking - I'm just missing something.)

The menuing is VERY close - except for the behavior of the child menus - they are inheriting the background of the top level menus, and their alignment is very very messed up.

Here are my CSS aditions - along with some that were already there - but have been adjusted. ANY help would be GREATLY appreciated.

/* Menu Bars */

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 0px 0px;
}
/* different padding for parents with arrow image */
div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 80px 22px 8px 10px !important;
}
/* less padding for children with arrow image */
div#menu1 ul.rMenu li.rMenu-expand li a, div#menu2 ul.rMenu li.rMenu-expand li a {
padding: 5px 22px 5px 10px !important;
}

div#menu2 {
background: #666666;
}
div#menu1 {
background: #eee;
}


/* XX comments to .... */
h3#comments {
margin: 10px 0;
padding: 10px;
font-weight: normal;
background: #f5f5f5;
}

ul.commentlist {
border-top: 0;
margin: 0;
line-height: 1.4;
font-size: 12px;
}
ul.commentlist li.thread-odd, ul.commentlist li.thread-even {
margin: 5px 0;
padding: 10px;
border-bottom: solid 5px #fafafa;
background: #fff;
}
span.authorname, span.authorname a {
font-weight: normal;
font-size: 17px !important;
}
div.commentmetadata a {
color: #999;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

/* set menu transparency */

div#menu1 {
border: 0;
background-color: none !important;
background-color: transparent !important;
padding: 0 0 0 0;
}

/* Individual Menu Items */

/* Home page - has no subs, and works PERFECTLY */

div#menu1 ul.rMenu li.page-item-3 {
height: 116px;
width: 212px;
background: url(http://green-tech.org/site/01.jpg) no-repeat left top;
}

div#menu1 ul.rMenu li.page-item-3 a:hover {
background: url(http://green-tech.org/site/01.jpg) no-repeat left top;
}

/* About page - has subs, which are misaligned and background-messed */

div#menu1 ul.rMenu .page-item-5 {
background: url(http://green-tech.org/site/02.jpg) no-repeat left top;
height: 116px;
width: 212px;
}

div#menu1 ul.rMenu .page-item-5 a:hover {
background: url(http://green-tech.org/site/02.jpg) no-repeat left top;
height: 116px;
padding: 0px 0 0 0;
}


/* Services page - has subs, which are misaligned and background-messed */

div#menu1 ul.rMenu li.page-item-7 {
background: url(http://green-tech.org/site/03.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
width: 212px;
}
div#menu1 ul.rMenu li.page-item-7 a:hover {
background: url(http://green-tech.org/site/03.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
}

/* Contact page - has no subs, and works PERFECTLY */

div#menu1 ul.rMenu li.page-item-9 {
background: url(http://green-tech.org/site/04.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
width: 212px;
}

div#menu1 ul.rMenu li.page-item-9 a:hover {
background: url(http://green-tech.org/site/04.jpg) no-repeat left top;
}

/* add formatting to submenu items */

div#menu1 ul.rMenu li ul.rMenu-ver li a {
font-size: 10px;
text-align: left;
}


/* Set menu padding so text shows at bottom of buttons - for menu items with no subs */

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active
{
padding: 80px 20px 0px 0px;
}
  #9  
Old Jul 16, 2010, 02:57 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
My brain is hurting
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Jul 16, 2010, 04:35 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
This is the nature of CSS

when you create a selector/rule, it applies to all the elements that match it. Take this example (copy the code and save it as color.html and open it in your browser. Then you can make changes, save it, refresh the page and see the effect
HTML Code:
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
</style>
</head>
<body>
<div>
	<ul>
		<li class="color_1">item 1</li>
		<li class="color_2">item 2</li>
		<li class="color_1">item 3</li>
			<ul class="child">
				<li class="color_1">item 3-1</li>
				<li class="color_2">item 3-2</li>
				<li class="color_1">item 3-3</li>
			</ul>
		<li class="color_1">item 4</li>
			<ul class="child">
				<li class="color_2">item 4-1</li>
				<li class="color_1">item 4-2</li>
			</ul>
		<li class="color_1">item 5</li>
	</ul>
</div>
</body>
</html>
If you run this as is, all the text will vbe black, but then add (in the <style>...</style> the following
HTML Code:
li {color: red;}
but what if we want the sub items (3-1 thru 3-3 and 4-1 to 4-2) to be red and tht parent items to be blue? if you change the color to blue, everything goes to blue because they are all <li>'s. So what happens it you change the css to
HTML Code:
li {color: blue;}
ul li {color: red;}
everything stays red because all the <li>'s are decendents of <ul>'s. So how do you do it? You need to be more specific with the selectors (this is where class and id come in handy
if you change the css to
HTML Code:
li {color: blue;}
ul.child li {color: red;}
it now works because you set the child elements to a new set of rules


So what does this have to do with your issue? Well you have to set the child selectors for the menus to something different than the parents and this is the most complicated section of the CSS. There is more that 400 lines of CSS selectors and rules dealing whit the menu's.

Best way to do this is to view your page, view the source, copy it to a file and save it. Then you can add css in to see the effect. once you have it right, you can put the css into the CSS Inserts option of teh theme.

Hope this helps
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jul 17, 2010 at 05:43 AM.
  #11  
Old Jul 16, 2010, 04:42 PM
interage
 
98 posts · Apr 2009
Hey JD!

Thanks for the reply.

With your help, I'd like to cut to the chase just a little here, if that's OK.

So here's just one menu selection:

div#menu1 ul.rMenu li.page-item-7 {
background: url(http://green-tech.org/site/03.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
width: 212px;
}
div#menu1 ul.rMenu li.page-item-7 a:hover {
background: url(http://green-tech.org/site/03.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
}


Now I pulled the

div#menu1 ul.rMenu li.page-item-7

from looking around here.

Does that line address submenus as well as top-level ones? and, if so, how do I JUST address top-level ones?

Thanks again and again.

M.
  #12  
Old Jul 16, 2010, 10:52 PM
interage
 
98 posts · Apr 2009
I have Firebug - thanks!

As for the line that I pulled - that's where I'm having the problem - because that's the ONLY place I had put the background graphic - but it was showing up in all the child menu backgrounds as well.

I moved the menu below for the weekend - I'll band on it more on Monday.

Thanks to all for the hand.

M.
  #13  
Old Jul 17, 2010, 05:53 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
ok, to cut to the chase, you have to reset all the submenu settings. Here is an example for your site that changes some of them
HTML Code:
iv#menu1 ul.rMenu li.page-item-7 ul.rMenu-ver li,
div#menu1 ul.rMenu li.page-item-7 ul.rMenu-ver li a:hover {
background: red;
height: 24px;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Jul 17, 2010, 06:04 AM
interage
 
98 posts · Apr 2009
Thanks SO much, JD...

I'll give it a try manana.

Have a great rest of the weekend!

M.
  #15  
Old Sep 18, 2010, 03:48 PM
DragNfLy
 
10 posts · Aug 2010
Hello

I would like to continue where this left off. I have been through the forum for days now.

Could someone please explain to me why the hover image does not display on my menu. The static menu image displays correctly for each page, but there is a black block displaying on all the other roll-over menu images. My current site is in under construction mode > so you will not be able to view the site.

I am by no means a CSS coder and am learning from copy paste.

Could someone please have a look. My CSS insert page has this in it:

******************

div#menu1
{
background: transparent;
border: 0px;
}

ul.rMenu-hor { padding-left: 415px !important; }

/* Margin between Menu Blocks */

ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-right: 0px !important; }

ul.rMenu li a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Home */

ul.rMenu li.page-item-8 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Events */
ul.rMenu li.page-item-11 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Gallery */
ul.rMenu li.page-item-14 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Contact */
ul.rMenu li.page-item-17 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* News */
ul.rMenu li.page-item-20 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Page Backgrounds */

body.page-id-8 div#container {
background :url(/wp-content/themes/atahualpa353/images/home.jpg);
}

body.page-id-11 div#container {
background-image:url(/wp-content/themes/atahualpa353/images/events.jpg);
}

body.page-id-14 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/gallery.jpg);
}

body.page-id-17 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/contact.jpg);
}

body.page-id-20 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/news.jpg);
}
  #16  
Old Sep 18, 2010, 04:00 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Put a slash before each of your background path statements. For instance
HTML Code:
background: url(wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
Should be
HTML Code:
background: url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #17  
Old Sep 18, 2010, 04:13 PM
DragNfLy
 
10 posts · Aug 2010
Hi

Thanks for the reply.

I have done this and there is still no change. I have taken the site out of Maintenance for you to have a look. The URL is... more payment gateways please

Last edited by DragNfLy; Sep 19, 2010 at 02:18 PM.
  #18  
Old Sep 18, 2010, 05:39 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
The selectors I am seeing are

#menu-item-10 for Home
#menu-item-13 for Event
#menu-item-16 for Gallery
#menu-item-19 for Contact Us
#menu-item-22 for News

Are these the items you want to have hovers on? And you do need the slashes their.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #19  
Old Sep 19, 2010, 01:25 AM
DragNfLy
 
10 posts · Aug 2010
Yes, that is correct. I need to replace the black hover box with images on the menu items you mentioned. Where to from here?
  #20  
Old Sep 19, 2010, 07:47 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You would have to use something like the following

HTML Code:
#menu-item-13 a:hover {
background:url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
display:marker;
}
#menu-item-16 a:hover {
background:url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
}
And so on. Then add #menu-item-13 a:active etc. as needed.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #21  
Old Sep 19, 2010, 02:17 PM
DragNfLy
 
10 posts · Aug 2010
You Are SUPERSTAR > As soon I can figure out how to become a GOLD member > I WILL.

My currency is stupendous ... and PayPal just does not work unless I have a monthly subscription to a certain Bank for $1 a month. (currently 6.5 of my currency)

Perhaps something you will take into consideration > different payment methods for GOLD memberships. It is tough out here.

Thank you Once again.

Yours
DragNfLy

PS. > Atahualpa is SUPER DUPER!!!
  #22  
Old Sep 23, 2010, 06:35 AM
DragNfLy
 
10 posts · Aug 2010
Ahhh man...

Now IE has messed it all up. Menu (%pages) Bar works fine in all other browsers, except for IE.

Thanks for your help Miles. I'd appreciate a little more. I am experimenting with the following threads to see if I can find a solution.
My PayPal has been loaded with some cash, but will only clear on the 29 September. please help in advance.

These are the threads:

http://forum.bytesforall.com/showthr...ernet+explorer
and
http://forum.bytesforall.com/showthr...orer+menu+text

My URL again: http://www.decodance.co.za and the contents of my CSS HTML inserts page is:

********************

div#menu1
{
background: transparent;
border: 0px;
}

ul.rMenu-hor { padding-left: 415px !important; }

/* Margin between Menu Blocks */

ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-right: 0px !important; }

ul.rMenu li a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* New TESTS */


/* Home */

ul.rMenu li.page-item-8 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Events */
ul.rMenu li.page-item-11 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Gallery */
ul.rMenu li.page-item-14 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Contact */
ul.rMenu li.page-item-17 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* News */
ul.rMenu li.page-item-20 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

#menu-item-10 a:hover {
background:url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
display:marker;
}

#menu-item-13 a:hover {
background:url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
display:marker;
}
#menu-item-16 a:hover {
background:url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
}

#menu-item-19 a:hover {
background:url(/wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
display:marker;
}
#menu-item-22 a:hover {
background:url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
}

/* Page Backgrounds */

body.page-id-8 div#container {
background :url(/wp-content/themes/atahualpa353/images/home.jpg);
}

body.page-id-11 div#container {
background-image:url(/wp-content/themes/atahualpa353/images/events.jpg);
}

body.page-id-14 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/gallery.jpg);
}

body.page-id-17 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/contact.jpg);
font-weight: bold !important;
font-size: 10pt !important;
color: #000000 !important;
}

body.page-id-20 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/news.jpg);
}

********************

Any IE help appreciated.

Thanks
  #23  
Old Sep 23, 2010, 09:16 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Something just occurred to me. Instead of trying to get some graphics to line up with the menu bar why not just make graphics with links to the pages you need. I'm thinking you could slice your DECODANCE into 6 parts DECO, D, A, N, C, E. Then create hover images for the last five. Now put a 6 cell widget area in place of %pages and populate the widget areas with a text widget with the necessary code.

Does that make any sense to you?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #24  
Old Sep 26, 2010, 01:35 PM
DragNfLy
 
10 posts · Aug 2010
Hi Miles

Yes, absolutely. I did it like that on my first attempt with html coding. I really wanted to learn how to do this in CSS though. I have another day or 2 before the site goes live officially. If I have not figured this out by then > I will revert to the old style of doing this.

I will however keep trying on a test site, or perhaps get more answers as a Gold member, but will have to wait till the 29th for my PayPal monies to clear.

Regards
DragNfLy
  #25  
Old Sep 30, 2010, 10:44 PM
rohaver's Avatar
rohaver
 
13 posts · Oct 2009
Western MA USA
Send a message via AIM to rohaver Send a message via Skype™ to rohaver
this is the closest answer I could find. I have a strange issue. All was working as it should, then we upgraded and the page (top) menu messed up. http://morrisonshomeimprovement.com/ look at the sub-menus on the top menu bar. The menu doesn't expand as it should. I have set the sub-menu width to 25 and it does not change any more. here is the html/css insert.

div#menu2 {
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg) !important;
}
ul#rmenu2 {
background: url(/wp-content/themes/atahualpa/images/navbar.jpg) !important;
padding:2px 5px;
}

ul.rmenu2 li
{
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg);
}

div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg) !important;
padding:5px 25px;
}

div#menu1 li.current_page_item a:hover {
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg) !important;
}

ul.rMenu li
{
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg);
}

Last edited by rohaver; Sep 30, 2010 at 10:49 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Overlaying & Positioning the ATA Search Bar over a replacement header YOU created? rhythm Header configuration & styling 8 Mar 9, 2010 12:12 PM
IE ruins aligned images in header & center column, & doesn't size nav menu buttons viewdesigninc Header configuration & styling 0 Dec 11, 2009 02:07 PM
[SOLVED] How to replace newer RSS &amp; Comments buttons with colored version buttons? ireneeng RSS, Feeds & Subscribing 5 Nov 12, 2009 08:56 PM
How to replace newer RSS & Comments buttons with colored version buttons? jenb RSS, Feeds & Subscribing 3 Oct 25, 2009 06:14 AM
Page Menu Buttons DATAPOPP Forum How-To 1 Aug 27, 2009 12:38 PM


All times are GMT -6. The time now is 01:06 PM.


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