Adding Fourth Widget Area and Change Color Combination In Pinstagram Theme

I have two topics in one thread

• First Topic

Using Pintagram theme for developing my brand new travel related website. The theme provided only three footer widget area. I wish to add a fourth one in the widget area. Tried some plugins but not giving a full satisfied customization.

• Second Topic

Want to change color code of menu bar, Footer widget area, and footer copyright section. Used some plugins and custom CSS codes for this. But not affected in this theme.

• Menu Color - #443266 (Font Color White)
• Body Background Color - #F1F0FF (Font Color Gray)
• Footer Widget Area Color - #443266 (Font Color White)
• Footer Copyright Area Color - #8C489F (Font Color White)

http://www.colorcombos.com/color-schemes/14/ColorCombo14.html

The link was given above show my desired color combination. Give your valuable knowledge and support to me ...

Thanks you

My Website TravelPuls.com

 

Hello there,

In order to add a 4th widget, you will have to tweak the theme... here is the steps (Please backup your files before trying this) :

1- Register the 4th widget :

Open Functions.php file and look for :

Enable Widgetized sidebar and Footer

Add this :

register_sidebar(array(
        'name' => 'Right Footer',
        'description'   => __( 'Appears in right side of footer.', 'mythemeshop' ),
        'id' => 'footer-3-1',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<div class="widget-wrap"><h3 class="widget-title">',
        'after_title' => '</h3></div>',
    ));

Code (markup):

Just before this :

register_sidebar(array(
        'name' => 'Right Footer',
        'description'   => __( 'Appears in right side of footer.', 'mythemeshop' ),
        'id' => 'footer-3',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<div class="widget-wrap"><h3 class="widget-title">',
        'after_title' => '</h3></div>',
    ));

Code (markup):

2- Open Footer.php and add this code :

<div class="f-widget f-widget-3-1">
                    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Footer') ) : ?><?php endif; ?>
                </div>

Code (markup):

Just before :

<div class="f-widget f-widget-3 last">
                    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Footer') ) : ?><?php endif; ?>
                </div>

Code (markup):

3- Now we have to let a space for the 4th widget, so to do that, open the theme's Style.css file :

Look for :

.f-widget {
background: url("images/divider.png") no-repeat right center rgba(0, 0, 0, 0);
color: #8D8D8D;
float: left;
margin-bottom: 10px;
margin-right: 4%;
padding-right: 4%;
position: relative;
width: 27.9%;
}

Code (markup):

Change the width from 27.9% to 17.9%
------------

For the widgets colors, you can try to add this on style.css :

.f-widget.f-widget-1 { 
background: #443266;
}

.f-widget.f-widget-2 { 
background: #C3C3E5;
;
}

.f-widget.f-widget-3-1 { 
background: #F1F0FF;
}

.f-widget.f-widget-3 last { 
background: #8C489F;
}

Code (markup):

Goodluck