Search Submit Issue

  • katylove1990 · Member ·

    My blog is http://www.allintheblush.com and I have custom CSS on my search bar to customize it’s size/location and the search submit icon. For some reason, when I type something in my search bar and nothing is found, the page that it directs to (http://allintheblush.com/?s=twinz&submit=Search) shows my search bar twice on the page. Do you know why this is happening and what can I put in my CSS to make it from appearing twice? It’s appearing off the page on the right hand side.

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

  • justpi · Member ·

    This is happening because the not-found page on Sight includes a searchbox in the content of the page; example:
    http://sightdemo.wordpress.com/2010

    If you want to remove it, you can add this: 

    .entry-content #searchform {
display: none;
}

    But the text below the “Nothing Found” heading makes it reasonable for a searchbox to be there. So, if your positioning was correct, you could leave the second searchbox in place and use a different selector for the one you repositioned, i.e. turn this:
    #searchform
    to this:
    .header-search #searchform

    However, your absolute positioning isn’t correct. Apparently you’re not aware that the theme has a responsive layout. Drag the browser window to make it narrower and see what visitors on mobile devices will see.

  • katylove1990 · Member ·

    Hi justpi,

    Thank you so much for that CSS to fix the issue, however, I think I may have to be fixing my site altogether instead because I did not realize the theme has a responsive layout. Do you mind explaining in a little more detail how my absolute positioning is off? I did notice on the mobile, my site looks very messy and everything is out of place (I’m assuming because I set margins on things?). Is there a way to position elements into other containers without using the top margin and left/right margin coding since it doesn’t seem to translate too well into mobile?

    Thank you!!

  • justpi · Member ·

    You’re welcome.

    If you view the theme demo and start narrowing the browser window little by little, you’ll see that after a certain point the tagline drops below the blog title; then the searchbox becomes a full-width box below the tagline, the secondary menu disappears, and the sidebar becomes a footer; then the primary menu turns to two rows, etc.

    So you understand that what you tried works on fixed-width themes only; when things change dimensions, position and shape, you cannot use a single set of fixed values to position something where you’d like it to be. For example, you used absolute positioning for the searchbox, counting from left: when the theme gets narrower, the searchbox remains in place (covering part of the header image) while it wasn’t supposed to be there at all. Or you used a negative top margin to move the social icons up into the header area: when the theme gets narrower, your “Beauty Index” menu item drops into a second row, so the distance between header and sidebar becomes larger, so the icons drop in front of “Reviews” and “Trends”; and when the theme becomes even narrower, the icons will show somewhere between your bottom two posts (because the sidebar is now a footer).

    The easy solution is not to tamper with the header at all, and leave the Text widget where it should be.
    The difficult solution is to work out multiple sets of rules, one for each transformation of the theme.
    A compromise would be to make your customization apply to the full-width version of the theme only, letting things revert to default when the theme becomes narrower.
    (If you opt for the difficult solution or the compromise, you’ll probably have to wait for help from our experts designsimply or thesacredpath – I’m not comfortable with the required coding yet.)

  • katylove1990 · Member ·

    Thank you so much for that explanation, I never had any idea that the CSS customizations wouldn’t translate to other devices. I was trying to watch some training videos on creating rules for different elements but it looks like the rules have to be created in HTML as well as CSS, and because I have the free version of WordPress, I can only access the CSS. I think I want to go with your compromise option (to make my customization apply to the full-width version of the theme only). Do you know how I could go about getting help to do this? I’m very familiar with CSS, I would just need some guidance on how to target the full-width theme.

    Thanks so much again!

  • justpi · Member ·

    No, you don’t need HTML access. And I think we can manage the compromise solution. What you do is enclose the problem changes into a code that says “apply only if”: 

    @media only screen and (min-width: 891px) {
YOUR CHANGES HERE
}

    For example, if the only problems were the header searchbox and the icons widget, you would write this: 

    @media only screen and (min-width: 890px) {
.header-search #searchform {
    position: absolute;
    right: -16px;
    width: 178px;
}
#text-6 {
    margin-top: -150px;
}
}

    Obviously you have to break some codes into two: the innocent part (for instance the background color for #searchform) stays the way you have it, the problem part gets enclosed as above.

    I hope this is enough to get you started: I don’t have the time to scrutinize all your CSS and assemble every little bit you need to change. But I can check your blog again after you work this out, to see if you missed something important.

  • The topic ‘Search Submit Issue’ is closed to new replies.