Home Forums Weaver Xtreme Theme Styling the search box…

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #64039
    PolyWogg
    Participant

    I feel like I’m missing something obvious, and the Guide and help didn’t answer it. I added a standard search widget to my Primary area, and left it with no “subject/title”. For some strange reason, my search box doesn’t show my cursor when I click..it’s hidden behind the magnifying glass. But other than that, it is also really boring overall.

    I tried playing with code like this:

    .search-form input {border-style:solid;}

    Even added the important! code…no change.

    What am I doing wrong? I also added a second widget with the subject line…

    Paul

    http://www.polywogg.ca

    #64040
    scrambler
    Moderator

    You have a lot of non standard stuff affecting that search widget, and none of it seems to be coming from the theme.

    You have some CSS rules coming from Jetpack interfering like below

    .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}

    And also some custom CSS below (biggest offender in yellow). Is that stuff you added?

    /**
    * All of the CSS for your public-facing functionality should be
    * included in this file.
    */
    .search-form {
    margin-bottom: 0;
    }
    form.search-form input.search-field {
    color: #444 ;
    border-radius: 5px ;
    font-size: 13px;
    margin: auto;
    width: 100%;
    }
    form.search-form button.search-submit {
    position: absolute;
    bottom: 1px;
    right: 1px;
    top: 1px;
    padding:  0.0em 0.5em 0;
    background-image: linear-gradient(to left, #e0e0e0 0%, #fafafa 100%);
    }
    form.search-form button.search-submit:hover {
    background-image: linear-gradient(to right, #e0e0e0 0%, #fafafa 100%);
    }
    form.search-form button.search-submit .icon {
    width: 1.5em;
    }
    form.search-form button.search-submit svg.icon-search {
    color: #888;
    height: 20px;
    font-size: 12px;
    }
    .search-field::-webkit-input-placeholder {
    color: #aaa ;
    }
    .search-field:-ms-input-placeholder {
    color: #aaa ;
    }
    .search-field:-moz-placeholder {
    color: #aaa ;
    }
    .search-field::-moz-placeholder {
    color: #aaa ;
    }
    /* ———————————————————————- */
    div.entry-content form.hr-searchform-box {
    width: 75%  ;
    }
    So you would first need to remove all custom Stuff so we can start with the default search, then be specific about what changes you wish to make
    #64041
    PolyWogg
    Participant

    I don’t recognize it at all. And Jetpack is down to very minimal settings.

    I didn’t add the second part, and I don’t know where it’s being added…or how. Dang it.

    I feel like something I installed must not have removed itself properly but I don’t even know where to begin at this point.

    A fresh install with over a million words and 3K+ photos etc, not to mention comments, etc. scares the crap out of me.

    I wouldn’t want a backup to keep all the bad settings.

    I tried searching for some of the offending code just to guess what might have left it behind, and nada.

    Crap.

    P.

    #64042
    PolyWogg
    Participant

    THe only two sets of info that *I’ve* added intentionally are these to Weaver a long time ago:

    #content blockquote {
    background-color: #F5F5DC;
    border: 2px solid #ccc;
    border-radius: 25px;
    box-shadow: 1px 1px 1px #ccc;
    font-family: Georgia, serif;
    font-size: 100%;
    font-style: italic;
    margin-left: 75px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-right: 10px;
    line-height: 1.5;
    }
    #content table {border: 2px solid #008000; text-align: left; margin: auto; width: auto;}
    #content tr th, #content thead th {font-size: medium; font-weight: normal; line-height: normal; padding: 2px;}
    #content tr td {border: 1px solid #008000; padding: 3px; vertical-align:top}
    #content tr.odd td {background: inherit;}

     

    And this to my NGG Gallery install to affect lightbox.

    #npl_wrapper.npl-variant-white .galleria-info-title {display: none !important;}
    #npl_wrapper.npl-variant-white .galleria-info-description {text-align: left; font-size: large;}
    #npl_content .galleria-image-share-icons ul li a svg {font-size: 24px; margin: 0 2px 0 2px;}
    #npl_wrapper #npl_sidebar .galleria-image-share-icons {display: none !important;}
    #npl_wrapper .nggpl-comment-pinterest-button, .nggpl-comment-pinterest-button svg:hover, .nggpl-comment-pinterest-button i:hover {display: none !important;}

    #content .ngg-imagebrowser h3 {display: none !important;}
    #content .ngg-imagebrowser-desc p {text-align: center; font-size: 20px;}

    #content .ngg-breadcrumbs {font-size: x-large;}
    #content .ngg-breadcrumb {font-size: x-large;}

    #content .nextgen_pro_thumbnail_grid.pro-thumbnail-caption-template .ngg-caption {font-size: 20px;}

     

    #64043
    scrambler
    Moderator

    Worst comes the worst, we can always override, but let us first try to find where it comes from.

    The CSS file containing the offending CSS is in

    http://polywogg.ca/wp-content/plugins/ngg-smart-image-search/public/css/ngg-smart-image-search-public.css?ver=1.0.0

    So it would imply it comes from a plugin called ngg smart image search. Try deactivating that and see if the gradient background ands centered Icon goes away in the search bar.

    If it does, check settings in that plugins causing this, or if you do not need the plugin, remove it.

     

     

    #64044
    PolyWogg
    Participant

    Hmm…seems promising. I deactivated everything and I can now click in the Search box.

    But I don’t even know how you’re debugging that…can you tell me if all the junk code is gone?

    BTW, did you edit your reply? I got an email verison that was different from what you have above…

    P.

    #64045
    PolyWogg
    Participant

    And thank you for this and future replies. I’m trying not to freak out that I’m going to have to wipe out everything and do a fresh install. Which wouldn’t necessarily be unwarranted with all the plugins and themes I’ve tried over the last five years.

    PolyWogg

    #64047
    PolyWogg
    Participant

    Reactivated everything except the one you found to be messing things up, I can click in the field. Seems normal. Also checked:

    Main options > Fonts & Custom > Custom CSS Rule box –> This just has the code I mentioned above (blockquote and table defaults)

    Customizing ▸ Custom CSS Additional CSS – WP Settings –> Empty

    With that ohter one gone, am I still getting messed up stuff from Jetpack? I could delete JetPack (something I think about regularly, I don’t use much in it).

    PolyWogg

    #64048
    scrambler
    Moderator

    I did edit my initial answer as I had identified the plugin responsible for the issue by inspecting the site CSS with the browser developer tools.

    So did you confirm the culprit was the ngg smart image search plugin.

    Did you just remove the plugin or found settings in it to undo the styling?

     

    #64049
    PolyWogg
    Participant

    I just removed the plugin. I didn’t really need it so it wasn’t worth the effort (NGG is coming out with their own search box functionality shortly anyway).

    I inspected the element in Firefox styling and inspector, never saw what you saw though. Does it look like the “junk” is gone? If so, do you know what the style elements are to affect that box now?

    And again, I really do appreciate the help.

    Paul

    #64050
    scrambler
    Moderator

    Regarding your last remark

    I still getting messed up stuff from Jetpack? I could delete JetPack

    What messed up stuff?

     

    #64051
    PolyWogg
    Participant

    Hi Scrambler,

    Sorry for the confusion, I’m not sure I’m using the right vocabulary. When I first asked the question about the search box, I assume everything in the page was “fine”. Or rather than most plugins were all playing well together. We (well, YOU), found the one that wasn’t (NGG Image Search).

    However, you had said in your first response that there was extra stuff coming from Jetpack too:

    You have some CSS rules coming from Jetpack interfering like below

    <b>.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}</b>

    I have no clue what that is, why it would be coming in, or even what the webkit or screenreader text would be. Literally, I have Jetpack doing very little that is critical in my site (backend stats, downtime monitoring, antispam, infinite scroll (A-hah, maybe this!), a Twitter widget, and subscriptions) and all of which I could do through other means.

    I eliminated the mess coming from NGG Image Search….so I was wondering, since you can see more than I can in your browser developer tools, if JetPack is still sending extra formatting through.

    On a larger scale, I guess I’m worried there’s other miscellaneous leftover stuff in there that shouldn’t be there either, and I just can’t see it. And basically whether I need to worry about it before I start trying to style the search box.

    Poly

    #64052
    scrambler
    Moderator

    All the plugin styling to the search box is gone, and the screen reader text from jetpack has no visual effect on it.

    If you need help styling the search box, let me know exactly what you area after.

    The rule below (would go in the theme Global Custom CSS Rule box) is an example of styling

    /*Style search box*/
    .search-form .search-field {color:grey !important;padding-left:10px;height:20px;width:75%;border:1px solid grey;}

    #64093
    PolyWogg
    Participant

    Thanks Scrambler, I tweaked a few settings:

    /*Style search box*/
    .search-form .search-field {
    color: green !important;
    background-color: #ccffff !important;
    padding-left: 30px !important;
    height:40px !important;
    width:85% !important;
    border: 1px solid blue !important;
    }

    I’m not very good with colour palettes, but better than I had it! 🙂 http://www.polywogg.ca

    Paul

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.