SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add search bar and social icon on header image?

    I am using constructor theme of wordpress.
    My site is :- http://digitalfinance.info/sample/

    I just wanna use search bar and social media icons on header image ( constructor support header image ) like this image
    http://imgur.com/OHegM

    how can i do this ? any help please ?

    Thanks in advance .

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Adding them to your page should be easy. Simple copy paste probably. Do you just not know where to add the social media icons (like where to find the script for it?)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Adding them to your page should be easy. Simple copy paste probably. Do you just not know where to add the social media icons (like where to find the script for it?)
    Hello RyanReese,
    Thanks for reply.
    I can put it , means i can create click able icons. But i just wanna set it to header image as like the picture http://i.imgur.com/OHegM.png . i mean i can set it on upper and lower of header image but can't in middle of the image.
    Any suggestion please ?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could float them to the right and give them top margin or padding to push them down. Or you could position them absolutely, like you've done for the menu.

    But be careful with a layout like this. Plan it out carefully, rather than just slap things in there any old how. For a start, really thing about how best to do that red band across the top. You are probably better off with a repeating background image across the header element.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could float them to the right and give them top margin or padding to push them down. Or you could position them absolutely, like you've done for the menu.

    But be careful with a layout like this. Plan it out carefully, rather than just slap things in there any old how. For a start, really thing about how best to do that red band across the top. You are probably better off with a repeating background image across the header element.
    Hi ralph,
    Thanks for your reply. Look, nav menu is under that image. But i just wanna search bar and icons in middle of the header image. Look like that picture.
    I can create it , but i can't set it into the middle of image.
    Ok, i just insert a search box there. Please check the behave of box.
    Waiting for your reply.

  6. #6
    SitePoint Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could float them to the right and give them top margin or padding to push them down. Or you could position them absolutely, like you've done for the menu.

    But be careful with a layout like this. Plan it out carefully, rather than just slap things in there any old how. For a start, really thing about how best to do that red band across the top. You are probably better off with a repeating background image across the header element.
    I have added 2 same search boxes. please check this and see the behave of those.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Look at your HTML. You put those two search boxes inside the <head> element, with the <link>'s, <title>...etc. Move it after the <body>. Right now it's displaying quite oddly due to the incorrect HTML placement.

    That won't solve the issue, but let's work from there.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Look at your HTML. You put those two search boxes inside the <head> element, with the <link>'s, <title>...etc. Move it after the <body>. Right now it's displaying quite oddly due to the incorrect HTML placement.

    That won't solve the issue, but let's work from there.
    Hi Ryan,
    Thanks for reply.
    I have added 2 same search boxes to see the difference between them. Look at the search box which placed on image is not working. But other is working which is placed top of image.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Inside your <header>, you have the form, and then you have two absolute positioned elements. The nav, and #title. The nav is put down, so that's not interfering. However, the title by default, is at the top of the header. It's overlapping the form.

    What do you want linked? With the anchor? Do you want the entire header to be a link? If that's the case, just give this. It'll stack on top.
    Code:
    #searchform{position:relative;z-index:1;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Inside your <header>, you have the form, and then you have two absolute positioned elements. The nav, and #title. The nav is put down, so that's not interfering. However, the title by default, is at the top of the header. It's overlapping the form.

    What do you want linked? With the anchor? Do you want the entire header to be a link? If that's the case, just give this. It'll stack on top.
    Thanks for reply.
    I have updated my header image so you can understood the position of image.
    Ok, please take a look of my header.php code . http://pastebin.com/0PZeuHje

    and my search style in my style.css http://pastebin.com/dmyhYjEv

    May be you can now solve it .

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You still didn't answer about WHAT you want. . What do you want linked? The entire header? Just the "logo" part?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You still didn't answer about WHAT you want. . What do you want linked? The entire header? Just the "logo" part?
    Ok, i have done it myself.
    But here is problem
    Need to set icons horizontally in footer. Now it is showing vertically.
    My icon css code is :-
    http://pastebin.com/v89BvXRP

    and for this my php code is :-

    <div id="social-logo">
    <ul>
    <li><a href="http://www.twitter.com/"><img src="http://ideaddict.com/images/Twitter-icon.png?1317226690" /></li>
    <li><a href="http://www.facebook.com/"><img src="http://www.ourweetrip.com/wp-content/plugins/wp-greet-box/images/facebook_icon.png" /></li>
    </ul>
    </div>
    It is set as horizontally , but not working.
    Any help ?
    Thanks.

  13. #13
    SitePoint Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can visit my site again to see the change and problem.
    www.digitalfinance.info/sample

    Thanks .

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kiddie View Post
    You can visit my site again to see the change and problem.
    www.digitalfinance.info/sample

    Thanks .
    That link isn't working.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  15. #15
    SitePoint Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That link isn't working.
    Thanks ralph.
    I have got it. And it's resolved .

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Cool. Glad it's sorted.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •