New Front EN › Support Forums › Ikebana Theme Support › Ikebana Logo Options
- This topic has 12 replies, 2 voices, and was last updated 10 years, 10 months ago by satori.
-
AuthorPosts
-
December 13, 2013 at 4:09 am #2087rumbledesignParticipant
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:
December 13, 2013 at 1:26 pm #2091satoriKeymasterHey 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 StudioDecember 13, 2013 at 4:30 pm #2094rumbledesignParticipantHi! 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.
December 14, 2013 at 7:34 pm #2101satoriKeymasterAh, 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 StudioDecember 15, 2013 at 5:36 pm #2113rumbledesignParticipantThank 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.
December 16, 2013 at 11:11 am #2117satoriKeymasterHey 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 StudioDecember 16, 2013 at 5:32 pm #2123rumbledesignParticipantThis 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?
December 17, 2013 at 9:25 am #2130satoriKeymasterAlright, 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 StudioDecember 17, 2013 at 2:18 pm #2137rumbledesignParticipantPerfect! You’re amazing! So much fun working with this theme!
December 17, 2013 at 3:22 pm #2141satoriKeymasterGlad to hear it helps ;)
A. / Satori Studio
-
AuthorPosts
- You must be logged in to reply to this topic.