Return to previous page

How to change entire background colour of Footer and social media icons?

This topic has 10 replies, 3 voices, and was last updated 9 years, 1 months ago ago by Robert Hall

Michaela

Participant

May 13, 2016 at 05:59

Hello,

I am trying to simplify the default footer. As you can see the colour I want is in a strip over the default footer colour – How do I change the entire footer colour to the colour I want #2C373C (a blue grey). Also how do I remove the line and make the footer colour smaller in height?

Also I only want Facebook, Pinterest and LinkedIn icons – How do I change or where do I go to change the ‘SHARE’ code? At the moment I have the code ‘SHARE’ in the ‘Footer Link’ widget area.

Link below:
https://www.dropbox.com/s/ewtfghbef3y87ht/Screen%20Shot%202016-05-13%20at%202.18.47%20pm.png?dl=0

Thank you.

Copied Theme version: RoyalStore v 0.0.1 - Doctor

9 Answers

Michaela

Participant

May 13, 2016 at 06:48

Hi another small glitch,

I am trying to insert an image under my headline as shown in my snapshot below:

https://www.dropbox.com/s/10lg35pxhdvthir/Screen%20Shot%202016-05-13%20at%203.12.55%20pm.png?dl=0

I want it centred but when I go to save changes it aligns to the left. I have set it to centre visually and in the media library. Why? Please help.

Thank you so much.

Copied Theme version: RoyalStore v 0.0.1 - Doctor

Robert Hall

Participant

May 13, 2016 at 07:36

Hello,

You can edit social icons in the \wp-content\themes\royal\framework\shortcodes.php file.
Find // ! Share This Product section and you’ll see code there.

Please provide us with link to the page and wp-admin access in Private Content.

Regards,
Robert Hall

Copied

Michaela

Participant

May 13, 2016 at 14:38

Hi I have provided you with a link to the footer issues. I am using MAMP on my desktop so unsure as to if you can access my site – here is the footer link:

http://localhost/My_Fair_Tradie_7/

And here is my image glitch as mentioned earlier. The pink image won’t centre?

http://localhost/My_Fair_Tradie_7/wp-admin/post.php?post=22076&action=edit

Thank you.

Copied Theme version: RoyalStore v 0.0.1 - Doctor

Jack Richardson

Support staff

May 13, 2016 at 16:20

Hello,

Please upload your site to any web host so we can check this issue.

Thank you.

Best regards,
Jack Richardson.

Copied

Michaela

Participant

May 14, 2016 at 02:12

Hi Jack,

I don’t have any hosting at this stage. Could you just give me the path to:

\wp-content\themes\royal\framework\shortcodes.php

Where do I find this file? and the correct code for social links Facebook, Pinterest and LinkedIn.

Also how do I change the full width background colour of the default Footer2? It is set as dark at this stage.

Also any ideas on the centred issue for my image under my heading?

Some advice would be great 🙂

Copied Theme version: RoyalStore v 0.0.1 - Doctor

Michaela

Participant

May 16, 2016 at 01:25

Thank you I have worked out how to centre the graphic.

Ho do I change the entire background colour of the default footer? and

I have also found the right code but am unsure as to what to change. I just want Facebook, Pinterest and Linkedin. The code is below:

// **********************************************************************// 
// ! Share This Product
// **********************************************************************// 

