Lynda Karr
asked 9 years ago

I just purchased DW Focus to run on WordPress 4.3. I installed the theme though WordPress (uploading zipped folder), but I can’t find any way to edit the widgets in the editor. For example, I’d like to change the color of the tabs in the tabs widget, or the size of the headline in the DW slider, or the size of the rules, etc. When I expand the zipped folder on my computer, I see that there is a folder for widget css. How can I get that to appear within the WP editor? I know there is a place to add css, but I’m not sure what the coding would be.

2 Answers
DominicStaff
answered 9 years ago

Hi,
If you want to change the color for the DW Tabs widget, you can try to using the following code in the Custom CSS (Dashboard > DW Focus > General):

.nav-tabs {
   background: #000;
}
.nav-tabs .active a, .nav-tab .active a:hover {
    position: relative; 
    color: #fff !important;
    background: #ee3224 !important;
    height: 43px !important;
}
.nav-tabs li {
   margin-bottom: 0px;
}
.nav-tabs li.active a, .nav-tabs li.active a:hover, .nav-tabs li.active a:focus {
   border: none;
}
.nav li a:hover, .nav li a:focus {
    background-color: #111;
}
.nav-tabs li a {
    border: none;
    height: 43px;
    color: #fff;
}

Then add the following code to the style.css file:

.nav-tabs .active a:before, .nav-tabs .active a:hover:before {
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid #EE3224;
   bottom: -6px;
   content: "";
   height: 0px;
   left: 50%;
   margin-left: -6px;
   position: absolute;
   width: 0px;
}

About DW Slider widget:

.dw_focus_widget_news_slider .carousel-entry .carousel-caption a, .widget_news-slider .carousel-entry .carousel-caption a {
  color: #fff;
}
.dw_focus_widget_news_slider .carousel-title-indicators li, .widget_news-slider .carousel-title-indicators li {
  color: #...;
}
.dw_focus_widget_news_slider .carousel-title-indicators li.active, .widget_news-slider .carousel-title-indicators li.active {
  color: #...; 
}
.dw_focus_widget_news_slider .carousel-title-indicators li.active:before, .widget_news-slider .carousel-title-indicators li.active:before {
  background: #...; 
}
.dw_focus_widget_news_slider .carousel-navigation, .widget_news-slider .carousel-navigation {
  background: #...; 
}
.dw_focus_widget_news_slider .carousel-entry .cat-links, .widget_news-slider .carousel-entry .cat-links {
  background: #...; 
   color: #...;
}

You can open the dw-focus.css & dw-focus.min.css file in the wp-content\themes\dw-focus\assets\css folder to find and change the color for some section that you want.
Also, you can change the color in the Dashboard > DW Focus > General.

NOTE: If you still face there issue, you can tell me detail about the position and what you want to change, I will help you resolve it.
Hope this helps !

freelance2
replied 9 years ago

Thank you! I was able to change colors but could not change the colors in the main menu (I want to change the red in the active and rollovers to a blue). Is that possible to do?

dominic Staff
replied 9 years ago

You can use the following code:

.navbar-default .navbar-nav  li  a:hover, .navbar-default .navbar-nav  li  a:focus {
    color: #...;
}
.navbar-default .navbar-nav  .active  a, .navbar-default .navbar-nav  .active  a:hover, .navbar-default .navbar-nav  .active  a:focus {
    color: #...;
}
.main-navigation .dw-sub-menu  li  a:hover, .main-navigation .dw-sub-menu  li  a:active {
    color: #...;
}

Hope this helps !

freelance2
replied 9 years ago

Thank you. I am wondering: did I make a mistake by simply uploading the 1.2.6 and not uploading the 1.1 first? I can’t seem to access things in the Editor that are accessible when I open the php files from 1.1. For example, I can’t edit the Social Media/User/RSS icons in 1.2.6 (this is all I have — see below)
<div class="hidden-xs hidden-sm"><?php dw_focus_social_links(); ?>

But in 1.1, there is this:
// Social links
$facebook = dw_get_option('dw_facebook');
$twitter = dw_get_option('dw_twitter');
$gplus = dw_get_option('dw_gplus');
$linkedin = dw_get_option('dw_linkedin');
$feedlink = dw_get_option('dw_feedlink', false);
$loginlink = dw_get_option('dw_loginlink', false);
$youtube ="test";
$pinterest="test";
?>
<ul class="social-links visible-desktop">
<?php if( $facebook ) { ?>
<li class="facebook"><a target="_blank" href="<?php echo $facebook; ?>" title="<?php _e('Facebook','dw-focus') ?>"><i class="icon-facebook">
<?php } ?>
<?php if( $twitter ) { ?>
<li class="twitter"><a target="_blank" href="<?php echo $twitter; ?>" title="<?php _e('Twitter','dw-focus') ?>"><i class="icon-twitter">
<?php } ?>
<?php if( $gplus ) { ?>
<li class="google-plus"><a target="_blank" href="<?php echo $gplus ?>" title="<?php _e('Google Plus','dw-focus') ?>"><i class="icon-google-plus">
<?php } ?>
<?php if( $linkedin ) { ?>
<li class="linkedin"><a target="_blank" href="<?php echo $linkedin ?>" title="<?php _e('Linked in','dw-focus') ?>"><i class="icon-linkedin">
<?php } ?>
<?php if( $feedlink ) { ?>
<li class="rss"><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Rss','dw-focus') ?>"><i class="icon-rss">
<?php } ?>
<?php if( $loginlink ) { ?>
<li class="login"><a href="<?php echo wp_login_url( get_permalink() ); ?>" title="<?php _e('Login','dw-focus') ?>"><i class="icon-user">
<?php } ?>
<?php if( $feedlink ) { ?>
<li class="rss"><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Rss','dw-focus') ?>"><i class="icon-rss">
<?php } ?>
<?php if( $feedlink ) { ?>
<li class="rss"><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Rss','dw-focus') ?>"><i class="icon-rss">
<?php } ?>
<?php if( $youtube ) { ?>
<li class="youtube"><a target="_blank" href="<?php echo $youtube ?>" title="<?php _e('youtube','dw-focus') ?>"><i class="icon-youtube">
<?php } ?>
<?php if( $pinterest ) { ?>
<li class="pinterest"><a target="_blank" href="<?php echo $pinterest ?>" title="<?php _e('pinterest','dw-focus') ?>"><i class="icon-pinterest">
<?php } ?>

