Add “Made with Love” with a Heart in Your Divi Footer Credits
Theme Options > Custom CSS Note: we should use id=”icon-love”, otherwise it will be overwrite by #footer-info styles. Inline style will not work also.
Changing the font size, line height and code box padding of Syntaxhighlighter Evolved plugin
By Default Syntaxhighlighter Evolved plugin came with no top and bottom padding and very tight line height. If you are someone like me who love some breathing space in between every section in a WordPress post then you can try the below CSS code snippet. Screenshots are attached before and after applying the CSS code….
Divi – Aligning the fullwidth slider image right
It does seem a little odd that image left and right alignment is not included as a setting in the divi fullwidth slider module. By default when you place an image in fullwidth slider it places left side of the text, what if you want to place the image in right and text on left….
Divi – Center align Text in mobile view
If you want to show your content center align on mobile devices for some specific section then you can do this very easily via CSS.add a custom CSS class of ts-center-text-mobile in Text Module settings and use this bit of CSS in Divi > Theme Options > General > Custom CSS section If you want to…
Bootstrap 4 – changes fixed-top Navbar background color on scrolling
// navbar background color change on scroll $(window).scroll(function(){ var scroll = $(window).scrollTop(); if(scroll < 300){ $(‘.fixed-top’).css(‘background’, ‘transparent’); } else{ $(‘.fixed-top’).css(‘background’, ‘rgba(23, 162, 184, 0.9)’); } });
Bootstrap 4 Navbar – align brand to your left and all the navbar-items to right
If you want to align brand to your left and all the navbar-items to right, change the default mr-auto to ml-auto <ul class=”navbar-nav ml-auto”>
Center and crop image with pure CSS
It’s simple. Set your image crop dimensions and use this line in your CSS: img { object-fit: cover; } That’s it. No need for unsemantic, wrapping divs or any other nonsense. This technique works great for cropping awkwardly-sized pictures down to squares or circles. Take this wide photo below for example. Once object-fit: cover is applied to the…
How to Use rsync to Transfer and Synchronize Local and Remote Directories
Rsync (Remote Sync) is the most commonly used command for copying and synchronizing files and directories remotely as well as locally in Linux/Unix systems. With the help of rsync command, you can copy and synchronize your data remotely and locally across directories, across disks, and networks, perform data backups, and mirroring between two Linux machines. Using the Rsync for Linux is somewhat tricky and you have to be…
How to change revolution slider background color opacity
.rev_slider .slotholder:after { width: 100%; height: 100%; content: “”; position: absolute; left: 0; top: 0; pointer-events: none; background: rgba(255, 255, 255, 0.5); } Can do the same for section background image, just need to add a class to the container and put the .classname in place of .rev_slider .slotholder
Copy files using the Terminal instead of the Finder Mac OS X
First, ensure that you have both the source files and your copy destination mounted and available on your system so you can see them in the Finder. Then open the OS X Terminal and perform the following steps: This command now tells the computer to run the “rsync” command (or another copy command you’ve chosen),…
Divi – Remove the divider line between content and sidebar
By default the Divi Theme displays a dividing line between the main content and the sidebar. It’s possible to remove this dividing line using CSS.Note that there are two cases in which a dividing line may occur (either on a standard sidebar, or on a sidebar module). Remove divider line between content and sidebar from…
How to take full-page screenshots using Firefox build-in Web Development Tool
You can take a full page screen shot of any live website using Firefox build-in Web Development Tool. No need to install add-on or third party apps. If past and works well. Go to Tools > Web Developer > Developer Toolbar, then type screenshot –fullpage That’s it.