Tech Stuff

Customizing Vertex

Elegant Themes’ Vertex has its great moments, but out of the box it has other moments that aren’t so great.

Spacing isn’t thought through, the possibility of a long blog name isn’t accounted for, ET’s usually elegant portfolio feature is ugly.

Other things could be more — um, elegant? Degrees of translucency (OK, it’s an aesthetic call on my part). Then a few questions: How did featured images get out of control? Many of the images are out-of-control, by the way. Sliders for example jump all over the place, and if you use the small one, most of the image is obscured. Why isn’t the possibility of a Project having, or needing, to be credited to an author considered?

But I’m getting ahead of myself. From the top, the page looks as advertised. Replace the main image, put in a new title and subtitle, and we’re looking pretty good.

But once we getting to scroll down, we get into trouble.

At a certain point, the large header disappears and is replaced with a smaller fixed navigation bar, including the blog title. But our blog has quite a long name, and now it’s being cut off. This is the trickiest thing to solve, because there are classes and embedded styles that are added via JavaScript as the page scrolls down. But I think I’ve tracked down and addressed them all here:

body { padding-top: 0 !important }

#top-menu { padding-bottom: 13px }
body #top-menu.et-fixed {
position: relative;
height: inherit !important;
overflow: auto !iimportant;
}
#et-logo a { line-height: 1.2em }

/* fix too-big sticky navigation */
div#top-menu.et-fixed div#et-logo {
font-size: 36px;
margin-left: auto;
margin-right: auto;
margin-bottom: 16px;
float: none;
}

I’ve also fixed the leading between the two lines of the header. The second problem on the screen above is the rather bad looking portfolio.

The images are all different sizes, and they’re jammed up against each other. This theme, unlike Divi, doesn’t seem to have a built-in facility to show two different kinds of galleries on the home page, so we’ll add this code to make them a uniform size, and add some spacing to the side and below. While we’re at it, when you hover over the images a screen appears over it; but it’s too opaque. We’ll tone it down:


#et-projects li, #testimonials-authors li, .team-member {
margin-right: 12px;
margin-bottom: 12px;
}

#et-projects li {
max-height: 240px;
overflow: hidden;
}

.et_color_scheme_blue .project-description {
background-color: rgba(36, 59, 94, 0.7);
}

Much better.

Another little cosmetic touch. The bar behind the blog subtitle is fine:

But a little translucency wouldn’t hurt:

Here’s the CSS:

/* translucent backing to tagline */
.et_color_scheme_blue .tagline {
background-color: rgba(51, 51, 51, 0.7);
}

In the same vein, the text isn’t uniformly readable against the background image. It all depends on what you put there, but since you may need a mix of light and dark images, depending on the type of projects and topics you have, the time-honored trick of adding a drop shadow helps. So that this:

With the addition of this:

/* drop shadow headers so they show against more backgrounds */
#top-area h1.title, #top-area h1 a {
text-shadow: -2px 1px 2px #444444;
}

Renders this:


One odd quirk. The portfolio items and contributors segments are animated, and move into position when you scroll to that point in the page. SOME versions of Chrome don’t trigger the team members segment. Rather than hack the JavaScript right now, I just set them to opaque.


/* broken animations on scrolldown in Chrome */
body.chrome.et-scroll-animations .et-even header, body.chrome.et-scroll-animations .et-even div.member-image { opacity: 1 }

I can’t reproduce this everywhere, but just in case.

Next up, problems with the individual project pages. I’m using the ET Elegant Builder plugin, if that helps, because without it their shortcodes just don’t work. In particular the slider. Even with the Builder, the sliders are a problem. There’s a pagination widget at the bottom that obscures the captions; and the forward/back buttons are too horsey.

This one strikes me as really bad. But by adding a little code:


.et_lb_slider ol.flex-control-nav {
display: none !important;
}
.et_attachment_overlay {
display: none !important;
}
.flex-direction-nav li a {
opacity: 0.5;
top: 100px;
}

We mostly can make it go away. A big problem — a really big problem — is the featured image. You must have a featured image for a project, or all that shows up in your gallery is the placeholder text. But somehow the featured image on the project page itself is rendered huge:

Like I said, really big. The native size of this image is only 240px or so in any dimension, so blowing it up to 9999px is really overkill. Here’s the Firebug screen:

This code seems to work in the modern browsers:

