mohamed irfan
asked 5 years ago

hi
can u plz help me to achieve this result
i want to use logo in center and advertisement below logo

thanks in advance

2 Answers
DominicStaff
answered 5 years ago

If you want to center logo on the DW Focus, please follow the jetpack’s guideline first in the Blog article on how to use Edit CSS here. http://designwall.com/blog/using-jetpack-custom-css-for-your-wordpress-site/
After that, just add the following code to the Edit Css.

.site-header #branding h1 {
    margin: 0 0 0 377px;
}
 #sidebar-header {
     clear: left;
}

Then open the header.php file in the folder path “wp-contentthemesdw-focus“, and find the line 33.
Replace the following code:
<div id="sidebar-header" class="span9">
With new code:
<div id="sidebar-header" class="span12">
Save it and see if that resolves it for you.
If you still face there issue, you can send me your site for further checking.
Hope this helps !

irfan
replied 5 years ago

thanks for your reply, mr Dominic
sorry for troubling you, i want to use logo in centre and 2 small ads left and right (250 width each) and logo space 500px

DominicStaff
answered 5 years ago

At the moment, you just possible add the small ads left & right(230px) and logo is 500px.
If you want, you can do as the following:

Step1. Open the dw-focus-sidebar.php file in the folder path "wp-content > themes > dw-focus > inc". Find the line 64 to line 81, replace it with new code:

register_sidebar( array(
        'name' => __( 'Header-Right', 'dw_focus' ),
        'id' => 'dw_focus_header',
        'description'   =>  __('Use to display widgets in header', 'dw_focus'),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
    register_sidebar( array(
        'name' => __( 'Header-left', 'dw_focus' ),
        'id' => 'dw_focus_header2',
        'description'   =>  __('Use to display widgets in header', 'dw_focus'),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

Step2. Open the header.php file "wp-content > themes > dw-focus". Find the line 34 to line 45, replace it with new code: (Screenshot)

<?php if( is_active_sidebar( 'dw_focus_header' ) ) { ?>
<div id="sidebar-header sidebar-header-left " class="span3 visible-desktop">
<?php dynamic_sidebar('dw_focus_header2'); ?>
</div>
<?php } ?>
<div id="branding" class="span6 visible-desktop">
<h1>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
</div>
<?php if( is_active_sidebar( 'dw_focus_header' ) ) { ?>
<div id="sidebar-header sidebar-header-right " class="span3 visible-desktop">
<?php dynamic_sidebar('dw_focus_header'); ?>
</div>
<?php } ?> 

Step3. Open the style.css file then add the following code:

.site-header #header {
    background: none;
}
#branding {
    width: 500px !important;
}
.site-header #branding a {
    width: 500px;
    height: 90px;
}
@media (max-width: 979px) {
 .wrap-navigation .small-logo {
 webkit-background-size: auto 100%;
 -moz-background-size: auto 100%;
 -o-background-size: auto 100%;
 background-size: auto 100%;
 }
}
@media (min-width:980px) and (max-width:1079px) { 
  .site-header #header #branding {
  width: 450px !important;
  margin-left: 3px;
  margin-right: 23px;
  }
}
@media (max-width:1079px) { 
  .site-header #header #branding h1 {
    border: none;
  }
}

Step4. After adding code, you can log in to Dashboard > Widget > then add the Ads to the (Header-left & Header-right) section.

Hope this helps !

irfan
replied 5 years ago

excellent, mr Dominic,
just perfect,
one thing we have missed we want to display some text below logo (date and time) just like http://www.nytimes.com

thank you

irfan
replied 5 years ago

and reduce the logo size from 500px to 300px
thanks

Powered by DW Question & Answer Pro