What’s Additional CSS
Benefits of using Additional CSS.
Most Common Mistake I Commit while using Additional CSS
- I often forget to use the dot (.) before any class.
- Improper Closing tag (curly brackets) like {}.
Additional CSS Codes
Global Setting
// Applying Smooth Scrolling to all elements
html {
scroll-behavior: smooth;
}
//Removing Default 2px outline
:focus {
outline:none;
}WordPress Style Guide: Elements Specifics CSS
Header & Navigation Menu
Header section can be achieved by both Columns & Group Block.
/* Top Menu */
.wp-block-navigation-submenu {
border-radius: 12px;
}
.wp-block-navigation ul li {
list-style: none;
padding: 5px;
border-radius: 16px;
}
.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
color: blue;
border: 1px solid blue;
padding: 6px;
border-radius: 50px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}Highlighting Current Page in Navigation Bar
1. Try this CSS:
.sidebar li.wp-block-navigation-item.current-menu-item a {
color: red;
background-color: yellow;
}2. Try this CSS:
.sidebar .wp-block-navigation ul{
flex-direction: column;
}
.wp-block-navigation ul li,.wp-block-navigation ul li a{
width: 100%;
text-align: center;
}/* Optional: Add a background overlay for the rest of the screen */
body.menu-open::after {
content: '';
position: fixed;
top: 0;
left: 50%;
width: 50%;
height: 70%;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.menu-open .wp-block-navigation__responsive-container {
transform: translateX(0);
}
/* Optional overlay */
body.menu-open::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
/* Semi-transparent overlay */
z-index: 9998;
transition: opacity 0.4s ease-in-out;
opacity: 1;
}
}
@media (max-width: 768px) {
.menu-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: blue;
}
// Add "Menu" or "Close" text using ::before
.menu-toggle::before {
content: attr(data-text);
margin-right: 10px;
color: blue;
font-size: 16px;
display: inline-block;
}
// Change the text dynamically based on aria-expanded
.menu-toggle[aria-expanded="false"]::before {
content: "Menu";
}
.menu-toggle[aria-expanded="true"]::before {
content: "Close";
}
}
// Change the WordPress default CSS breakpoints media query
@media ( min-width: 782px ) {
.wp-block-navigation.nav-top--mobile {
display: none;
}
}
@media ( max-width: 781px ) {
.wp-block-navigation.nav-top--desktop {
display: none;
}
.wp-block-navigation.nav-top--mobile .wp-block-navigation__responsive-container {
animation: slide-out 0.5s forwards;
-webkit-animation: slide-out 0.5s forwards;
padding: var(--wp--style--root--padding-top,2rem)
var(--wp--style--root--padding-right,2rem)
var(--wp--style--root--padding-bottom,2rem)
var(--wp--style--root--padding-left,2rem);
}
.wp-block-navigation.nav-top--mobile .wp-block-navigation__responsive-container.is-menu-open {
animation: slide-in 0.5s forwards;
-webkit-animation: slide-in 0.5s forwards;
}
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{
padding-top: calc(2rem + 24px);
}
.wp-block-navigation.nav-top--mobile .wp-block-navigation__responsive-dialog {
gap:inherit;
}
.wp-block-navigation.nav-top--mobile :where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)){
padding: 0;
}
}
/** animation slide-in-out **/
@keyframes slide-in {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0%);
}
}
@-webkit-keyframes slide-in {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
@keyframes slide-out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
@-webkit-keyframes slide-out {
0% {
-webkit-transform: translateX(0%);
}
100% {
-webkit-transform: translateX(100%);
}
}.wp-block-navigation .wp-block-navigation-iteam:hover {
color: blue;
font-weight: bold;
border-bottom: 1px solid blue
}Column Reversing⭐ ✨
Method 1: Targeting specific column for Reverse Order
// Column Reverse on Mobile Phone
@media only screen and (max-width: 768px) {
.wpio-right-column {
order: -1; /* Reverses the order of right column */
}
}Method 2: Targeting both column for Reverse Order
Column Radius
/* Column Radius*/
.wpio-column-radius {
border-radius: 16px;
}Paragraph: Text Justification
// To Justify text Alignment
.wpio-justify-text {
text-align: justify;
}
.wpio-word-spacing {
word-spacing: 5px;
}Group Block | for Query Loop
Customizing height of Group Block for different Devices
/* CSS for desktop & mobile view */
// Desktop
@media (min-width: 1024px) {
.wcpn-group-block {
height: 300px; /* Set your desired height */
}
}
//Mobile Device
@media (max-width: 1024px) {
.wcpn-group-block {
height: auto; /* It ensures no height restriction */
}Row Block as Marquee for “Our Clients” section
Buttons
Default syntax of button block is
.wp-block-buttons {
//CSS Properties Goes here.
}Defining button Colors in different States.
Observation: I think, the following code is used in WP Classic Themes. Why? Compare wp-element-button and wp-block-button
.wp-block-buttons:hover {
background-color: --wp--preset--color--contrast-2;
color: white;
}
:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
background-color: var(--wp--preset--color--contrast-2);
border-color: var(--wp--preset--color--contrast-2);
color: var(--wp--preset--color--base);
}I’m building my website on WordPress CRM and currently, I’m working on the “header Section”. In the initial phase, when I’m accessing the site on any device, the header should be transparent with the Site logo, the site name or tagline and menus. This should be easily accessible with 100 VH.When I’m scrolling my site downward. I want additional CSS to make my header background white, the logo size should be reduced by at least 20% and the site name should be hidden.
/* Initial header styles */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: transparent! important;
transition: background-color 0.1s ease;
}
.site-header .logo img {
max-height: 100px; /* Adjust as needed */
transition: max-height 0.1s ease;
}
.site-header .site-info {
display: block; /* Initially shown */
}
.site-header .site-tagline {
display: block; /* Initially shown */
}
.site-header .site-tagline, .site-header .site-title {
color: #fff; /* Adjust text color */
margin: 0;
}
.site-header .site-navigation {
/* Your menu styles */
}/* Scrolled header styles */
body.scrolled .site-header {
background-color: #fff !important;
}
body.scrolled .site-header .logo img {
max-height: 80px; /* Reduce logo size */
}
body.scrolled .site-header .site-info {
display: none; /* Hide site info */
}Floating Bar
Reference Site: Learn with Vivek
Also learn how the developer has built the “Timeline” section.
<style>
#floating-bar {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background-color: #2b2b2b;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
z-index: 1000;
width: auto;
display: none; /* Initially hidden */
align-items: center;
justify-content: center;
color: white;
}
#floating-bar a {
display: inline-block; /* Ensures the link behaves like a block-level element */
}
#floating-bar button {
margin-left: 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #d8613c;
color: white;
cursor: pointer;
font-size: 16px;
width: auto;
}
#floating-bar button:hover {
background-color: #c54f2f;
}
@media (max-width: 600px) {
#floating-bar {
width: 90%; /* Adjust width as needed */
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
}
#floating-bar span {
flex: 1; /* Allows text to take up available space */
text-align: center; /* Center text horizontally */
}
#floating-bar button {
width: 100%; /* Adjust width as needed */
padding: 12px;
margin: 0;
font-size: 16px; /* Increased text size for mobile */
}
}
</style>
<div id=”floating-bar” style=”display: flex;”>
<span>Start Your Journey </span>
<a href=”https://learnwithvivek.com/pricing-in/” rel=”noopener”>
<button>Join Now!</button>
</a>
</div>
<script type: “text/javascript”>
window.addEventListener(‘scroll’, function() {
const floatingBar = document.getElementById(‘floating-bar’);
if (window.scrollY > 90) {
floatingBar.style.display = ‘flex’; // Show the bar when scrolled
} else {
floatingBar.style.display = ‘none’; // Hide the bar when at the top
}
});
// Initial check to hide the floating bar on page load
window.addEventListener(‘load’, function() {
const floatingBar = document.getElementById(‘floating-bar’);
floatingBar.style.display = ‘none’; // Ensure it’s hidden on initial load
});
</script>
Forminator Additional CSS
.forminator-input {
border: 1px solid EDEDED;
line-height: 28px;
border-radius: 25px;
}
.forminator-textarea {
border: 1px solid EDEDED;
border-radius: 12px;
}
.forminator-button-submit {
border-radius: 25px;
padding: 10px 25px;
}Modern Crazy Sytles
Glass Effect
// Glass Effect From https://css.glass
.wpio-glass {
background: rgba(255, 255, 255, 0.28);
border-radius: 0 0 16px 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
// Button Placeholder style - Since buttons appear in various blocks, let’s use a placeholder to keep them all in-sync
button:active, .button:active, input:active[type="submit"], .wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active
%button-style { @include crop-text(var(--button--line-height));
color: var(--button--color-text);
cursor: pointer;
font-weight: var(--button--font-weight);
font-family: var(--button--font-family);
font-size: var(--button--font-size);
background-color: var(--button--color-background);
border-radius: var(--button--border-radius);
border-width: 0;
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
transition: var(--button--transition-hover);
&:active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
}
&:hover,
&:focus,
&.has-focus {
color: var(--button--color-text-hover);
background-color: var(--button--color-background-hover);
}
}// Onsale Placeholder style - Since buttons appear in various blocks, let’s use a placeholder to keep them all in-sync
%onsale-style {
border-radius: 100%;
border: none;
background-color: var(--global--color-alert-warning);
color: var(--global--color-foreground-dark);
display: flex;
justify-content: center;
align-items: center;
font-size: var(--global--font-size-xs);
font-weight: 700;
font-family: var(--global--font-primary);
min-height: 3.236rem;
min-width: 3.236rem;
padding: 0.202rem;
position: absolute;
text-align: center;
text-transform: none;
line-height: 3.236;
top: -0.5em;
left: -0.5em;
margin: 0;
z-index: 9;
width: 70px;
height: 70px;
&.preorder {
width: unset;
height: unset;
}
}