Skip to content

Instantly share code, notes, and snippets.

View wpacademy's full-sized avatar

Mian Shahzad Raza wpacademy

View GitHub Profile
@wpacademy
wpacademy / accordion.css
Last active January 2, 2025 19:42
Custom Elementor Accordion with 2 Columns and Box Shadow
/**
* Custom Elementor Accordion with 2 Columns and Box Shadow
**/
.wpac-accordion .e-n-accordion {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
align-items: start;
}
.wpac-accordion .e-n-accordion-item {
@wpacademy
wpacademy / animated-circles.html
Created December 30, 2024 20:53
Animated Circles & Icons HTML Code - Chatbot landing page Design
<div class="animatede-circle">
<div class="outer-ring">
<img src="outer-circle.svg" alt="Outer Ring">
</div>
<div class="icons">
<img src="icons.png" alt="Icons">
</div>
<div class="inner-ring">
<img src="inner-circle.svg" alt="Inner Ring">
</div>
@wpacademy
wpacademy / animated-banner.css
Last active December 30, 2024 20:57
Animated Circles and Icons for ChatBot Landing Page Design Tutotorial
/**
* CSS Code for Animated Banner
* Chatbot Landing Page Design Tutorial
* Author: Mian Shahzad Raza
**/
.animated-banner-container {
height: 600px;
overflow: hidden;
}
.animated-circle {
@wpacademy
wpacademy / image-slider.css
Last active January 2, 2025 21:18
Elementor Image Slider - Pure CSS
/**
* CSS Code for Animated Reviews Slider
* Chatbot Landing Page Design Tutorial
* Author: Mian Shahzad Raza
**/
.animated-reviews {
text-align: center;
position: relative;
z-index: 1;
background-color: #fff;
@wpacademy
wpacademy / gradient-border.css
Last active January 2, 2025 20:01
Gradient Border on Elementor Buttons with CSS
.gradient-border .elementor-button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
/* Increase negative value for border width */
margin: -1px -2px;
@wpacademy
wpacademy / taxonomy-count.php
Created December 2, 2024 15:15
Directorist plugin categories post count shortcode
<?php
// Add this to your theme's functions.php file or a custom plugin
function directorist_count_posts_in_taxonomy_shortcode($atts) {
$atts = shortcode_atts(
array(
'taxonomy' => 'at_biz_dir-category', // Taxonomy name (e.g., 'category', 'post_tag')
'term' => '', // Term slug
),
$atts
);
@wpacademy
wpacademy / main.css
Last active December 2, 2024 15:14
Directorist Plugin Search Box CSS Adjustments
.home-search .directorist-search-contents, .home-search .directorist-container-fluid {
padding: 0;
}
.home-search .directorist-search-form__box {
flex-direction: column;
gap: 20px;
}
.home-search .directorist-search-form-top, .home-search .directorist-search-form-action {
width: 100%;
padding: 0;
@wpacademy
wpacademy / mask.css
Created October 4, 2024 01:04
CSS code for SVG Mask to Apply on a Section or Container
selector {
aspect-ratio: 1200 / 600;
background-color: tomato;
mask-image: url("/* SVG URL */");
-webkit-mask-image: url("/* SVG URL also here */");
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% auto;
-webkit-mask-size: 100% auto;
/* mask-size: contain; */
@wpacademy
wpacademy / code.js
Last active August 17, 2024 08:27
Hide the language label for GTranslate plugin when using Popup mode via shortcode in your template.
/**
* This is a jQuery code snippet
*/
jQuery(document).ready(function($) {
$("a.glink span").first().html("");
});
@wpacademy
wpacademy / animated-text.css
Last active June 13, 2024 19:48
Animated Gradient Text effect in CSS
h1 {
background: linear-gradient(
to right,
#CC98FF 20%,
#00affa 30%,
#0190cd 70%,
#FC96FF 80%
);
-webkit-background-clip: text;
background-clip: text;