Wordpress CSS Customization, Web Development, Wordpress Tricks, Job Interview and Recruitment Guide
Seedlet by Automattic is a free WordPress theme which is designed to focus on typography allowing your writing and content to shine. If you want to use this theme, i have shared some css which you can use to change the design, like font, color, size etc of the theme.
You can download Seedlet by Automattic from WordPress Repository.
Download Child theme of Seedlet
You can contact me at om2000_cuet in my skype or can ask question in comments section
If you want to show company logo side by side and vertically centered, i have shared the related html and css for your convenience
HTML Part To Show Company Logos side by side
<div id="logos">
<span> <img src="https://allaboutbasic.files.wordpress.com/2020/08/jw-logo.png"> </span>
<span> <img src="https://allaboutbasic.files.wordpress.com/2020/08/printex-logo.png"> </span>
<span> <img src="https://allaboutbasic.files.wordpress.com/2020/08/sitepod-logo.png"> </span>
<span><img src="https://allaboutbasic.files.wordpress.com/2020/08/swingit-logo.png"></span>
</div>CSS Part To Show Company Logos Side by Side
#logos {
box-shadow: 11px 1px 8px 2px #888888!IMPORTANT;
padding: 10px;
margin-bottom: 24px;
margin-top: 1px;
overflow: hidden;
padding-top: 0px;
padding-bottom: 0px;
}
#logos span {
min-height: 160px;
max-height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #2b93d1;
height: 200px;
text-align: center;
margin-right: 0px!important;
padding-left: 50px;
padding-right: 50px;
width: 17%;
float: left;
}
div#logos img {
width: 100%;
}
@media (min-width: 320px) and (max-width: 668px) {
div#logos img {
width: auto !important;
height: auto !IMPORTANT;
}
div#logos span {
border: none !important;
border-bottom: 1px solid #2b93d1 !IMPORTANT;
display: block !IMPORTANT;
width: auto !important;
height: auto !IMPORTANT;
overflow: hidden;
max-height: 100%;
min-height: auto;
float: none;
padding-top: 50px;
padding-bottom: 50px;
}
div#logos {
width: 100%;
}
}
To change font size, color and font family of Header title in homepage
.main .post-archive article h2.entry-title {
font-size: 26px !IMPORTANT;
color: white !IMPORTANT;
font-family: cursive !important;
}
If you want to create a FAQ (Frequently Asked Question) page and want to show the Question & Answers in Accordion ( click and open), then you can use this code. Though there are plugins for that, but here I am sharing you the basic FAQ accordion html css and JQuery code so that you can use it without the use of plugins. Feel Free to message me in Skype if you need help.
JQuery Part
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('.faq-accordion .faq-content-container').hide();
jQuery('.faq-accordion > div:eq(0) .faq-accordion-title').addClass('active').next().slideDown();
jQuery('.faq-accordion .faq-accordion-title').click(function(j) {
var dropDown2 = jQuery(this).closest('div').find('.faq-content-container');
jQuery(this).closest('.faq-accordion').find('.faq-content-container').not(dropDown2).slideUp();
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
} else {
jQuery(this).closest('.faq-accordion').find('.faq-accordion-title').removeClass('active');
jQuery(this).addClass('active');
}
dropDown2.stop(false, true).slideToggle();
j.preventDefault();
});
});
</script> CSS Part
<style>
.faq-accordion{background:rgba(21,20,21,.8);border-bottom:none}
.faq-accordion p{color:white;}
.main-faq-accordion{position:relative;padding:140px 0;background:linear-gradient(to right,#17161a,#242124 50%,#17161a)}
.faq-accordion-box .faq-accordion-title{padding:12px 50px 11px 40px;border-top:1px solid rgba(255,255,255,.05);color:#fff;font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;position:relative;cursor:pointer;margin:0;box-sizing:border-box;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);-webkit-transition:color .2s ease-out,background-color .2s ease-out;-moz-transition:color .2s ease-out,background-color .2s ease-out;transition:color .2s ease-out,background-color .2s ease-out}
.faq-accordion-title .faq-accordion-mark{position:absolute;top:50%;right:40px;transform:translate(0,-50%);color:#fff;font-size:18px;transition:.3s}
.faq-accordion-title:hover .faq-accordion-mark,.faq-accordion-title.active .faq-accordion-mark{transform:translate(0,-50%) rotate(45deg)}
.faq-accordion .faq-accordion-box:first-child .faq-accordion-title{border-top:none}
.faq-accordion .faq-content-container{border-top:1px solid transparent;padding:30px 40px 48px 41px}
.faq-accordion .faq-content-container p{font-size:15px;margin-bottom:0}
.faq-accordion-title.active~.faq-content-container{border-color:#ff0e1f}
</style> HTML Part
<div class="faq-accordion">
<div class="faq-accordion-box">
<p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 1</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
<div class="faq-content-container" style="display: none;">
<p>1st Question Answer </p>
</div>
</div>
<div class="faq-accordion-box">
<p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 2</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
<div class="faq-content-container" style="display: none;">
<p>2nd Question Answer</p>
</div>
</div>
<div class="faq-accordion-box">
<p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 3</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
<div class="faq-content-container" style="display: none;">
<p>3rd Question Answer</p>
</div>
</div>
</div>
This code i used for one of my client and it works. Based on client’s requirement I redirect his site to different pages based on country ( Denmark, Netherlands, Poland, France and Germany. Here is the code:
<?php
$ip = $_SERVER['REMOTE_ADDR']; // This will contain the ip of the request
// You can use a more sophisticated method to retrieve the content of a webpage with php using a library or something
// We will retrieve quickly with the file_get_contents
$dataArray = json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));
//var_dump($dataArray);
// outputs something like (obviously with the data of your IP) :
// geoplugin_countryCode => "DE",
// geoplugin_countryName => "Germany"
// geoplugin_continentCode => "EU"
//echo "Hello visitor from: ".$dataArray->geoplugin_countryCode;
if($dataArray->geoplugin_countryCode=='DE'){
echo("<script>location.href = 'http://yoursiteurl.com/DE/';</script>");
}
else if($dataArray->geoplugin_countryCode=='NL'){
echo("<script>location.href = 'http://yoursiteurl.com/NL/';</script>");
}
else if($dataArray->geoplugin_countryCode=='FR'){
echo("<script>location.href = 'http://yoursiteurl.com/FR/';</script>");
}
else if($dataArray->geoplugin_countryCode=='PL'){
echo("<script>location.href = 'http://yoursiteurl.com/PL/';</script>");
}
else if($dataArray->geoplugin_countryCode=='IT'){
echo("<script>location.href = 'http://yoursiteurl.com/IT/';</script>");
}
else if($dataArray->geoplugin_countryCode=='DK'){
echo("<script>location.href = 'http://yoursiteurl.com/DK/';</script>");
}
else if($dataArray->geoplugin_countryCode=='ES'){
echo("<script>location.href = 'http://yoursiteurl.com/ES/';</script>");
}
else if($dataArray->geoplugin_countryCode=='PL'){
echo("<script>location.href = 'http://yoursiteurl.com/PL/';</script>");
}
?>
If you want to show Covid-19 Virus warning in your site, try to use this code. Put this in your header. It will be looked like the screenshot
<div id="icegram_messages_container" class="" style="background: black;text-align: center;color: white;padding: 12px;"><span class="left" style="font-weight: bold;">Important Patient Safety Information: Coronavirus (COVID-19)</span><span><a href="http://fiverr.brraprojects.com/" class="lmr" style="color: white; padding: 5px; background: white; color: black !important;margin-left: 12px;padding-right: 11px;font-weight: 400;border-radius: .25em;float: none;padding: .2em 1.3em;">Learn More</a> </span></div>
Here is the code, which needs to put in your theme’s function.php
function wpse_19692_registration_redirect() {
if( $role != 'administrator' ) {
return home_url( '/directory/' );
}
}
add_filter( 'registration_redirect', 'wpse_19692_registration_redirect' );
Generally Woocommerce product thumbnail images shows below the main image. But, if you want to show the woocommerce product thumbnail in any places (using shortcode) in the product content or details section then this post will help you. Here are the codes:
Code 1 : This will go in Appearance > Customize >Additional CSS
.bbloomer-thumbs .woocommerce-product-gallery__image {
width: 32.5%;
float: left;
margin-right: 1%;
}
.bbloomer-thumbs {
overflow: hidden;
margin-top: 20px;
}
.bbloomer-thumbs * {
border-radius: 0px !important;
box-shadow: none;
}
.bbloomer-thumbs .woocommerce-product-gallery__image:nth-child(3n) {
margin-right: 0px !important;
}Code 2 :These piece of code will go in your theme’s function.php
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
add_shortcode('thumbg', 'opc');
function opc( $atts) {
ob_start();
$path = WooCommerce::plugin_path();
include($path . '/templates/single-product/product-thumbnails.php');
$output='<div class="bbloomer-thumbs">';
$output .= ob_get_contents();
$output .='</div>';
ob_end_clean();
return $output;
}Now Put this shortcode [thumbg] where you want to show the woocommerce product thumbnail images.
If you are using any custom font in your site and during your first visit that font not showing or working, then put this code in your .htaccess file. That will solve the font loading issue.
<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Twenty Twenty now arrived and become the new WordPress default theme. Mainly it is designed with the flexibility of the block editor at its core but you can use Visual Composer or Elementor too. You can use it for your organization or business and also for your traditional blog, the centered content column and considered typography makes it perfect for that as well. Here I am sharing some CSS Modifications which you can use
Download Twenty Twenty Child Theme
Download Twenty Twenty Parent Theme from wordpress.com