/* fix way-too-big featured images */
.et-main-project-thumb {
height: auto;
width: auto;
display: block;
margin-right: auto;
margin-left: auto;
}

Drop me a line, maybe I can elevate your project. Or maybe I’m full of hot air.
The last problem maybe should best be solved by creating a child theme and adding a field to the projects post type. But there is no author — which at least in the case of the site I’m building is crucial, because it’s a class assignment where each student submits a project. For now, I’m handling it with the Custom Field widget and a few custom fields for Author and Description. But out-of-the-box it’s not so great.

Meh. We’ll add some CSS:


/* widgets for project details */
div.widget_custom_field {
margin: 18px 0 18px 4px;
line-height: 1.4em;
}

And voila:

Your mileage may vary. Here’s the complete code block, which you can drop into the ET customizer and start to work with it:


.et_lb_slider ol.flex-control-nav {
display: none !important;
}
.et_attachment_overlay {
display: none !important;
}
.flex-direction-nav li a {
opacity: 0.5;
top: 100px;
}

#et-projects li, #testimonials-authors li, .team-member {
margin-right: 12px;
margin-bottom: 12px;
}

#et-projects li {
max-height: 240px;
overflow: hidden;
}

.et_color_scheme_blue .project-description {
background-color: rgba(36, 59, 94, 0.7);
}

body { padding-top: 0 !important }

#top-menu { padding-bottom: 13px }
body #top-menu.et-fixed {
/* padding-bottom: 32px; */
position: relative;
height: inherit !important;
overflow: auto !iimportant;
}
#et-logo a { line-height: 1.2em }

/* fix too-big sticky navigation */
div#top-menu.et-fixed div#et-logo {
font-size: 36px;
margin-left: auto;
margin-right: auto;
margin-bottom: 16px;
float: none;
}

/* fix way-too-big featured images */
.et-main-project-thumb {
height: auto;
width: auto;
display: block;
margin-right: auto;
margin-left: auto;
}

/* broken animations on scrolldown in Chrome */
body.chrome.et-scroll-animations .et-even header, body.chrome.et-scroll-animations .et-even div.member-image { opacity: 1 }

/* drop shadow headers so they show against more backgrounds */
#top-area h1.title, #top-area h1 a {
text-shadow: -2px 1px 2px #444444;
}

/* translucent backing to tagline */
.et_color_scheme_blue .tagline {
background-color: rgba(51, 51, 51, 0.7);
}

/* widgets for project details */
div.widget_custom_field {
margin: 18px 0 18px 4px;
line-height: 1.4em;
}

Tom
Tom McGee has been building web sites since 1995, and blogging here since 2006. Currently a senior developer at Seton Hall University, he's also a freelance web programmer and musician. Contact him if you have the need for a blog, web site, redesign or custom programming!

