Radcliffe 2 By Anders Norén :Modifications of header, footer, sidebar, contents, customization and documentations

Radcliffe 2 By Anders NorénAnders Norén is the creator of Baskerville 2 and Radcliffe 2 wordpress theme. Radcliffe 2 is a theme for bloggers who want their content to take center stage. It comes free with wordpress.com. Though I am sharing you the zip of  Radcliffe 2 theme along with child theme which you can download from here and also I am sharing  here some CSS customization using which you can use to make your site beautiful or to give some extra touch of your wish.

Download Radcliffe 2 By Anders Norén Main / Parent theme

Download Radcliffe 2 By Anders Norén Child theme

Read more of this post

WordPress simple text rotator

wordpress text rotatorOne of my client asked to add a text rotator in her site. I searched for plugins for that but didn’t appropriate free plugins for that. At last i got a piece of jquery code which at last I used to make the work done.

The code has two (2) parts.

1. Jquery code which you can put either in your theme’s header.php or in theme option (if your theme provides option to add script)

2. The HTML and Text portion, which you can put in any portion of your site where you want to show the text rotator.

Here I am sharing you the code.

If you have any issue feel free to let me know in comments section or take my personal help.

/***************** First Part Jquery code ***************** /


        rotaterator: function(options) {
            var defaults = {
                fadeSpeed: 500,
                pauseSpeed: 100,
            var options = $.extend(defaults, options);
            return this.each(function() {
                  var o =options;
                  var obj = $(this);                
                  var items = $(obj.children(), obj);
				  items.each(function() {$(this).hide();})
				  if(!o.child){var next = $(obj).children(':first');
				  }else{var next = o.child;
				  $(next).fadeIn(o.fadeSpeed, function() {
						$(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
							var next = $(this).next();
							if (next.length == 0){
									next = $(obj).children(':first');
							$(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});

 jQuery(document).ready(function() {
        jQuery('#rotate').rotaterator({fadeSpeed:500, pauseSpeed:400});


/***************** Second Part HTML and Text ***************** /

<div id="rotate">
 <div style="display: block; opacity: 0.90557;">
 This is first text to rotate.
 <div style="display: none;" class="red">
This is second text to rotate.

Traction By The Theme Foundry: Documentation, Support and Modification of Header, Footer,Sidebar, Links, Text fonts and more

A super clean magazine theme featuring built-in post thumbnail support, a featured post slider, and a robust theme options menu. You can check the Demo of Traction Theme.  If you are using wordpress.com then you can get it free in premium plan  or if you are using personal plan then you need to pay $68 to use that theme.

Here I am sharing you some css customization using which you can give the Traction theme by theme foundry a new look of your choice.

Read more of this post

Make Woocommerce single product page image round shape with border

woocommerce single product page image round shape with border


This is a simple css trick to make your woocommerce single product page to be round shape with a border. Use the code below in your  custom css portion.

If you face any issue feel free to take help in the comments section.


.woocommerce-product-gallery__image img {

border-bottom-left-radius: 50% 50% !important;
border-top-left-radius: 50% 50% !important;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50% !important;
height:382px !IMPORTANT;
border: 5px solid #f5f5f5 !important;

.woocommerce-product-gallery__image {
width: 382px !IMPORTANT;


.woocommerce div.product div.images li img {
border: none !important;
transition: opacity .5s ease;
border-radius: none !important;
height: auto !important;


How to add auto calculation fields or calculator in Contact Form 7 using Jquery

This tutorial is only for those who are trying to add calculator fields like where user will put value in one field and some calculation will be done automatically and result will be viewable in other single or multiple fields in contact form.

This technique I have shared is for advance level users who have knowledge of Jquery and using Contact form 7 . If you are new or facing problem to implement such type of fields, feel free to message me in comments section or take my personal help in my fiverr profile.

Here is the technique

1. At first put your calculator fields where you want to do or show calculation

calculator field in contact form 7

2. Use Jquery code something like this

Calculation and value show in contact form 7 field

I have shared you the Jquery auto calculation code for contact form 7 below


 var ce;
var ps;
var ar;

jQuery("#ce").on("change", function() {
 ce= this.value ;




3. Result

Contact Form auto calculation

If you have any issue feel free to ask me question here in comments section


Pay me some, I will help you for CSS Issue Personally CLICK HERE….

Independent Publisher 2 by Raam Dev : Modifications of header, footer, contents, customization and documentations

Independent Publisher 2 by Raam Dev

Independent Publisher 2 is a clean and polished theme with a light color scheme, bold typography, and full-width images. To use my provided css code you can try Simple Custom Css plugins.

 Download  Independent Publisher 2  theme by Raam Dev

 Download Independent Publisher 2 Child Theme

So You can use my shared code and ask question in the comments section.

Read more of this post

%d bloggers like this: