mohamed irfan
asked 10 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 10 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 10 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 10 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 10 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 10 years ago

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

Powered by DW Question & Answer Pro