27 thoughts on “Customizing Vertex

  1. Hi,
    This is exactly the problem I have with this theme, the pictures that are way too big. So I am happy that you provide a solution !

    I added the code in the EPanel Custom CSS – saved is. Nothing happens…
    No cache pluginn acive. Am I missing something here ?

    BR
    Tycho

  2. Great !

    http://debrink.tcwebdesign.nl/

    it is a testsite I am building until the customer is satisfied, after that I will build the website on
    http://debrink.info

    On small devices the pictures in the header are ok, also when I manually make the the window of the browser smaller. But on full screen laptop screens one only sees a small portion of the picture. ( excuse my Englisgh, not a native speaker)
    For instance the contact page shows a piece of sky, but it should be a nice sunset. On my mobile the sunset is visible.

    I placed your code in the e panel, after that it did not work, so I made a child theme, and I put your code in the css file. No result.

    I am not a programmer – so I might be doing things that might be not too logical 🙂

  3. I see, that’s a different thing than the “featured image.” And it’s a little more complicated to fix. You may have to edit the image to match the dimensions of the space. I solved that problem in the Divi theme a while ago, where that theme wants an image 1900px wide by 600px deep (see http://blogs.shu.edu). I’m not sure what Vertex’s preferred value. But you could try making it bigger (1094px might work, or 1900px), and/or by adding this rule:

    #top-area, #pre-footer {
    background-size: contain;
    }

    Which changes the default value of “cover,” to get an idea of how it works.

    This is something ET does not document at all, unfortunately.

  4. Thank you Tom !

    Your little piece of code just made my day! This is what I mean, and it works.
    Yes – this is really great, it is clear that you know what you are talking about.

    Now I have to tweak the image sizes, but that are only details.

    Thanks again, you made me very happy.

  5. Thanks a bunch, working on getting things figured out.

    One question, I had the same problem as the guy above, and code you gave him worked, but I was wondering if there is a way to only apply that on posts outside of the homepage?

    Also, when I try to apply the drop shadow mod, the epanel doesn’t seem to accept it. Any ideas?

  6. Ben, I suppose you could write a rule that spells out all the cases where that occurs except the home page. The home page has a body tag with the class “home,” so if your rule was something like:


    body.archive #top-area,
    body.archive #pre-footer,
    body.single #top-area,
    body.single #pre-footer
    /* etc. etc. for search, author and whatever else */
    {
    background-size: contain;
    }

    That ought to do it.

  7. As for the drop shadow — I don’t know. I double checked the code I have in the epanel, and it seems to be the same. But here it is copied-and-pasted just in case I misread it.


    #top-area h1.title, #top-area h1 a {
    text-shadow: -2px 1px 2px #444444;
    }

  8. Hello, Thanks for these advices but I’m not very sure where I must modify the CSS code forThe bar behind the blog subtitle to get it transparent. Tanks

  9. With all of these css changes, go into the dashboard//appearance//vertex theme options panel. At the bottom of the main screen is a section for custom css — just paste it in there. It’s evaluated after the built-in css styles, so it shouldn’t be overridden.

  10. Grrrr. I believed I’have found it but NO. I want to have the default color (grey-black) for the header and footer and a translucid bar behind the blog subtitle. Excuse me for all these messages and for my poor english (I speak french – CH)

    Thank you

    Olivier

  11. To get the default grey-black header and footer, that setting is in the Customizer under “Schemes.”

    The CSS for the translucent background behind the subtitle would look like this:

    .et_color_scheme_blue .tagline {
    background-color: rgba(51, 51, 51, 0.7);
    }

    Or whatever color you need.

  12. Hi Tom,

    Thanks for these great edits. I think many of the Elegant themes are a starting point and each time I use one, it has to be modified quite a bit.

    For the Vertex theme, I have a question, I hope you can answer. The team members are showing on the homepage, but neither their photo or their name is activated to actually go to their page. Is there something I’m missing? How do I activate them?

    Thanks, Sue

  13. Start with the Vertex Theme Options panel. At the bottom in the space for Custom CSS try adding:

    #content-area, .home-block {
    background-color: #000;
    }

  14. Hi Tom,

    I was wondering if you help me adjusting the header, I would want it to display the whole picture and zoom out the picture. Right now as it sits it doesn’t look good nor natural. See:
    http://sdboardclub.dollarwp.com/staff/

    Right now the only modifications on custom.css is the whole block you put on this post and

    #top-area, #pre-footer {

    background-size: contain;

    }

    Also, if i am not eating too much of your time, would it be possible to minimize the footer? Right now as it sits, it is very big and would like a slim footer so I can post some social media buttons.

    Thanks!

  15. What if you changed it to:

    #top-area, #pre-footer {
    background-size: auto;
    }

    Any better than that you’d need a photo with a different aspect ratio.

    The size of the footer seems to be controlled by:

    #main-footer {
    padding: 117px 0 80px;
    }

    Maybe change it to something like:

    #main-footer {
    padding: 20px 0;
    }

    along with:

    .fwidget, #footer-widgets {
    margin-bottom: 20px;
    }

  16. Hi Tom,

    This is great information, thank you for putting this together. I have the same issue as Susan and can’t figure it out. “The team members are showing on the homepage, but neither their photo or their name is activated to actually go to their page. Is there something I’m missing? How do I activate them?”
    Maybe you have a solution.

    Thanks,

    Nick

  17. I never got that working either. Before I sorted it out our client decided to not put the team members up anyway, but it looks like you would need modifications to the theme — so, you’d have to start with a child theme.

  18. This was enormously informative. Thank you
    I had one question maybe you know the answer to. I’ve been trying to turn off the site name or logo that pops up in the header next to the menu. However the only way I can seem to do it is to comment it out in the header.php unfortunately when that happens it also disappears from the front page entirely. I can’t seem to figure out where to edit that back in so that the front page looks like it’s supposed to. IDK if you have any insite i’d really appreciate it.
    Thanks so much

Leave a Reply

Your email address will not be published. Required fields are marked *