change social media links in the side bar? How to change the color of the side bar?

aniakruk
asked 10 years ago

1. in DW Minion we have facebook, google+, youtube, twitter and linkedin option, meanwhile i’d like to use fb (checked), pinterest, instagram and tumblr. and, if it possible, direct link to my website (so lets say, the icon would be “WWW” for example). I can provide adecuate graphic icons, but I’m not sure how to replace the existing ones. the side bar structure seems to be complicated.

2. I tried to change the sidebar color, to match my corporate colors (I use minion as a blog for my company – website is http://www.aniakruk.pl, and the blog is to.my.aniakruk.pl ) – but I only seems to be able to change some part of the side bar, not all of it. is it possible?

Jonathan Chen
replied 10 years ago

Hi Aniakruk, I have a similar question too but how to add more social media icons? I installed this once but the icons don’t show up, similar to the ‘comment’,’post’ and ‘date’ icons. They show up as weird symbols…do you have any idea?

2 Answers

DominicStaff
answered 10 years ago

@Jonathan
To resolve the icon issue. Please add the following code to the style.css file

@import url("assets/inc/font-awesome/css/font-awesome.min.css");

DominicStaff
answered 10 years ago

Hi @Aniakruk !
To add more social media (example: pinterest, instagram and tumblr ) to the theme DW Minion. Please do as the following:
Step1: Open the extras.php file in the folder path “\wp-content\themes\dw-minion\inc”.
Step2: Add the following code to the line 210 -> 214.

 $social_links['pinterest'] = dw_minion_get_theme_option( 'pinterest', '' );
 $social_links['instagram'] = dw_minion_get_theme_option( 'instagram', '' );
 $social_links['tumblr'] = dw_minion_get_theme_option( 'tumblr', '' );

See the screenshot:

– Next, add the following code to the line 241 -> 245.

<?php if($social_links['pinterest']!='') { ?><li class="social"><a href="<?php echo $social_links['pinterest']; ?>"><i class="icon-pinterest"></i></a></li><?php } ?>
<?php if($social_links['instagram']!='') { ?><li class="social"><a href="<?php echo $social_links['instagram']; ?>"><i class="icon-instagram"></i></a></li><?php } ?>
<?php if($social_links['tumblr']!='') { ?><li class="social"><a href="<?php echo $social_links['tumblr']; ?>"><i class="icon-tumblr"></i></a></li><?php } ?>

See the screenshot:

Notice: you can find the Media Icon here: http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

Then change your icon that you want to display here: <i class=”icon-tumblr“>
Step3: Please open the customizer.php file in the folder path “\wp-content\themes\dw-minion\inc” then add the following code to the line 202.

// Demo add more social media --pinterest, instagram and tumblr---
  $wp_customize->add_setting('dw_minion_theme_options[pinterest]', array(
    'default'        => '',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
  ));
  $wp_customize->add_control('pinterest', array(
    'label'      => __('Pinterest', 'dw-minion'),
    'section'    => 'dw_minion_social_links',
    'settings'   => 'dw_minion_theme_options[pinterest]',
  ));
  
 $wp_customize->add_setting('dw_minion_theme_options[instagram]', array(
    'default'        => '',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
  ));
  $wp_customize->add_control('instagram', array(
    'label'      => __('Instagram', 'dw-minion'),
    'section'    => 'dw_minion_social_links',
    'settings'   => 'dw_minion_theme_options[instagram]',
  ));
 
 $wp_customize->add_setting('dw_minion_theme_options[tumblr]', array(
    'default'        => '',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
  ));
  $wp_customize->add_control('tumblr', array(
    'label'      => __('Tumblr', 'dw-minion'),
    'section'    => 'dw_minion_social_links',
    'settings'   => 'dw_minion_theme_options[tumblr]',
  ));

See the screenshot:

Step4: Log in to Dashboard > Theme > Customize > Social Links then add your link to the frame.
See the Screenshot:

– If you want to change the default icon of the social media with your icon. You can add your image to the Media, copy File URL.
See the screenshot:

Next, add the following code to the style.css file.

.icon-pinterest {
    background: url('File Url');
}
.icon-pinterest:before {
    content: none;
}

.icon-instagram {
   background: url('File Url');
}

.icon-instagram:before {
  content: none; 
}

2. To change the color for sidebar in the DW Minion. You can log in to Dashboard > Theme > Customize > Custom Code then add the following code to the “Header Script”

<style>
.site-actions i {
    background: #C60070;
    color: #FFFFFF;
}

.action.search label {
    background-color: #C60070;
    color: #fff;
}
body {
     background-color: #C60070;
}
.social {
     border-bottom-color: #fff;
}
.site-actions .actions > .action {
     border-bottom-color: #fff;
}
.site-actions .actions > .back-top {
    border-top-color: #fff;
}

.no-touch .site-actions .social:hover i {
    background: #FF1493;
    color: #FFFFFF;
}
.no-touch .action.search:hover label {
    background-color: #FF1493;
    color: #FFFFFF;
}
.action.search .search-query {
    background-color: #FF1493;
    color: #FFFFFF;
}
.action.search.active label {
    background: #C60070;
}
</style>

Hope this helps !