- This topic is empty.
-
AuthorPosts
-
November 13, 2014 at 1:09 pm #188267Bones_JonesParticipant
hi guys,
link
http://goo.gl/g7CGCTi’m trying to add a same ‘search button'(located top right header) at the bottom of footer.
but when i add the code at the footer area, it looks all screwy. i want it to look exactly like that (width 320px) with border…
what am i doing wrong? thx in advance!!
November 14, 2014 at 6:35 am #188326ClintonLee83ParticipantGo to your footer to where you put your custom code and find the
id="search-3"
replace that id with
id="search-4"
next, go to your style.css and go down to line #14
push enter, once to make an extra line and paste this code:
#footer .searchform{ float:left;margin:12px 0 0; width:100%;max-width:316px; border:2px solid #f6861f; height:28px;background:#fff} #footer input[type="submit"]{ width:25%; float:right; border:0; height:100%; padding:1% 0; margin-left:-5% } #footer .searchform:hover { border:2px solid #ef4036; } #footer .searchform:hover input[type="submit"]{ background:#ef4036; } #search-4 { float:right; width: 320px; }
Next, you need to make the white footer background taller so it extends to the bottom of the screen. You’ll need to find your footer id tag in the css. So while you’re in your style.css sheet, use your search function ctrl+f (command+f if you’re on a mac) and search for this:
#footer {
if you look to the right of your footer ID tag, you’ll see the height attribute which is set at 65px – Make it 120px instead and walla, it should look great.
November 14, 2014 at 11:01 am #188336ClintonLee83ParticipantYes, you need to clear your browser cache.
you can do that usually by clearing your history, make sure the “cache” box is checked. In some browsers like Chrome, you can do shift+refresh as a shortcut.
If you can’t find it in your browser, google it.
Your browser downloads and stores your website information so when you revisit a website, it loads faster. When you clear out your browser cache, it deletes and re-downloads all that information so that you can see fresh changes.
From here, my inspector sees a cleaner style sheet without any data on line 13, it looks much better.
November 14, 2014 at 2:17 pm #188343ClintonLee83ParticipantSure, I’m glad I could help solve it :)
Try using a different browser. If it works, you’ll know it’s chromes cache.
November 19, 2014 at 1:33 pm #188775ClintonLee83ParticipantHey Jones, Can you put the original search bar at the top of the page? I’d like to look at the original code from the working bar so we can compare.
November 19, 2014 at 3:53 pm #188780ClintonLee83ParticipantCan you restore your site from a backup to before November 13th?
November 20, 2014 at 1:42 am #188791ClintonLee83ParticipantOk good. Now scroll down to the bottom of your style.css and paste the css I gave you in my first post.
Are you doing backups of your site? You should store a copy of your site on your computer before you start playing with the code.
November 20, 2014 at 2:53 am #188800ClintonLee83ParticipantJones, I didn’t consider your responsive css.
You need to put this css before your media queries, so paste the code from my original post on line 2871 – just before your responsive css.
You’ll need to adjust your media query css in order for the search bar and footer to respond when you shrink and expand the browser.
Do you know how to do that?
November 20, 2014 at 8:00 am #188820ClintonLee83Participantdid you save the css to line 2871 of the style.css? And did you save and upload the changes? My inspector is showing nothing on line 2871
November 20, 2014 at 8:34 am #188823ClintonLee83ParticipantYes, that’s correct, you should paste the css code from my original post here directly above that line.
Do you want me to go into your wordpress dashboard and take a look?
November 20, 2014 at 8:35 am #188824ClintonLee83ParticipantWe’re working on your eleven40 style.css
November 20, 2014 at 8:48 am #188826ClintonLee83ParticipantNovember 20, 2014 at 9:25 am #188835ClintonLee83ParticipantThere you go, it’s working now. I made the search bar responsive using media queries, if you make the browser narrow, you’ll see the site design changes.
If you want the search bar to display at the top of the page, go into your style.css and go to line 1494 and delete the:
display:none;
from the #header .searchform {
November 20, 2014 at 9:30 am #188839ClintonLee83Participanthow are you doing it? it looks like it’s interfering with the search bar
November 20, 2014 at 1:51 pm #188852ClintonLee83ParticipantAh, it looks great :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.