-
AuthorPosts
-
November 5, 2015 at 9:57 pm #531204
Hi,
I would like your help for these two points please:
1) How can we hide the “arrow” icon that appears on images when mouse is over? I still want to keep the transparency effect when mouse is over but would like to hide the arrow icon from the whole website.
2) How to change the colour of the title / except area below each portfolio item?
Please find the sections I am referring to on this screenshot: http://dns.d.pr/1h5OM/2HW8EX7f
Thank you
November 6, 2015 at 12:32 am #531269Hi sitesme!
1.) Try this code in Quick CSS field:
.image-overlay.overlay-type-extern .image-overlay-inside:before { content: ''; }
2.) Use this code:
.grid-entry-title.entry-title { color: green; }
and adjust as needed.
Cheers!
AndyNovember 7, 2015 at 1:39 pm #531852Hi Andy,
Thank you for your help.
The 1st code is great but it still shows the circle where the arrow was. I assumed the arrow / circle was a single item but I was wrong.
So, how can I hide the circle and the arrow when mouse is over the image? The “image fade” effect shall remain as it is.As for code #2, the font color is changed but I would like to change the background only. Basically, the area mentioned here in the red box: http://dns.d.pr/1hzWq/31UcIDcQ
Many thanks.
November 9, 2015 at 11:04 am #532461Hey!
1. Try this code instead:
.image-overlay.overlay-type-extern .image-overlay-inside:before { display: none; }
2. It would be much easier for us if you send us a link, where we can inspect the elements in question. However, maybe this is what you need:
figcaption.av-inner-masonry-content.site-background { background-color: red; }
Best regards,
AndyNovember 9, 2015 at 12:03 pm #532495Dear Andy,
#1 code worked perfectly fine but I realised that there is also the “enlarge icon” when image expands. Sshot: http://dns.d.pr/1fKAE/4w8SY79f taken from this page: http://kriesi.at/themes/enfold/portfolio/portfolio-2-column/
In addition to the icon removal, how can we disable the image enlargement? From this page: http://kriesi.at/themes/enfold/portfolio/portfolio-ajax/
We want to display the image like this: http://dns.d.pr/1iDX4/43JDlRPz and we want to deactivate the lightbox link that will show the image like this: http://dns.d.pr/14d5E/14IlweJpAs for code #2, it didn’t work. From the same demo page from Enfold, this is the area we would like to change the color (mentioned in red): http://dns.d.pr/1c6xk/5Y7h6MKh
Thank you a lot for all help provided so far.
November 9, 2015 at 12:20 pm #532503Hi!
1. What do you mean with it works but it still shows the icon? the code is for not showing the icon anymore, so if it still shows it, then it does not work, right? so not sure what you mean. However, try this code:
span.image-overlay-inside:before { display: none; }
2. Try this code instead:
.grid-content { background-color: red !important; }
Best regards,
AndyNovember 9, 2015 at 12:50 pm #532518Hi Andy,
I meant the first code worked fine to remove this: http://dns.d.pr/15B7P/4UZkLVDv
And now, your second code worked as well to remove the ajax effect: http://dns.d.pr/1k49t/3REcPbmFA new question related to the ajax portfolio, how can I disable the images from showing on a lightbox? I tried to see the settings here but there is no way to remove the link to open the image: http://dns.d.pr/16e3B/6B1reiC0
You may see the image I am referring to here: http://dns.d.pr/RA1M/3UrKw7zlAs for the second issue with the colour in the grid background, it worked, but only partially: http://dns.d.pr/K048/5p7XPiJl
I would like to have all that area in red but it still shows white on the left / right sides of the text.Thank you
November 9, 2015 at 1:22 pm #532538Hi!
1. Add this code to remove lightbox:
a.grid-image.avia-hover-fx {pointer-events: none; }
2. Add this as well:
.grid-entry-title.entry-title { background-color: red; }
Please open a new ticket for a new question in the future.
Regards,
AndyNovember 9, 2015 at 7:15 pm #532843Hi Andy,
All my initial questions have been fixed now with the following codes, however, the lightbox removal is not right.
Using Enfold’s demo example: http://kriesi.at/themes/enfold/portfolio/portfolio-ajax/
I still want to open the image exactly like this: http://dns.d.pr/1bvjW/4YYLrrvl – but the lightbox (http://dns.d.pr/me4x/2dVzhXWU) should not open, ever. We have removed the “zoom into lightbox” icon from the images successfully, now it is just to remove the link from the image itself.Hope I was clear enough, please let me know.
Thank you
November 10, 2015 at 3:47 pm #533360Hey!
edit your portfolio grid element and look for “Link Handling”. Choose “Open a preview of the entry (known as AJAX Portfolio)”.
Regards,
AndyNovember 10, 2015 at 6:25 pm #533557Hi Andy,
Unfortunately that is what we already have at the moment “Open a preview of the entry (known as AJAX Portfolio)” – we need to REMOVE the Preview / ajax / lightbox altogether and when someone clicks on the picture nothing should happen, the picture should NOT enlarge.
Basically… the portfolio item should NOT open in a new page or should NOT open in a lightbox. It is enough to open like this only: http://dns.d.pr/1bvjW/4YYLrrvl
Any quick CSS to remove the preview of the entry on portfolio items?
Thank you
November 10, 2015 at 8:17 pm #533642Hi!
I am confused by what you are saying:
when someone clicks on the picture nothing should happen
I already provided you here (see 1.) ) a solution for this.
By the way this IS the AJAX Portfolio: http://dns.d.pr/1bvjW/4YYLrrvl
So no idea what you want now.
Cheers!
AndyNovember 10, 2015 at 8:25 pm #533649Thank you for your patience on this Andy,
It is harder to explain that I thought, but let me try once again, I am sure it will work now.
The Ajax Portfolio is FINE and we want to keep it as it is: http://dns.d.pr/1bvjW/4YYLrrvl
However, after the ajax portfolio opens, the user is (at the moment) able to click on the image and enlarge it to open in a lightbox – I am calling it the “lightbox LINK”: http://dns.d.pr/me4x/2dVzhXWU
This lightbox LINK is what we would like to remove. In other words: http://dns.d.pr/1kFpe/2XpTUQUAI hope this makes it easy to understand.
Thank you
November 10, 2015 at 8:37 pm #533657Hey!
ok I think I get what you mean finally. Please try this code:
a.lightbox-added { pointer-events: none; }
I hope this will work for you.
Cheers!
AndyNovember 10, 2015 at 8:39 pm #533660Spot on Andy! :)
Thanks again for your great help and patience on this one…
November 10, 2015 at 8:57 pm #533670Hey!
super glad it’s working for you now! Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.
Regards,
Andy -
AuthorPosts
- The topic ‘Image icon & Portfolio tweak’ is closed to new replies.