M Ureeb
asked 9 years ago
  1. I need my headlines widget to be like the one in this website: http://www.uiv.it/ . The grey color in the widget title background and arrow head front of the title. But i dont need the social icons in front of headlines widget.

  2. I need to change the background color of the search bar.

  3. I need to change the width (size) of the search bar.

Example:
![UIV Website](http://i.imgur.com/QkoVIxD.png "enter image title here")

Thanks in advance.

2 Answers
DominicStaff
answered 9 years ago

Hi,
To resolve this issue, you can do as the following:

Step1: Open the header.php file. Replace the following code(from line 91 to line 103).

<div id="site-navigation" class="collapse navbar-collapse main-navigation" role="navigation">
                    <?php if ( has_nav_menu( 'primary' ) ) : ?><?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav navbar-nav navbar-left' ) ); ?><?php endif; ?>
                    <div class="hidden-xs hidden-sm"><?php dw_focus_social_links(); ?></div>
                </div>
            </nav>

            <?php if ( is_active_sidebar( 'dw_focus_under_navigation' ) ) : ?>
            <div class="under-navigation hidden-xs hidden-sm">
                <div class="row">
                    <div class="col-md-9 hidden-xs hidden-sm"><?php dynamic_sidebar( 'dw_focus_under_navigation' ); ?></div>
                    <div class="col-md-3"><?php get_search_form(); ?></div>
                </div>
            </div>

With the following code:


        <div id="site-navigation" class="collapse navbar-collapse main-navigation" role="navigation">
                    <?php if ( has_nav_menu( 'primary' ) ) : ?><?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav navbar-nav navbar-left' ) ); ?><?php endif; ?>
                </div>
            </nav>

            <?php if ( is_active_sidebar( 'dw_focus_under_navigation' ) ) : ?>
            <div class="under-navigation hidden-xs hidden-sm">
                <div class="row">
                    <div class="col-md-9 hidden-xs hidden-sm"><?php dynamic_sidebar( 'dw_focus_under_navigation' ); ?></div>
                    <div class="hidden-xs hidden-sm social-links"><?php dw_focus_social_links(); ?></div>

                    <div class="col-md-3"><?php get_search_form(); ?></div>
                </div>
            </div>

Step2: Add the following code to the style.css file:

/********/
.social-links {
  position: absolute;
  right: 25%;
  bottom: 0px;
  margin-right: 0;
}
.social-links .navbar-right > li > a {
  padding: 2px 0;
  width: 24px;
  text-align: center;
  margin: 5px 2px;
  background: #000000;
  color: #fff !important;
}
.social-links .navbar-right > li.facebook > a {
  background: #3b5998 !important;
}
.social-links .navbar-right > li.twitter > a {
  background: #00aced !important;
}
.social-links .navbar-right > li.google-plus > a {
  background: #dd4b39 !important;
}
.social-links .navbar-right > li.linkedin > a {
  background: #007bb6 !important;
}
.social-links .navbar-right > li.youtube > a {
  background: #bb0000 !important;
}
.social-links .navbar-right > li.rss > a {
  background: #ff9500 !important;
}
.social-links .navbar-right > li.user > a {
  background: #555555 !important;
}
.social-links .navbar-right > li > a:hover,
.social-links .navbar-right > li > a:active {
  opacity: .5;
}

#searchform .form-control {
  background: #cecece;
  font-size: 12px;
  font-style: italic;
  border-color: #ddd !important;
  border-width: 0 0 0 1px;
  width: 87%;
  text-indent: 10px;
  height: 36px;
}
.under-navigation {
    padding: 0px;
}
.under-navigation .col-md-3 {
  padding-left: 0px;
}
.dw_focus_widget_news_ticker li, .widget_news-ticker li {
    line-height: 35px;
}

.under-navigation .widget-title {
  background: #cecece;
  float: left;
  padding: 0px 10px 0px 6px;
  position: relative;
  top: 0;
  height: 36px;
  line-height: 36px;
}

.under-navigation .widget-title:after {
  border-bottom: 5px solid transparent;
  content: "";
  position: absolute;
  top: 14px;
  left: 100%;
  border-left: 5px solid #cecece;
  border-top: 5px solid transparent;
}

.under-navigation .widget {
    padding: 0;
}

Hope this helps !

ureeb
replied 9 years ago
  1. thanks Dominic, but i just need the headlines widget’s title to be like in the example, with the grey background, p.s. i dont need social icons like in example site.

  2. i also need the search bar to be grey from inside.
dominic Staff
replied 9 years ago

Very simple. Skip these steps in the previous answer, you can add the following code to the style.css file:

#searchform .form-control {
  background: #cecece;
  font-size: 12px;
  font-style: italic;
  border-color: #ddd !important;
  border-width: 0 0 0 1px;
  width: 87%;
  text-indent: 10px;
  height: 36px;
}
.under-navigation {
    padding: 0px;
}
.under-navigation .col-md-3 {
  padding-left: 0px;
}
.dw_focus_widget_news_ticker li, .widget_news-ticker li {
    line-height: 35px;
}

.under-navigation .widget-title {
  background: #cecece;
  float: left;
  padding: 0px 10px 0px 6px;
  position: relative;
  top: 0;
  height: 36px;
  line-height: 36px;
}

.under-navigation .widget-title:after {
  border-bottom: 5px solid transparent;
  content: "";
  position: absolute;
  top: 14px;
  left: 100%;
  border-left: 5px solid #cecece;
  border-top: 5px solid transparent;
}

.under-navigation .widget {
    padding: 0;
}

Hope this helps !

ureeb
replied 9 years ago

but it is appearing like this: http://i.imgur.com/rxtDVyf.png

i need the whole background of the "title HEADLINES" to change.

dominic Staff
replied 9 years ago

Please send me your site for further checking.

ureeb
replied 9 years ago

here is a link: http://i.imgur.com/Rfr7eUe.png

i am almost close to this, i think now its just a matter of padding. please tell me the modified code for removing TOP and LEFT padding before title !

M Ureeb
answered 9 years ago

here is a link: http://i.imgur.com/Rfr7eUe.png

i am almost close to this, i think now its just a matter of padding. please tell me the modified code for removing TOP and LEFT padding before title !![enter image description here](http://i.imgur.com/Rfr7eUe.png
"enter image title here")

dominic Staff
replied 9 years ago

Please find the following line of code that I gave earlier:
.under-navigation .widget-title { ....}

Replace it with the following code:

.under-navigation .widget-title {
  background: #cecece;
  float: left !important;
  padding: 0px 10px 0px 6px;
  position: relative !important;
  top: 0 !important;
  height: 36px !important;
  line-height: 36px !important;
}
  • Also, very hard to help you resolve this issue when I can not access to check your site. However, I think you are using an other version (1.1.0). The code in the previous answer is V1.2.5. If you are using the correct DW Focus 1.1.0, you can add the following code:
.searchForm .field {
  background: #cecece;
  font-size: 12px;
  font-style: italic;
  border-color: #ddd !important;
  border-width: 0 0 0 1px;
  width: 87%;
  text-indent: 10px;
  height: 36px;
}
.under-navigation {
  padding: 0px;
}
.under-navigation .col-md-3 {
  padding-left: 0px;
}
.dw_focus_widget_news_ticker li, .widget_news-ticker li {
  line-height: 35px;
}

.under-navigation .widget-title {
  background: #cecece;
  float: left !important;
  padding: 0px 10px 0px 6px;
  position: relative !important;
  top: 0 !important;
  height: 36px !important;
  line-height: 36px !important;
}

.under-navigation .widget-title:after {
  border-bottom: 5px solid transparent;
  content: "";
  position: absolute;
  top: 14px;
  left: 100%;
  border-left: 5px solid #cecece;
  border-top: 5px solid transparent;
}

.under-navigation .widget {
  padding: 0;
}

@media (min-width: 980px) {
.desktop #under-navigation {
  padding-left: 0px;
}
}

Hope this helps !

Powered by DW Question & Answer Pro