Thursday, November 21, 2019

Vertical Align Text In li Tag Joomla Menu Button

I was matching another designer’s template where there are 4 big buttons, in different colors, with different icons, and different links.

Very nice. I was using Joomla 3.8 so I created a menu and gave it a style of the color of the button such as “red” for the first button, so each menu item had it’s own class. I had a difficult time when I had three words on the first button, but only 1 word on the other buttons. The line spacing to fit the three lines needed to be “line-height: 1.2em;”, but this made the text on the other three buttons at the top of the box.

The answer was the display option mixed with the line-height in combination with a dash of fixed height.  Then align it in the middle.

#feature-menu ul li a {
font-size:2vw;
line-height: 110px;
height: 120px;
display: table-cell;
vertical-align: middle;
}

Then overwrite that style with a specific line-height.

#feature-menu ul li a.red {
line-height: 1.4em;
}

I hope this helps someone else out there…

 

DIVI Customize Tag Landing Page

Divi’s portfolio modules and projects component make adding the project / portfolio a breeze. I found a short code from Surbma that allowed me to quickly add the project tags to the page. The issue I had is when the user clicked on the tag the projects were displaying as single-column blog style and I wanted the columned style the module displayed.

The page got me in the right direction.

How to Give Your Divi Archive Pages a Masonry Layout

This was so close to what I wanted.

The boxes were not totally lined up so I ended up implementing “Flex” in the CSS to make the boxes fit a little better. I used the following article to guide me.

Don’t Overthink It (Flexbox) Grids

The next issue was being able to build this page like the other pages I had built in the Divi builder. I needed to add back the Yoast Breadcrumbs and this article helped.

How To Add Breadcrumbs To Your WordPress Website

I was hoping to build “child-theme” sub-page and I had trouble coming up with the right Taxonomy.  What I needed was “taxonomy-project-tag.php” or  “taxonomy-project-tag-tag label.php”

” .The following page helped me determine the right taxonomy for page of linked projects by tags.

Taxonomy Templates

 

I hope this helps someone else out there…

 

 

 

How To Create A Parallax Effect in Gantry

This actually isn’t just for Ganty. It just involves a little CSS. I needed it for a section in a Gantry template, but you can use this anywhere.

I got this set up from good old W3Schools so you know it is solid.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax

It is really just locking down the position of the background image and setting it to cover. I didn’t have to specify the height of the div in my case.

I hope this helps someone else out there…

 

JCE Mediabox – Popup Icon Set To No But Still Showing

I installed the recent beta of the JCE’s Mediabox because Ryan is working on a responsive version. It is working well; however, I was having an issue making the Popup Icon not show. I set it to not show, but it showed up anyways.

jce-mediabox-icon

I was able to get it to not show by adding the following to my CSS.

.wf-icon-zoom-link {
display:none;
}

I discovered you can disable this globally by going to  Extensions >> Plugins  >> Mediabox 2 >> Options Tab.  Set Zoom/Popup Icons to No.

I hope this helps some else out there…