Ikebana Logo Options

[rumbledesign]

Is there a way I can have the logo with the cell grid as in your demo. When I insert the logo, it butts up right against the menu bar (and seems to be on top of it — even though it’s set to be “outside” of the header). My goal is to have the transparency of the logo reveal the background behind it.

Here’s the link:

http://staging1.fivestargourmetfoods.com

[satori]

Hey Rumbledesign,

first of all, thank you for the purchase!

The green “Ikebana” tile in the theme demo is a “link”-format project with a thumbnail (featured image) and link URL pointing to the website front page ;) You can find more information about the formats on pages 8-9 of the theme manual. Note that in order for it to stay in front of all other project in the grid, you’d need to declare it as “sticky” in the “Sticky (Always First) meta box while in the project editor mode. If you want that tile to reveal the background, you can use an “opacity” CSS rule for that particular tile.

Sincerely,
Andrii / Satori Studio

[rumbledesign]

Hi! Thanks for the reply. I’m actually not referring to the sticky logo — that makes perfect sense to me. I’m more concerned with the logo and 2x logo that you upload through the theme options.

For example the smaller version of the logo on the demo has some space away from the menu header.

[satori]

Ah, now I see :) Sorry for the misunderstanding.

The algorithm that determines the position of the logo in Ikebana presumes that if there is no icon menu, the logo automatically gets put inside of the menu bar, for visual consistency. In case you wish it to stay outside, let me know, I can provide the CSS code.

Sincerely,
Andrii / Satori Studio

[rumbledesign]

Thank you so much for the help. Your explanation helps me understand how the logo area works. What I really would like to know is how to create the “opacity” css rule you had mentioned.

[satori]

Hey there!

custom CSS rules can be added in the “Style: Add Custom CSS” tab of the Theme Options panel. In case of logo opacity, it will look like this:

#logo { opacity: 0.5; }

The lower the number, the more transparent the image will be (1 is fully opaque, 0 is fully transparent).

Sincerely,
Andrii / Satori Studio

[rumbledesign]

This is also useful information, but not what I’m looking for. Let me try to show you visually what I need accomplished on the portfolio and standard pages.

http://staging1.fivestargourmetfoods.com

You see the large logo square, much like the example in your demo? The logo (a transparent .png) actually has some rounded edges, because each square (portfolio item) has a background, you can’t see it. How can I control the opacity of a particular portfolio square?

http://staging1.fivestargourmetfoods.com/resources/trade-partners/

Here’s a typical page where the logo is now inside of the header. How can I make it so that the header background is not underneath the logo?

[satori]

Alright, now I think I get what you’re after.

These things are not envisaged in the theme originally, yet the extra code is quite straightforward so here goes:

#post-391 { background-color: transparent !important; }
#header #header-box { background: none !important; }
#nav-wrap { float: none; background-color: #82C341; }

Please let me know if it works as intended.

Sincerely,
Andrii / Satori Studio

[rumbledesign]

Perfect! You’re amazing! So much fun working with this theme!

[satori]

Glad to hear it helps ;)

A. / Satori Studio

[Author]

Posts