Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] Drop-down menu underlaps featured images in the post & a possible solution.


  #1  
Old Aug 30, 2014, 08:51 AM
stocktrader
 
12 posts · Mar 2014
Hello,

I had the problem that the menu was overlapping the featured image in the post.
I tried to follow many suggestion I found in this forum about modifying the CSS of the menu but without success.
I think I found the solution myself:
Look in the posts.css for .post-thumb img.img_grayscale and add to it the z-index property.

Code:
.post-thumb img.img_grayscale { 
	filter: 					grayscale(100%); /* Current draft standard */
	-ms-filter: 			grayscale(100%); 
	-o-filter: 				grayscale(100%); /* opera */ 
	filter: 					url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */
	filter: 					gray; /* IE */
	-webkit-filter: 		grayscale(1); /* Old WebKit */
	-webkit-filter: 		grayscale(100%); /* New WebKit */
  	z-index:                0 !important; /*Added by me*/
}
It works for me. To be on the safe side I used the !important clause...I'll try to remove it and find out if it is the same.
So far I have not experienced any side effect.

Kind regards,

StockTrader / Marco
  #2  
Old Aug 30, 2014, 09:24 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
be careful with the z-index. If the menu has a lower z-index than the featured image, you won't be able to click on the menu item....
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Aug 31, 2014, 03:15 AM
stocktrader
 
12 posts · Mar 2014
Hello,

so far so good...I'm able to click on the menu but I noticed that only in Firefox I do not see the greyed featured image at all.
This is not happening in Chrome & Safari ( i need to try IE) where all seems to work fine.
It was a while that I was not using Firefox so I need to investigate if the issue is really caused by the z-index or other problems...
Do you have a better solution to propose ?
Kind regards & thanks.
Marco - StockTrader
  #4  
Old Aug 31, 2014, 03:49 AM
stocktrader
 
12 posts · Mar 2014
I reply to myself :-)
It seems that the problem I found about the grayscale featured image behaving incorrectly (they does not appear) in Firefox is not related to the z-index modification I did but it is related to this thread: http://forum.bytesforall.com/showthr...ht=gray-filter
Do you know if there are other solution for that issue? The thread is not closed.
Kind regards,
Marco - StockTrader
  #5  
Old Aug 31, 2014, 04:56 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What version of montezuma?
What is the url?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Sep 1, 2014, 07:39 AM
stocktrader
 
12 posts · Mar 2014
Hello,

the Montezuma version is the 1.2.3.
The url of the site is http://www.readitalians.org
To temporarily patch the issue and make the site still ''enjoyable'' from Firefox 31.0 (Mac version) I amended the posts.css in this way:

Code:
...
.post-thumb img.img_grayscale { 
	filter: 					grayscale(100%); /* Current draft standard */
	-ms-filter: 			grayscale(100%); 
	-o-filter: 				grayscale(100%); /* opera */ 
	/*filter: 					url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */ /*MSZ*/
	filter: 					gray; /* IE */
	-webkit-filter: 		grayscale(1); /* Old WebKit */
	-webkit-filter: 		grayscale(100%); /* New WebKit */
  	z-index:                0 !important; /*MSZ*/
}
...
If I remove the comment ( I can do it if you want to have a look to the issue) from the line that includes the svg file only on Firefox (I use 31.0 for now) I do not see anymore the featured image until I hoover on them.
Everything is ok on the other browsers.
In the thread http://forum.bytesforall.com/showthread.php?t=18948 I can see that the user troyp was able to find a solution modifying the svg file but then said that Firefox broke the filter again..


Kind regards & thanks,
Marco - StockTrader
  #7  
Old Sep 1, 2014, 12:07 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Ahhh now I see what you are talking about. When you said
Quote:
I had the problem that the menu was overlapping the featured image in the post.
I did not understand - what you meant was the dropdown list extended past the top of the featured BUT the featured image sat on top of the menu at that point.

In other words, the menu was hidden behind the feeatured image.

I just applied the code from your first post and it works fine for me on a mac in FireFox 31.0

try shutting off any plugins you have to see if there is a conflict.
__________________
"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; Jan 9, 2015 at 06:21 PM.
  #8  
Old Sep 1, 2014, 02:46 PM
stocktrader
 
12 posts · Mar 2014
Hello,

I fiddled a bit around and was not working for me..so looking on some forums I finally found a fix for the filter.
I amended it in this way and now it works for me as well:

Code:
.post-thumb img.img_grayscale { 
    filter: grayscale(100%); /* Current draft standard */
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* opera */ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    z-index: 0 !important; /*MSZ*/
}
Kind regards & thanks!
Marco MSZ - StockTrader

Last edited by lmilesw; Sep 1, 2014 at 09:43 PM.
  #9  
Old Jan 9, 2015, 05:18 PM
BywayWriter
 
27 posts · Mar 2013
I was having the same issue and this solved it. Thank you.

Bookmarks

Tags
menu, overlaping, overlapping menu



Similar Threads
Thread Thread Starter Forum Replies Last Post
How do I get my featured images to span the whole of the page post on excerpts? Mooniemad Montezuma Theme 3 Apr 28, 2013 01:48 PM
[SOLVED] Control size of featured images on home or multi-post pages sarahtriv Header configuration & styling 3 Oct 24, 2012 08:56 AM
[SOLVED] Removing arrow space from drop-down links - old solution not working mcphoto Page & Category Menu Bars 2 Aug 17, 2010 09:13 AM
How do I change the menu navigation and add 'featured' post to main page? sspeedy Page & Category Menu Bars 2 Aug 19, 2009 08:03 AM


All times are GMT -6. The time now is 12:31 AM.


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