I really need to change them (delete RSS and user and add YouTube and Pinterest).
Thanks.

dominic Staff
replied 9 years ago

You can open the \wp-content\themes\dw-focus\inc\template-tags.php file, find the line 79 & 80 to remove the User and RSS icon.
If you want to add the YouTube & Pinterest icon , you can add the following code under line 66.

if ( dw_focus_get_theme_option( 'dw_youtube' ) ) {
    $social_links['youtube'] = dw_focus_get_theme_option( 'dw_youtube' );
}

if ( dw_focus_get_theme_option( 'dw_pinterest' ) ) {
    $social_links['pinterest'] = dw_focus_get_theme_option( 'dw_pinterest' );
}
?>

Then add the following code under line 403 of the \wp-content\themes\dw-focus\options.php file.

    $options[] = array(
        'name' => __( 'YouTube', 'dw-focus' ),
        'id' => 'dw_youtube',
        'type' => 'text'
        );

    $options[] = array(
        'name' => __( 'Pinterst', 'dw-focus' ),
        'id' => 'dw_pinterest',
        'type' => 'text'
        );

Hope this helps !

jdufort
replied 9 years ago

Hi I am trying to do this too. I had success making DW Focus Theme Options offer the choice of adding YouTube and Pinterest, but when I put those URLs in, still no buttons. I am using a child theme, is there any other file that would need to be modified in my case?

dominic Staff
replied 9 years ago

You can try add the following code to the template-tags.php file:

if ( dw_focus_get_theme_option( 'dw_youtube' ) ) {
    $social_links['youtube'] = dw_focus_get_theme_option( 'dw_youtube' );
}

if ( dw_focus_get_theme_option( 'dw_pinterest' ) ) {
    $social_links['pinterest'] = dw_focus_get_theme_option( 'dw_pinterest' );
}

If you still face there issue, you can send me username & password of your site (via private answer ) for further checking.
Regards,

jdufort
replied 9 years ago

Thanks Dominic. Before I do that let me say that I could only get the youtube logo to appear by making the change in the DW Focus theme. I made the changes in the appropriate files I copied to my child theme, but that did not work. I guess I will just have to remember to go back and make that change again whenever the theme updates?-

dominic Staff
replied 9 years ago

If you use the child theme, you can add the following code to the functions.php file of the child theme.

if ( ! function_exists( 'dw_focus_social_links' ) ) :
    function dw_focus_social_links() {
        $social_links = '';
        if ( dw_focus_get_theme_option( 'dw_facebook' ) ) {
            $social_links['facebook'] = dw_focus_get_theme_option( 'dw_facebook' );
        }
        if ( dw_focus_get_theme_option( 'dw_twitter' ) ) {
            $social_links['twitter'] = dw_focus_get_theme_option( 'dw_twitter' );
        }
        if ( dw_focus_get_theme_option( 'dw_gplus' ) ) {
            $social_links['google-plus'] = dw_focus_get_theme_option( 'dw_gplus' );
        }
        if ( dw_focus_get_theme_option( 'dw_linkedin' ) ) {
            $social_links['linkedin'] = dw_focus_get_theme_option( 'dw_linkedin' );
        }
        if ( dw_focus_get_theme_option( 'dw_youtube' ) ) {
            $social_links['youtube'] = dw_focus_get_theme_option( 'dw_youtube' );
        }

        // if ( dw_focus_get_theme_option( 'dw_pinterest' ) ) {
  //             $social_links['pinterest'] = dw_focus_get_theme_option( 'dw_pinterest' );
        // }
        ?>
        <ul class="nav navbar-nav navbar-right">
            <?php if ( ! empty( $social_links ) ) :
                foreach ( $social_links as $social_link => $social_link_url ) {
                    echo '<li class="' . esc_html( $social_link ) . '"><a href="' . esc_url( $social_link_url ) . '"><i class="fa fa-' . esc_html( $social_link ) . '"></i></a></li>';
                }
            endif;
            ?>
            <li class="rss"><a href="<?php bloginfo( 'rss2_url' ); ?>"><i class="fa fa-rss"></i></a></li>
            <li class="user"><a href="<?php echo esc_url( wp_login_url() ); ?>"><i class="fa fa-user"></i></a></li>
        </ul>
    <?php
    }
endif;

Then add the following code under line 403 of the wp-contentthemesdw-focusoptions.php file.

    $options[] = array(
        'name' => __( 'YouTube', 'dw-focus' ),
        'id' => 'dw_youtube',
        'type' => 'text'
        );

// $options[] = array(
    //     'name' => __( 'Pinterst', 'dw-focus' ),
    //     'id' => 'dw_pinterest',
    //     'type' => 'text'
    //     );

Hope this helps !

Lynda Karr
answered 9 years ago

Thanks

Powered by DW Question & Answer Pro