WordPress simple text rotator

One 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 ***************** /

<script>

(function($){
    $.fn.extend({ 
        rotaterator: function(options) {
 
            var defaults = {
                fadeSpeed: 500,
                pauseSpeed: 100,
				child:null
            };
             
            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);

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

</script>

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

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

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

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

2. Use Jquery code something like this

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

<script>

jQuery(document).ready(function(){
//alert("Welcome");
 var ce;
var ps;
var ar;
 

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

ps=(((ce/30))/5)*1.2;
ar=(((ps*1000)/250)*(0.941*1.65)*1.6);
jQuery("#ps").val(ps.toFixed());
jQuery("#ar").val(ar.toFixed());

}); 


});
</script>

3. Result

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

OR

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

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

Baskerville 2 is a dynamic, grid-based theme for curators. It’s the perfect way to showcase your posts, videos, images and galleries, and share your favorite quotes and links.

Here i am sharing css code to style your Baskerville theme. To use my provided css  I prefer you use  Simple Custom Css plugins ( if you have your own domain and hosting) .

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

Read more of this post

How to create Single Page website using twenty seventeen theme: Click on menus and it will scroll to the target/related content without refreshing

Before i shared you CSS customization of Twenty Seventeen theme. Today I am sharing you how to create Single Page Website using Twenty Seventeen Theme.

In Single Page Website, when you will click on menus, it will go scrolling to the related point or content in homepage.

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

Read more of this post

Twenty Seventeen Theme: Modifications of header, footer, sidebar, contents and documentations

Twenty Seventeen theme is a new theme by WordPress.org and wordpress.com.  It is the chain theme which comes after 2016 (twenty sixteen) , 2014 (twenty fourteen) ,2013 (twenty thirteen),2012 (twenty twelve). Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.Twenty seventeen theme comes with the latest update of wordpress 4.7.  Here  I have shared some  css code to stylize your twenty seventeen theme.

For wordpress.org users  you have to  install   Simple Custom Css  plugins to use my provided css.

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

Read more of this post

WordPress theme Ixion By Automattic: header,footer,sidebar,template modifications and styling

Before I shared you the code related to theme photograply by theme Foundry . Today I am sharing you customization tricks of newly released Ixion theme by Automattic. WordPress theme Ixion By Automattic is a theme for non-profits, organizations, and schools.

Question 1: How to change top social icons color in  Ixion By Automattic

.site-header .jetpack-social-navigation a::before {
color: red !important;
}
You can use my shared code and ask question in the comments section.

Read more of this post

WordPress theme Photography by The Theme Foundry Customization using css style

Before I shared Photographer by Organic themes  modifications and styling issues. Here now I am sharing the styling and modifications of  Photography By The Theme Foundry   which is a WordPress.com premium theme built for photographers. It includes easy to use galleries, and two gorgeous color schemes. You can check the demo of Photography theme

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

Read more of this post

Avada Theme: Documentation, Support, Customization and Modifications using CSS style and more

1. How to install Avada theme Demo in my hosting?
Answer: After installing wordpress and Avada theme go to your Dashboard > Avada > Install Demo and you will get the various demos of your choice..just click on install button and it will be installed in your Avada theme … please check the screenshot

Read more of this post