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

<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

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

<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

Contact Form auto calculation

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….

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

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


Theme baskerville documentation and modification

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


Single Page Website
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

Lodestar theme By Automattic: Modifications of header, footer, sidebar, contents and documentations


Lodestar by Automattic

Lodestar is a trendy one-page theme designed with startups and small business ventures in mind.  Designed by Mel Choyce, Lodestar is perfect for your small business or organization’s website. The theme allows you to create a one-page website, showcasing all your company’s information in one spot, interspersed with full-sized featured images. It is almost similar to WordPress Twenty Seventeen Theme . Here i am sharing you some CSS code to style your Lodestar theme, which will help you to give your Lodestar theme a diffrent look of your own.

Download Lodestar theme By Automattic  if you want to use it in your own hosting.

Download Loadstar theme by Automattic Child theme  to do any sort of theme file editing.

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

Read more of this post

Dara By Automattic Modifications of header, footer, sidebar, contents and documentations


 

Theme Dara by Automattic documentation
With bold featured images and bright, cheerful colors, Dara is ready to get to work for your business.

Here I am sharing some css styling which you can use to styling your site  if you are using Dara by Automattic.

You can use my shared code 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 documentation

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.
Wordpress Ixion theme customization
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

theme photography for photographer
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

avada theme demo installation

Read more of this post

Divi support and modification: Making Divi background image slider clickable


Divi mage slider clickableBefore I shared  how to make your wordpress site secured. If you are using Divi Theme and trying to make the default Divi theme slider image to be clickable then this post is for you.

Here i have shared the technique  to make the divi full width slider image to be clickable.

Please Note:
1. in the code  .et_pb_slide_0  indicates the first slide…. but to use this code u have to change this depending on your slider number … you can use firebug to examine the html code.. or can take my help in comments section

2.You must need to use button URL as this code will use button technically

Read more of this post

WordPress Theme Natural by Organic Themes : Modifications, Styling and Documentation


theme natural by organic themes

Before I shared you how to make your  wordpress site secured. Now i am sharing  you customization and modification of  Theme Natural By Organic Themes.  Theme Natural  by organic themes is  a versatile business website and blog with a natural and earthy design.

Here  I am sharing you some css customization using which you can stylize your Natural theme little bit new look.

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

Read more of this post

%d bloggers like this: