Rohith Nuguri
asked 10 years ago

Hi, 
Your theme is really wonderful but i need your help in tweaking it a bit.
1. Remove much of the white space and make the website look like the picture below.
2. Change color of menu bar to black and menu items to white.
3. Remove the under navigation and bring the content area closer to the header like in the picture.
4. Move the search bar to the top or into the content area.
5. In IE8, the logos get truncated and the menu dropdowns do not fade away.
 
Can you kindly help me out ?
Thanks
Dummy

1 Answers
Wilfred
answered 10 years ago

Hi Rohith Nuguri.

1. Remove much of the white space and make the website look like the picture below.
– To resolve this issue you can go to Dashboard / Appearance / Customize / General Settings, and add this code below to Custom wp_head() code section:

<style>
@media(min-width: 980px){
.site-header #header {
margin-top: 0;
background: url('LINK BACKGROUND') no-repeat;
}
.site-header #header #branding h1 {
margin-bottom: 0;
}
.site-header #branding a {
height: 150px;
}
}
</style>

– Change ‘LINK BACKGROUND’ by your image link.

2. Change color of menu bar to black and menu items to white.
– To resolve this issue you can go to Dashboard / Appearance / Customize / General Settings, and add this code below to Custom wp_head() code section:

<style>
@media(min-width: 980px){
.navbar,
.navbar .nav .menu-parent-item:hover>.sub-menu,
.navbar .nav .menu-parent-item:hover .sub-mega-wrap {
background: #000;
}
.navbar .nav .menu-parent-item:hover>.sub-menu,
.navbar .nav .menu-parent-item:hover .sub-mega-wrap,
.navbar .nav .menu-item-object-category .sub-mega-wrap .subcat li {
border-color: #222;
}
.navbar .nav li a {
color: #fff !important;
}
.navbar .nav li a:hover {
color: #ee3224 !important;
}
.navbar .nav .current_page_item > a,
.navbar .nav .current-menu-item > a,
.navbar .nav .current-post-ancestor > a,
.navbar .nav .current-menu-parent > a,
.navbar .nav .current-menu-ancestor > a {
color: #ee3224 !important;
}
.navbar .nav li {
border-color: #222;
}
.navbar .nav .menu-item-object-category .sub-mega-wrap:before {
background-color: #222;
}
}
</style>

3. Remove the under navigation and bring the content area closer to the header like in the picture.
– To resolve this issue you can go to Dashboard / Appearance / Customize / General Settings, and add this code below to Custom wp_head() code section:

<style>
.ie8.desktop .wrap-navigation {
float: none;
width: 100%;
}
.ie8.desktop #under-navigation {
display: none !important;
}
.ie8.desktop .main-navigation {
margin-bottom: 20px;
}
@media(min-width: 980px){
.main-navigation {
margin-bottom: 20px;
}
.desktop #under-navigation {
display: none !important;
}
}
</style>

4. Move the search bar to the top or into the content area.
– To resolve this issue you can go to Dashboard / Widgets, drag and drop widget search  to Main sidebar, Category sidebar, Single post sidebar, Blog sidebar.

5. In IE8, the logos get truncated and the menu dropdowns do not fade away.
– To resolve this issue you can open file functions.php in Your iste / wp-content / themes / your theme > functions.php – Then replace following code – form line 721 to line 737:

<?php if( ! empty( $logo_custom_image ) ) : ?>
.site-header #branding a {
background-image: url(<?php echo $logo_custom_image; ?>);
}
<?php endif; ?>
<?php if( ! empty( $dw_logo_small_image ) ) : ?>
#colophon.dark #site-info .small-logo {
background-image: url(<?php echo $dw_logo_small_image; ?>);
}
@media ( max-width: 979px ) {
.wrap-navigation .small-logo {
background-image: url(<?php echo $dw_logo_small_image; ?>);
}
}
<?php endif; ?>

By 

<?php if( ! empty( $logo_custom_image ) ) : ?>
.site-header #branding a {
background-image: url(<?php echo $logo_custom_image; ?>);
}
.ie8 .site-header #branding a {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $logo_custom_image; ?>',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $logo_custom_image; ?>',sizingMethod='scale')";
}
<?php endif; ?>
<?php if( ! empty( $dw_logo_small_image ) ) : ?>
#colophon.dark #site-info .small-logo {
background-image: url(<?php echo $dw_logo_small_image; ?>);
}
@media ( max-width: 979px ) {
.wrap-navigation .small-logo {
background-image: url(<?php echo $dw_logo_small_image; ?>);
}
}
.ie8 #colophon.dark #site-info .small-logo,
.ie8 .wrap-navigation .small-logo {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $dw_logo_small_image; ?>',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $dw_logo_small_image; ?>',sizingMethod='scale')";
}
<?php endif; ?>

Hope this helps!

Powered by DW Question & Answer Pro