add_shortcode('share', 'etheme_share_shortcode');
if(!function_exists('etheme_share_shortcode')) {
	function etheme_share_shortcode($atts, $content = null) {
		extract(shortcode_atts(array(
			'title'  => '',
			'text' => '',
			'tooltip' => 1,
	        'twitter' => 1,
	        'facebook' => 1,
	        'pinterest' => 1,
	        'google' => 1,
	        'mail' => 1,
			'class' => ''
		), $atts));
		global $post;
		if(!isset($post->ID)) return;
	    $html = '';
		$permalink = get_permalink($post->ID);
		$tooltip_class = '';
		if($tooltip) {
			$tooltip_class = 'title-toolip';
		}
		$image =  etheme_get_image( get_post_thumbnail_id($post->ID), 150,150,false);
		$post_title = rawurlencode(get_the_title($post->ID)); 
		if($title) $html .= '<span class="share-title">'.$title.'</span>';
	    $html .= '
	        <ul class="menu-social-icons '.$class.'">
	    ';
	    if($twitter == 1) {
	        $html .= '
	                <li>
	                    <a href="https://twitter.com/share?url='.$permalink.'&text='.$post_title.'" title="'.__('Twitter', ET_DOMAIN).'" target="_blank">
	                        <i class="ico-twitter"></i>
	                        <svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" class="circle">
	                                <circle cx="19" cy="19" r="18" fill="rgba(255,255,255,0)" stroke="#000000"></circle>
	                        </svg>
	                    </a>
	                </li>
	        ';
	    }
	    if($facebook == 1) {
	        $html .= '
	                <li>
	                    <a href="http://www.facebook.com/sharer.php?u='.$permalink.'&images='.$image.'" title="'.__('Facebook', ET_DOMAIN).'" target="_blank">
	                        <i class="ico-facebook"></i>
	                        <svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" class="circle">
	                                <circle cx="19" cy="19" r="18" fill="rgba(255,255,255,0)" stroke="#000000"></circle>
	                        </svg>
	                    </a>
	                </li>
	        ';
	    }

	    if($pinterest == 1) {
	        $html .= '
	                <li>
	                    <a href="http://pinterest.com/pin/create/button/?url='.$permalink.'&media='.$image.'&description='.$post_title.'" title="'.__('Pinterest', ET_DOMAIN).'" target="_blank">
	                        <i class="ico-pinterest"></i>
	                        <svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" class="circle">
	                                <circle cx="19" cy="19" r="18" fill="rgba(255,255,255,0)" stroke="#000000"></circle>
	                        </svg>
	                    </a>
	                </li>
	        ';
	    }

	    if($google == 1) {
	        $html .= '
	                <li>
	                    <a href="http://plus.google.com/share?url='.$permalink.'&title='.$text.'" title="'.__('Google +', ET_DOMAIN).'" target="_blank">
	                        <i class="ico-google-plus"></i>
	                        <svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" class="circle">
	                                <circle cx="19" cy="19" r="18" fill="rgba(255,255,255,0)" stroke="#000000"></circle>
	                        </svg>
	                    </a>
	                </li>
	        ';
	    }

	    if($mail == 1) {
	        $html .= '
	                <li>
	                    <a href="mailto:enteryour@addresshere.com?subject='.$post_title.'&body=Check%20this%20out:%20'.$permalink.'" title="'.__('Mail to friend', ET_DOMAIN).'" target="_blank">
	                        <i class="ico-envelope"></i>
	                        <svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" class="circle">
	                                <circle cx="19" cy="19" r="18" fill="rgba(255,255,255,0)" stroke="#000000"></circle>
	                        </svg>
	                    </a>
	                </li>
	        ';
	    }
	    
	    $html .= '
	        </ul>
	    ';
		return $html;
	} 
}

Thank you.

Copied

Robert Hall

Participant

May 16, 2016 at 10:55

Hello,

1) Please try to add this code in Global Custom CSS.

.main-footer {
    background: #C11 !important;
}

2) In this case set the value ‘1’ for socials icons which should be used.

extract(shortcode_atts(array(
		'title'  => '',
		'text' => '',
		'tooltip' => 0,
	        'twitter' => 1,
	        'linkedin' => 1,
	        'facebook' => 1,
	        'pinterest' => 0,
	        'google' => 0,
	        'mail' => 0,
		'class' => ''
), $atts));

and add the following code before if($twitter == 1).

if($linkedin == 1) {
$html .= '<li><a href="your link here"><i class="ico-linkedin"></i><svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" class="circle"><circle cx="19" cy="19" r="18" fill="#fff" stroke="#000000"></circle></svg></a></li>';
}

Please see screenshot how it should be: http://prntscr.com/b4mhyg

Regards,
Robert Hall

Copied

Michaela

Participant

May 16, 2016 at 12:03

Thank you I am in the midst of changing the social media icons – unfortunately the background colour didn’t work, link below:

https://www.dropbox.com/s/xuzb5okui38w2eu/Screen%20Shot%202016-05-16%20at%208.27.47%20pm.png?dl=0

Any other suggestions.
Thank you.