Search bar and social network icons in the header.

Pinbin
1

Hello

First, congratulations for this beautiful theme.

As you can see on my website : http://gvallver.perso.univ-pau.fr/ I tried to implement a search input in the header. But it is not so nice. For example the search option on the forum is beautiful. Is it possible to add this to the header of pinbin ? Or how can I configure the header to center vertically the search bar with the logo and the page ?

If I succeed I would like also to add social network icons at the same place such the one you have at the bottom of this page or on the pinboard theme.

Thanks for your theme and for your help

PS : I would like also to follow several request on this forum about a possible sidebar. It could be a great feature.

2

You have done everything correctly but you need to give your search div a class. It should look like this:

<div class="header-search">
/* Your search code */
</div>

Then you can add extra styling for it to vertically align it. It will also fix issues with your logo because right now your navigation bar is stretched.

.header-search {
    margin-top: -17px;
}

Adding social network might be tricky. I have an Font Awesome icons assigned to it and each icon is styled separately.

Much easier solution would be to use some plugin for that.

3

Nice, it works perfectly ! Thank you.

Just a last thing, I changed link color

a:link {
    color: #3465a4;
    text-decoration: none;
}

and it also change category color which appears over article on the grid. But if I look at the CSS, there is :

.pinbin-category {
  position: absolute;
  width: auto;
  background: #000;
  zoom: 1;
  filter: alpha(opacity=70);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity: 0.7;
  margin-top: -36px;
  z-index: 1;
  height: 30px;
  overflow: hidden;
  left: 0;
}
.pinbin-category p {
  margin: 0;
  padding: 0;
  line-height: 30px;
  padding-left: 20px;
  padding-right: 40px;
  color: #fff;
  font-style: italic;
}
.pinbin-category a {
  color: #fff;
  font-style: italic;
  text-decoration: none;
}
.pinbin-category a:hover {
  color: #777;
  text-decoration: none;
}

Colors are defined in that classes thus I do not understand why or what I should change to have category links #fff ?

Thanks

4

Hi Aigars,

thanks for the fantastic theme. I really love it clean and simple. I am running my blog on your theme and since the last update I have a problem with the top row posts on my blog; deltadentsolutions.com. If you look at the bottom of the top line blogs there is no space between the first and the second blog post.

I tried to find out why that is and it has to do with the social media line on top of the page. However, I can’t remove it from there without deactivating it completly and I would like to keep it. Any ideas how to do get that fixed? Unfortunatly, I do not have the programming skills to do it myself/to read the code.

Many thanks,

Henrik

5

Could you please post a screenshot with what you are trying to achieve since I don’t see any issues with your website.

6

Sure I will try.

7

It does look OK on Chrome but I see that there is some issues on Firefox.

I will look into it in more detail tomorrow. however, I can see already that it is due to some customizations or plugins used since demo site works properly on Firefox.

8

Hi Aigars,

yes absolutly. Its the plugins. When ever I run it without the social sharing plugins, its fine. But I like to keep those / find an alterantive set of share options.

Thanks for the help for far.

9

You might want to look into http://wordpress.org/plugins/jetpack/ There is a nice sharing options avialable that I use for theme demo as well. I have them on inner pages but you can use it on front page as well.

Buttons provided by Jetpack are much faster to loads as well since they don’t load the entire JavaScript unless you are actually clicking on them.

10

Salut Germain,
je viens de voir ton site, et tu as reussi ce que je cherche à faire, c’est à dire caller champs de recherche sur la droite et que ça bouge en fonction de la taille de la page. Tu peux me dire comment tu à fait ? Merci bcp