Hello,
I'm exploring the Venture template. Great stuff! Can anybody explain how the graphic in the logo works? I see that the centered, unordered list in the custom HTML creates it, but I don't understand how. I could just remove it by removing that list, or if I wanted to replace it I suppose I could load a graphic into the HTML file, but I'd like to know what's going on there, and what my options are in tweaking it. How is that list triggering the graphic? How could I have the list trigger a different graphic, etc. It's got me mystified at the moment! Thanks

Hi

I think that is a glitch with the sample data its not required

It adds some flexibility for us as otherwise we would need to add some css to position it which may not have suited some members designs

Cheers
Paul

The logo seems to be created by pure CSS applied to the li list in the html module.

If you don't want to use the CSS trickery then you should be able to just upload your logo graphic, or text into a custom html module in position - logo, and it will show as normal. The documentation usually tells you how on JB site. Just remember any graphic logo would be best on a transparent background as it is overlaying the banner image.

If you like the CSS stuff here are some resources and articles you may find useful to get started.

www.creativebloq.com/3d/how-create-impressive-3d-graphics-css3-21410672

desandro.github.io/3dtransforms/docs/3d-transform-functions.html

css-tricks.com/examples/ShapesOfCSS/

apps.eky.hk/css-triangle-generator/

I hope that helps.

Regards
Ian

ah sorry with you know - I was looking at a previous version

Yes you could just use a logo image file and as Ian says a tranparent png would be best

The css in question for the logo would be

#logo ul {
position: relative;
width: 10em;
height: 4em;
cursor: pointer;
list-style-type: none;
margin: 0 auto 40px;
}






#logo ul li:nth-child(1) {
border-width: 0 8em 6em 0;
border-color: transparent transparent rgba(255,255,255,0.5);
-moz-transform: skew(15deg);
-ms-transform: skew(15deg);
-webkit-transform: skew(15deg);
transform: skew(15deg);
z-index: 5;
}


#logo ul li:nth-child(2) {
border-width: 6em 4em;
border-color: transparent transparent rgba(255,255,255,0.4);
top: -6em;
left: 0.75em;
z-index: 0;
}


#logo ul li:nth-child(3) {
border-width: 0 0 6em 8em;
border-color: transparent transparent rgba(230,230,230,0.5);
-moz-transform: skew(-15deg);
-ms-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
transform: skew(-15deg);
left: 1.5em;
z-index: 3;
}


#logo ul li:nth-child(1):after {
top: 1.8em;
left: -0.87em;
border-width: 0 5.75em 2.4em 0;
border-color: transparent rgba(255,255,255,0.2) transparent transparent;
-moz-transform: rotate(37deg) skew(22deg);
-ms-transform: rotate(37deg) skew(22deg);
-webkit-transform: rotate(37deg) skew(22deg);
transform: rotate(37deg) skew(22deg);
z-index: 4;
}


#logo ul li:nth-child(2):after {
border-width: 0 0 6em 4em;
border-color: transparent transparent rgba(255,255,255,0.1) transparent;
right: 0;
}



#logo ul li:nth-child(3):after {
top: 1.75em;
left: -4.85em;
border-width: 0 0 2.4em 5.75em;
border-color: transparent transparent transparent rgba(255,255,255,0.2);
-moz-transform: rotate(-37deg) skew(-22deg);
-ms-transform: rotate(-37deg) skew(-22deg);
-webkit-transform: rotate(-37deg) skew(-22deg);
transform: rotate(-37deg) skew(-22deg);
z-index: 5;
}


#logo ul li {
width: 0;
height: 0;
border-style: solid;
position: absolute;
top: 0;
left: 0;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: initial;
-webkit-transition-delay: initial;
transition: all 1s;
}

@Ian - Thanks

So, I will probably just remove the Custom HTML in the logo position and leave it without anything in that position.

Which leads me to another question. When I unpublish the Custom HTML in the logo position, the menu moves up in its place. If I leave nothing published in the logo position, how do I keep the menu from moving up. I assume I do that through the CSS. Can anybody point me to the relevant CSS?

Thanks,
Andy

Hi Andy,

Where are you intending to put the logo?

Do you have a link for the site?

Cheers
Paul

newprairiecounseling.com

I'm building it live. The business is not active yet so no one's seeking it out.

Right now I have the logo unpublished. The photo in the background has the business name in the non-web-friendly font that I like. Probably not very SEO, I know.

So, I think I might just leave it like that. But I'd like the menu items to sit lower over the background image than they are right now. Actually at the moment I still have the logo module published but with empty paragraphs. That's probably a no-no, too. I'm not sure. Either way that hasn't lowered it as much as I like.

I also don't like what's happening with the background image on mobile devices. Because I've got the business name written in that background image, most of it is cut off on mobile screens. Is there a way to have that image shrink to fit smaller screens? Or maybe, bypass that image on mobiles for something else? Maybe on mobiles I could hide the background image slideshow (actually only using one image) and use the logo module in it's place. I'm guessing that sort of specificity is not possible.

Thanks for any input.
Andy

A couple of ideas.

For me the simplest would be to extract the text from the background image then create an image with the text on a transparent background. Use that image of text for your logo, add alt tag etc for your seo. This would then move and scale in the template out of the box for all devices.

Second option would be to add the font file and then use that font style for the logo text. If you don't have a licence for the font for web use then look for similar in google fonts or Typekit, then both will work with the jb template.

You could, as you mention, do all the image changes based on device or screen size but it is rather complicated method in my opinion.

Regards Ian

Hi Andy,

I'd go with Ian's suggestions - thanks Ian

My preference would be the font option if at all possible - makes life easier for both the developer and the search engine

Cheers
Paul

Thanks! I'll look for a similar enough font. If not, I can easily do the graphic. I will have to dig around to figure out the relevant CSS to push the logo to the left, so it sits correctly over the image. If anybody can point me to the right CSS I'll take it. No worries, if not.

Thanks,
Andy

Think this is covered in the other thread - it should be left as default

Cheers
Paul

Before any CSS try removing the inline styling on the logo module via the editor. It currently has centre styling applied so removing that will left align everything. That might get you near where you want to be without any CSS hacks.

You could then look at altering the width of the positions via layouts to nudge the module to a suitable place on the page. After that i guess you are into CSS adjustments!

Remember as the image scales the position of the text will change in relationship to the image due to the responsive nature of web pages today.

Regards Ian

Thanks. All very helpful points. So far, so good. Can you tell me how to remove the overlay on the banner slogan? I removed the overlay over the background image by reducing transparency to 0 (I think). But I'd like to also remove the overlay for the slogan.

Thanks,
Andy

For the CSS the background on the whole banner you target class
.banner-overlay

assume this is where you are reducing the transparency to 0, or you could use

.banner-overlay {background-color: transparent;}

For the slogan (assuming you mean the "Uncover your strengths...." line) you can apply the same trick to #bannerwrap, or use

#bannerwrap {background: transparent;}

Put both in custom.css to avoid losing when you update the template.

Hope this helps out.
Ian

Thanks, that did it. So cool. Now I can get my face away from this computer for a while!

Thanks Ian