Number of tiles, hover image, mobile phone

[ajifsk]

Hi Satori Studio,

I’ve purchased this ikebana theme just recently and I got some question or feature request :

1. Is it possible to change the width of the page? If I remember correctly the demo page before have like a full screen width or almost full screen width right?

2. I don’t think that the template has this feature right now, so maybe this is more like a feature request. I would LOVE if the portfolio page can make the featured image become a BLACK & WHITE image and when we MOUSE OVER it, it will become the original image (with colour).

3. When i browse my blog using a mobile phone, I must click a portfolio tile 2x in oder to open it. Could you fix this issue?

If it’s too complicated, could you like give us the ability to set different image between normal and mouse over? I can live with this and edit my images to become a Black & White manually and upload both into each project. This will make non designer people like me can upload just any image we want without considering the colour clash

Thanks!

[satori]

Hey Ajifsk,

first of all, thank you for the purchase!

I’ve left a reply to your comment on ThemeForest just in case as well, yet will leave a reply here as well so that other forum visitors can see the information.

I will cover your questions in the same order:

1). Yes, there’s a special setting for that in Ikebana, please visit the “Page Elements” tab of the Theme Options panel and input your desired maximum width into the “Maximum content width” field. If you want to force the page to stretch to the max of the available screen with in all cases, you can set this parameter to a high number, e.g. 5000. The default setting is 1500 (pixels).

2). I am not planning to introduce this feature in full into the theme so far, mostly since it is quite specific for a wide-use theme; however, I can provide a piece of code for you that would implement greyscale hover effect on at least 90% of currently used browsers (this is also a more efficient solution, because loading each image in two alternatives would drastically increase the load time of the website, which could negatively impact use experience). Please see the code here.

You can insert this code into the “Style: Add Custom CSS” tab of the Theme Optoions panel (do not forget to press the “Save all changes” button to preserve the effect).

3). Could you please tell me which smartphone you are using to view the website (brand and model, as well as the browser). I will troubleshoot the issue.

Sincerely,
Andrii / Satori Studio

[ajifsk]

Hi Andrii,

Thanks a lot for the Black and White code!

For the smartphone I’m using iPhone, the browser is Safari & Chrome. The problem is that whenever I tap a tile, it will show the excerps (just like when we mouse over it on desktop) and after that we must tap it again to open the post.

EDIT : The black and white code works, but it’s the other way around. Right now the images turn into Black and White when I mouse over it. The one that I expect is the image became full colour when I mouse over it and it will be Black and White when i’m not mouse over it.

Thank you

• This reply was modified 10 years, 4 months ago by ajifsk.

[satori]

Hey Ajifsk,

I’ve prepared a fix for the iPhone mouseover/mouseclick event issue: please download this archive, unzip it, and upload the resulting files into the theme folder (/wp-content/themes/Ikebana/) via ftp, replacing the existing files when prompted. After that you can refresh the website on your iPhone and test if the mouse events are working properly now. Please let me know if it helps!

Regarding the greyscale tiles: I’ve modified the code, you can get it here. This one will make images greyscale by default and coloured on mouse hover.

Sincerely,
Andrii / Satori Studio

[ajifsk]

Hi Andrii,

Sorry for my late response.
The fix for iPhone & the custom CSS works! thanks a lot.

But regarding my question #1
“Is it possible to change the width of the page? If I remember correctly the demo page before have like a full screen width or almost full screen width right?”

I already follow your guide and change the “Maximum Content Width” to 5000 but my page still only boxed and can only hole 3x box per row. you can check it here http://www.ketiduran.co I checked your live demo and yours can handle 4x box.

Another thing, the twitter plugin give me error whenever I try to access my admin panel (I use godaddy as host) and these are the error messages :

Warning: Cannot modify header information – headers already sent by (output started at /home/content/p3nexnas05_data01/10/2112110/html/wp-content/plugins/twitter-widget/twitter-widget.php:246) in /home/content/p3nexnas05_data01/10/2112110/html/wp-admin/post.php on line 235

Warning: Cannot modify header information – headers already sent by (output started at /home/content/p3nexnas05_data01/10/2112110/html/wp-content/plugins/twitter-widget/twitter-widget.php:246) in /home/content/p3nexnas05_data01/10/2112110/html/wp-includes/pluggable.php on line 1121

I can enter my admin panel by deleting the twitter plugin via FTP

hope you can help me in these 2 issues

Thanks!

[satori]

Hey Ajifsk,

here’s how the website looks on my 1600px wide screen: screenshot. It fits a 4×4 and 1×1 tile in one row, and can fit even more tiles when viewed on larger screens. Could you please clarify what you are trying to achieve, and ideally provide a screenshot of how it looks on your machine. Thanks!

Regarding the error message, please try the following: download this archive, unzip it, and upload all three contained files via FTP into the following folder inside your WordPress install: /wp-content/plugins/twitter-widget/. After that refresh the website and let me know if the error message persists.

Sincerely,
Andrii / Satori Studio

[Author]

Posts