Logo not displaying; overlay color not working; links in portfolio objects

[anderssonkax]

I recently purchased the Ikebana theme, and I really like the functionality so far. Great job!

I have a few questions regarding setting it up though (also messaged via Themeforest but seems like this is a better channel):

1) I want the logo to be displayed right above the left-hand icons, and I only want to display the left-hand icon menu (i.e. don’t want a header menu). But although I have uploaded both retina and regular logo it doesn’t display, is it not supposed to? Is there a specific size it has be or another trick I’m missing here?

2) Despite having chosen a “Project box overlay background color”, there is no overlay color at all on mouse hover on the portfolio page, any ideas?

3) I’d like to link some of the image objects in the portfolio page to internal pages (e.g. a contact page), but all portfolio link objects seem to open in new tabs. Is there any way to make sure a specific link is opened in the same tab/window, as a menu link would?

Thanks!

[satori]

Hey Anders,

first of all, thank you for using Ikebana!

I’ve replied to your ThemeForest message, yet the issues will be addressed here so that other users can benefit from knowing this information; I’ll cover the questions in the same order:

1). Please check whether the logo image has been uploaded and saved as a correct path to the file in the Theme Options panel – the setting field should display the URL which ends with “.jpg”, “.png” or other image extension, and a small thumbnail of the uploaded image should appear underneath the field; in case this does not happen when you upload a logo, i.e. the „File URL” field displays an attachment URL (ending with „?attachment_id=xx”) or an empty field – please press the „File URL” button below the url field when in the image upload pop-up dialog, so that the link is a direct url of the image file. Once you have chosen the item and settings, press „Add to OptionTree”; the system should remember this setting and always use the correct URL from then on.

Regarding the second part of the question: since the logo is located inside the header container, it is not possible to remove the header but leave the logo using just the theme’s back-end settings. You can, however, achieve this using some custom CSS – just add this code to the “Style: Add Custom CSS” tab of the Theme Options panel:

#logo-wrap { top: 5px; }
#iconmenu { top: 55px; }

2). The setting works on your website, as far as I can see: the overlays that appear on mouse hover, e.g. over the tile with an icon of a telephone (the overlay says “Ring oss”) are white, which is not the default. Did I understand the question correctly?

3). Currently, the theme automatically assigns a “_self” target to all “link” tiles which lead to internal website pages, and “_blank” target to all external links; since yours is not the first request in this area, I’ve decided to add a little more flexibility to the link targets in the next version of the theme – today I’ve submitted Ikebana 3.4 for review on ThemeForest, it should be live within 48 hours. The update contains several bug fixes as well as the new version of certain bundled scripts. You will be able to download the latest version from the “Downloads” tab of your ThemeForest account.

There’s one more thing you asked in the original message, and that was about unclickable tiles; this feature has been implemented in one of the earlier versions of Ikebana by popular demand, all you need to do is create a project with “aside” format and give it a thumbnail (featured image) – this will display a tile that does not link anywhere.

Should you have other questions about the theme, do not hesitate to contact me.

Sincerely,
Andrii / Satori Studio

[anderssonkax]

Thanks a bunch Andrii!

Your logo fix did the trick, really appreciate that! In regards to the color overlay, it seems I misunderstood the intended functionality; I was hoping to have a semi-transparent color overlay on the entire portfolio object (namely the ones that are clickable), regardless of the caption text, but I now see that it is working as designed.

Also happy to hear about the forthcoming update that will introduce the capability to have “_self” in any portfolio object links, awesome! I removed the last question in the message above as I figured it out on my own, but thanks anyway for clearing it up.

Now, as I’m continuing to develop the site I’ve run in to a few more questions:

1) I’m planning to have at least 3-4 pages in addition to the front page with various functions such as contact page, team page, etc. Ideally, I’d like to use the portfolio layout as much as possible for these pages, and I think the filter function could potentially do this. The issue seems to be that the front page always includes all of the portfolio objects by default, and if an object is not visible when a user clicks on a filter, that object will not show up when the filter is active either. I can’t find a way so that it only displays one filter by default, and so all of the objects within a specific filter – even if not displayed on the front page – will display. Is there a way?

2) For a few portfolio objects that are set as “standard”, I’d like for them to open in a lightbox/color overlay on top of the main page when users click on them. For example, I want to have a “Book a table” box that upon clicking brings up a booking widget without taking the user to a separate page, as I feel that would worsen the UX. Is this possible?

3) When clicking on a portfolio image object, is it possible to include any text in the lightbox that pops up?

4) The filtering via the icon menu works great when first entering the website, but once the user has opened a link to a regular page (example from the demo: https://satoristudio.net/ikebana/project/come-visit-us/), the icon menu behaves a bit different. From that moment on, the links in the icon menu are formatted like this: https://satoristudio.net/ikebana/tag-portfolio/FILTERNAME. When clicking on one of those links, it produces a new box with the title of the filter (as seen here: https://satoristudio.net/ikebana/tag-portfolio/team/) that looks out of place. I understand that the user has to be “taken in” to the portfolio layout again, but once in there it seems that it should behave normally again with fluid motions when clicking on the icon menu and no extra title boxes. Instead, all of the links are still the same and the boxes I mentioned always display. I haven’t figured out how to remove this box as well as go back to the “correct” portfolio behavior when changing filters, is it possible?

Thanks again for an awesome theme and your great support!

[satori]

Hey Anders,

glad the previous recommendations helped! Just to let you know – version 3.4 of Ikebana is now available on ThemeForest. Regarding your remark on the semi-transparent overlays on entire tiles – you can either implement this by customizing the theme, i.e. adding an extra div element inside the tiles by modifying the “content.php” and “content-[format].php” files (a total of 7 files); or simply creating images with overlays prior to uploading them into WordPress.

I’ll cover the other questions below:

1). The portfolio layout in Ikebana has been intended for use on pages which showcase the projects, which is why it displays all project items. What you can do is use the project tag archive pages to display projects that have been assigned a specific tag; the structure of the URL of such pages is “www.website.com/tag-portfolio/[tag-name]”. You can also check them out by visiting the “Portfolio -> Tags” admin menu section, hovering over any of the tags, and clicking on “View” in the hover options.

2). Currently Ikebana supports lightboxes for images (in the “image” project format) – in order to tell some of the projects to open their entire content in a lightbox, certain modifications will need to be done to the code, probably adding some js which creates an overlay with an iframe of the link target when the user clicks on a tile.

3). At the moment the images are displayed without captions in the lightbox, yet I will add this feature to the backlog for short-term improvements in the theme. Thanks!

4). The theme transitions between pages using php, not javascript (i.e. reloading form the server, like other native WP pages), so the behavour with fluid reordering outside of the portfolio page is not feasible, unfortunately. The javascript filter with non-reloading transitions works on the portfolio page layout, and is only intended for the Isotope-powered tiled layout, which it is a part of; on other pages the icon menu leads to portfolio tag archive pages, which are identical to respective filtered portfolio views – i.e. outside the portfolio page, the icon menu no longer behaves as a pure filter, rather as a more conventional menu. The 2×1 tiles with tag information on tag archive pages are there to tell the user where she’s landed :) you can remove the tags though, by deleting lines 15-23 in the “taxonomy-tagportfolio.php” theme file (located in the theme root), preferably via a child theme.

Sincerely,
Andrii / Satori Studio

[Author]

Posts