Header, Search Bar and Social Media Links

  • Unknown's avatar
    themadameditor · Member ·

    hi there,

    Happy New Year.

    1. I have been having issues with my header since October when my blog underwent a massive change thanks ever so much to your support team, however the blog header won’t update it keeps showing me the old header. please could you let me know how to change this?
    2. I don’t have a search bar, I have only just notices. It used to be situated on the header but is no longer there, could you let me know how to reinstall this please?
    3. social media links; i would like to put these where the quote is situated just above the instagram footer is this possible?
    4. In relation to 2 and 3 is it possible to have the search bar situated where the quote is as well?

    Any help would be appreciated

    thanks so much
    Annalisa

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, your header is set via a background declaration in the CSS, not through Appearance > Header. Upload your image to the media library, get the URL and then replace the URL in the background declaration in the following CSS rule to change the header. 

    .custom-header {
    background: url("//themadameditor.files.wordpress.com/2014/10/tme-1020-e1413132298770.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 200px;
    width: 1020px;
}

    Note that your image will have to be 1020px wide by 200px tall or you will have to adjust the width and heights to match. Unless you want to change the overall width of your site, I would stick with the 1020px width, but if you need to, the height can be adjusted for a taller or shorter image.

  • Unknown's avatar
    thesacredpath · Member ·

    2. I don’t have a search bar, I have only just notices. It used to be situated on the header but is no longer there, could you let me know how to reinstall this please?

    Forever does not have a search bar in the header area. See the Forever demo page here. Not all themes have search bars in the header area.

    3. social media links; i would like to put these where the quote is situated just above the instagram footer is this possible?

    The footer has 4 widget areas which you can use. Right now your Instagram widget is in footer area 1. You can add a text widget with your linked social icons to footer widget area 2, 3 or 4 and it will appear adjacent to the Instagram widget in the footer. We can then help you move it up into the location where the quote is now.

    4. In relation to 2 and 3 is it possible to have the search bar situated where the quote is as well?

    As with #3 above, you would have to add the search widget to one of the footer widget areas, and then we can help you move it into the quote area.

  • Unknown's avatar
    themadameditor · Member ·

    hi there,

    thanks for coming back to me on this i will get working on the header.

    with regards the other points; I actually love my footer the way it is with my instagram feed and also because so much time was spent by you guys helping me get the website looking this way I wouldn’t want to waste that. Therefore, is it possible to have the links in the side bar on the home page only but the post pages should be left as is, without a side bar? thanks

  • staff-happychia · Staff ·

    It is perhaps possible to introduce a sidebar on the homepage by using a different page template. But a sidebar with just a single social media links widget creates a lot of white space and affects the overall look of your awesome homepage adversely.

    So as @thesacredpath suggested, I too recommend you add the social media links to the footer and we can use Custom CSS to move it above the Instagram widget.

    But if you are keen on sidebar just try changing the page template of the home page and see if you get a sidebar. Also if you do this, we need quite a bit of custom CSS to hide the sidebar in the single post page. I am fairly sure it is not possible to have the sidebar only on the all posts page and not have it on the individual post page.

  • Unknown's avatar
    themadameditor · Member ·

    ok thanks i will work on that and see how I go and let you know when I have updated the footer… will it go back to looking the same with my instagram feed when it moves?

    thanks

  • Unknown's avatar
    themadameditor · Member ·

    hi,

    I’ve updated the footer to include the social widgets. What I would like please;

    1. The social media column “social butterfly ” to be in a separate column above the quote. in a horizontal line please
    2. A search bar in the header if possible or beside the social media icons
    3. The instagram feed to return to the way it was.

    I really appreciate any help you can give.

    thanks so much.

  • staff-happychia · Staff ·

    Please add this style and let me know if you liked the result:

    #page {
    position:relative;

}

#supplementary.three #first {
    width: 982.09375px;
}

div#latest-message {
    padding-top: 200px;
}

#latest-message.format-quote blockquote:before {
    top:200px;

}

div#second {
   position: absolute;
   bottom:1150px;
   right: 0px;
}

div#third {
  position:absolute;
  bottom: 1080px;
}
  • Unknown's avatar
    themadameditor · Member ·

    hi there,

    thanks for this update, it almost works except when I type in the search bar the results eat into the social media feed. So is it possible to

    1. move the search bar below the tag line?
    2. move the social media links to beneath the quote at the bottom and have it horizontal so it should look like
    twitter. pinterest. instagram… as opposed to the grid outline it is now?

    3. This might be impossible but I thought I’d ask anyway, it is possible to have a section for random posts? Like an image gallery that will display random posts? I know its a long shot but I thought I;d ask.

    if this is at all possible that would be great.

    thanks so much
    Annalisa

  • staff-happychia · Staff ·

    1. We could do this but we still end up with the same problem: the search box is buried in the results page.

    2. Discard the custom CSS I gave you earlier and use this:

    #page {
    position: relative;
}

#supplementary.three #first, #supplementary.three #third {
    width: 982.09375px;
}

div#latest-message {
    padding-bottom: 200px;
}

div#third {
    position: absolute;
    bottom: 950px;
}

div#third ul li {
  display: inline-block;
  margin-left: 125px;
 }

li#menu-item-11726 a:before {
    content: url('https://chaittestpress.files.wordpress.com/2015/01/01_twitter-e1420538901928.png');
    padding: 5px;
 }

li#menu-item-11727 a:before {
 content: url('https://chaittestpress.files.wordpress.com/2015/01/13_pinterest-e1420538979124.png');
  padding: 5px;
}

li#menu-item-11728 a:before {
 content: url('https://chaittestpress.files.wordpress.com/2015/01/10_instagram1.png');
  padding: 5px;
}

li#menu-item-11729 a:before {
 content: url('https://chaittestpress.files.wordpress.com/2015/01/tumblr_circle_color-128-e1420539478310.png');
 padding: 5px;
}

    The only problem with this is when you search, the Older Posts navigation overlpas with the social media icons row and is not click-able. I know why but I don’t the remedy :-(

    3. You can add Display WordPress Posts widgets and tell it to display random posts from you own blog :-)

  • staff-happychia · Staff ·

    Also download all the social media icons from the urls: e.g. https://chaittestpress.files.wordpress.com/2015/01/tumblr_circle_color-128-e1420539478310.png , save and serve them from your Media Library.

  • Unknown's avatar
    themadameditor · Member ·

    hi,

    thanks for sending this but you are right, its the same problem. And there is absolutely no way this can be done on the side bar of the homepage?

    Is it possible to move the search box to where the tag line of the website is?

    thanks
    Annalisa

  • staff-happychia · Staff ·

    I can’t see any sidebar on your homepage.

    Search box can be added anywhere but I could not figure a way to not get it covered in search results. Hopefully some other volunteer helps!

  • Unknown's avatar
    thesacredpath · Member ·

    @themadameditor, can you confirm for me what is left to do? We can add a search box to the footer widget area and then move it up below the tagline. If you don’t want the search to show on certain pages, we can either use the Widget Visibility feature to hide it from certain places, or we can use CSS body classes to limit where it will appear.

    You will need to add a search widget to the footer widget area and then we can move it up. Here is an example. After adding the search widget, you will have to view your source code and get the search widget ID# and replace the “3” in my example. 

    #search-3 {
    position: absolute;
    top: 870px;
    z-index: 100;
    left: 45%;
    width: 150px;
    overflow: visible;
}
#search-3 input[type="text"], input[type="email"], textarea {
    border: 1px solid #777;
}

    Adjustments may have to be made to some of the positioning since I worked off the demo site.

  • Unknown's avatar
    themadameditor · Member ·

    hi @thesacredpath thanks for reaching out. So this is what i want to achieve;

    1. a search box; ideally I wanted a situation where I could have an active sidebar on the home page only but not the post page. I’ve been told this is impossible. So alternatively I thought a search bar could go beneath the tagline
    2. Social media links, as it stands when I do an active search from the search box in the footer, the “older posts” button becomes inactive, is there a way where I can move these either beneath the instagram feed, as they are now, or if the side bar is an option; on to the sidebar.

    I hope this make sense and thank you once again for reaching out to help.

    One thing I don’t understand; where do i find the widget id?

  • Unknown's avatar
    thesacredpath · Member ·

    1. …So alternatively I thought a search bar could go beneath the tagline

    Here is the code that will move your search widget up to below your tagline. I made a few adjustments 

    #search-2 {
    position: absolute;
    top: 865px;
    z-index: 100;
    left: 44%;
    width: 150px;
    overflow: visible;
}
#search-2 .widget-title {
    display: none;
}
#search-2 input[type="text"], input[type="email"], textarea {
    border: 1px solid #777;
    color: #000;
}

    2. Social media links, as it stands when I do an active search from the search box in the footer, the “older posts” button becomes inactive, is there a way where I can move these either beneath the instagram feed, as they are now, or if the side bar is an option; on to the sidebar.

    We can get the older posts button functionality back by putting a bit of bottom margin on #primary. As it was, the social butterfly menu was on top of the older posts text. Add this to your CSS. 

    #primary {
    margin-bottom: 60px;
}

    The code I have above has the correct ID in it for your search box. I use the web inspector built into modern browsers to inspect the different elements in web pages when doing CSS. I highlight the element and then you can find the unique id for that element, or the controlling CSS classes. This is what it looks like in the HTML when I inspect your search widget.
    <aside id="search-2" class="widget widget_search">

  • Unknown's avatar
    themadameditor · Member ·

    hi @sacredpath, thanks for that. I have applied the codes the search works fine but the older posts link still doesn’t work unfortunately. at the moment there is quite a lot of space between the footer and the social butterfly section so it is possible to;

    1. move the social butterfly section down to cover that much wide space and hopefully this will make the older posts button work?

    thanks so much

  • Unknown's avatar
    thesacredpath · Member ·

    Give this a try for the spacing on the social and previous/next links at the bottom of the posts. 

    .hentry {
    margin-bottom: 5.23em;
}
#content nav {
    position: relative;
    top: 35px;
}
  • Unknown's avatar
    themadameditor · Member ·

    hi @sacredpath, I have just uploaded a new post and upon reading discovered that the search bar shows up on the pictures and in the middle of the texts, it doesnt stay hidden. I have deleted the CSS for this I would imagine there is no other way around this?

    thanks

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, I would have to see this. Are you talking about on single post pages? It could probably be adjusted with some more specific CSS for single post pages, if that is where the issue is occurring.

  • The topic ‘Header, Search Bar and Social Media Links’ is closed to new replies.