Tech Stuff

One More Vertex Tweak

The other week we visited the Vertex, from Elegant Themes, with a number of fixes to make this excellent theme work a little harder. Here’s one more thing I noticed: When you display the portfolio on the front page, you get this:mystery_meat

Yes, it’s the dreaded “Mystery Meat” navigation. (Note: The “Please replace…” block is a default image I set up for this project, so that the individual project managers are reminded to set a featured image.) You can only see what each block is a link to when you hover over them. It’s a lovely fade-out-and-animation effect, but it’s not at all user-friendly.

A couple of hard-to-locate styles are responsible. There is one very long rule that makes this entire block invisible:

<div class="project-description">
        <h3><a href="">Test Project</a></h3>
        <p class="meta-info">Aug 25, 2014</p>
        <a class="et-zoom" href="">Read more</a>

While separately hiding the <h3> that I want to appear. You actually may not mind if the other meta data appears or not, but it’s not relevant for my purposes so I’m going to keep it hidden.

The rules you have to add are simple. This one changes the default opacity of the block to that of its parent (1):

#et-projects li .project-description {
    opacity: inherit;

And this makes the <h3> appear:

#et-projects li .project-description h3 {
    line-height: 1.3em;
    margin-left: 10px;
    margin-right: 10px;
    opacity: 1;

I’ve also taken the opportunity to fix the bad margins and leading. The new look is here:

Similar...  Customizing Vertex


No more mystery. You can see exactly whose project your about to view.

As before, this stuff is all best placed into the Vertex Theme Options general tab, at the bottom where custom CSS can be inserted.

Leave a Reply

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