Wordpress CSS Customization, Web Development, Wordpress Tricks, Job Interview and Recruitment Guide
The main requirement was, to show sidebar in static homepage in twentyseventeen theme with comments form. Check the screenshot
Solution
I have created a template,named Home Sidebar for twentyseventeen theme . I am sharing the template with you
Put this template in your twentyseventeen theme folder and use it to create page with sidebar and comments form.
Here I am sharing you the latest theme Varia and the child themes created using this theme. I have shared the css codes which is applicable for all the child themes of Varia.
YOGA BASED INSTITUTION CHILD THEME BALASANA
ONLINE BUSINESS CHILD THEME SHAWBURN
EDUCATIONAL INSTITUTIONS BASED CHILD THEME STRATFORD
ORGANIZATION OR PERSONAL BASED CHILD THEME ALVES
ENTREPRENEURS AND SMALL BUSINESS OWNERS BASED CHILD THEME REDHILL
AGRICULTURE BUSINESS BASED CHILD THEME BARNSBURY
IMPRESSIVE PORTFOLIO OR PROJECT BASED CHILD THEME DALSTON
The CSS IS APPLICABLE FOR ALL CHILD THEME OF VARIA THEME. CHILD THEMES ARE SHARED AT THE BOTTOM OF THE POST
Morden is a functional and responsive multi-purpose theme that is the perfect solution for your business’s online presence. You can see Modern theme demo here. It is actually the Child theme of Varia. So, if you want to use it in your hosting, then you need to use Varia theme as Parent theme.
To change Font size, color and font family of BlockQuote in Gutenberg Editor
blockquote.wp-block-quote, blockquote, blockquote p {
font-size: 23px !important;
color: darkred !important;
font-family: cursive !important;
font-style: italic !important;
text-transform: uppercase;
line-height: 27px !important;
}
To change header ( say h5) font size, color, italic style, uppercase and more in Gutenberg Editor
.wp-block-column h5 {
font-size: 20px !important;
color: darkred;
font-family: cursive;
text-transform: uppercase;
text-align: center;
font-style: italic;
border-bottom: 2px solid red;
}
In Single page if you want to change the Page Titl’e font size, color, uppercase , alignment in Gutenberg Editor ( applicable for single post too)
h1.entry-title {
font-size: 27px;
color: darkred !important;
font-family: cursive !important;
font-style: italic !important;
text-transform: uppercase !important;
text-align: center !important;
}
Radiate By ThemeGrill is a clean, creative and minimal personal blogging responsive WordPress theme. The theme has full width slider to highlight some of your unique posts and has featured pages section to tell more about you. Just focus on writing beautiful content and everything else will be handled by this theme in a simple manner.
Recently one of my client ask me to solve the issue which you are seeing in the screenshot. I searched a lot in internet and support forums and found woocommerce has some issue with structured data and I didn’t find any good plugins which can help me solving this.
As woocommerce is generating the structured data, to solve this issue I blocked the “application/ld+json” related code generating by woocommerce. Just do this steps.
4. Go to \includes\class-wc-structured-data.php
5. Block this line (put // just before this line)
echo '<script type="application/ld+json">' . wc_esc_json( wp_json_encode( $data ), true ) . '</script>';
6. Now check again your page / product using this . Issue will not be showing now
https://search.google.com/structured-data/testing-tool
If You Have Any Better Solution Feel Free To Let Me Know In The Comments Section
Button 2 is a theme that’s as cute as its name. With detailed accents, featured images, and a soft color palette, Button 2 is perfect for crafters and designers. So, if you want to show your Craft and Design related work in a website, then this wordpress theme is for you. You can use it for free. You can see the Demo of Button2 theme.
Download Button2 Theme by Automattic Parent Theme
Download Button 2 by Automattic Child Theme
I have shared some css customization process of Button2 theme.You can use the codes i shared to give it a new look of your own. Also you can ask question regarding any issue you are facing in comments section.
Recently one of my client asked me to do the following
1. Client created a Webinar (thirdparty) and wanted to show that while going to his Website.
2. He requested to show that Webinar without Redirecting to that site but creating Mask
3. Below is the code which can be used to show any thirdparty Webinar or other pages in your own page.
4. Iframe is not used, Frameset is used
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Your Title </title> </head> <frameset rows="100%,*" border="0"> <frame src="THE WEBPAGE URL YOU WANT TO SHOW" frameborder="0" /> <frame frameborder="0" noresize /> </frameset> </html>
Recently one of my client asked me to show a Age Restriction Popup while clicking on a specific menu item.
So, the requirement was
Here is the screenshot how the final Popup was looking
You can ask question regarding any issue you are facing in comments section.
Inspired by this script. I have converted that script in a small WordPress Plugins. So, if you want bugs and fruit flies walk on your page you can use that plugins. You can check the Demo.
Just install the plugins created by me, activate it and check the homepage.
If you enjoy the plugins. Please let me know in comments section.
🙂
Bugs and Fruit flies walking on your wordpress site.
