I got a request from a customer to make site like this one.
https://minibigbooks.com/en-EN/
First I needed to get the flying books working and I used this tutorial to get started.
This tutorial came in handy because they were rotating through the background colors and I wanted to add that feature to my page as well.
I hope this helps someone else out there…
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…
I never knew this existed. I am pretty sure I could have used it once or twice.
Here is what Mozilla has to say about it.
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
I hope this helps someone else out there…
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.
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.
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.
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.
I hope this helps someone else out there…
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…
I needed a quick opposite color and found this site which totally helped me in seconds.
I hope this helps someone else out there….
I am a little late to the CSS animation game. I just needed to slide a photo in a few hundred pixels and then have it stop. The following video helped me out.
https://www.lynda.com/Edge-Animate-tutorials/Project-overview-plan/149119/161881-4.html
I hope this helps someone else out there…
Had a buddy Chris discover a new coding resource.
I hope this helps someone else out there…
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.
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…
Stumbled upon this site today and found the buttons to be enjoyable. Not sure how I would use them yet.
http://tympanus.net/Development/DistortedButtonEffects/
I hope this helps someone else out there….