need CSS Help (customizing Serach Bar)


  • Ole
    Newbie 19 points
    December 14, 2018 at 12:33 pm

    Hi,

    i have deleted the “Any Location” Sektion from the searchbar in hero1 Header.
    Now I have between “Any Category” and Search Button emtpy space.

    I would like to expand the Any Category Field to the right. (make it wider)

    How to?

    Attachments:
    You must be logged in to view attached files.
  • JamesD
    JamesD
    Super Guru 1,722 points
    December 14, 2018 at 9:49 pm

    Hello Ole,

    To clarify , did you make those changes to the /DT9/_direcotry/elementor/elementor-hero.php file to remove the “Any Locations” input field or did you use CSS?
    If you changed the file then you would just need to alter it appropriately to have it view correctly without adding additional CSS.

    If you’re wanting CSS regardless, then I’d recommend providing a URL.


  • Ole
    Newbie 19 points
    December 16, 2018 at 11:40 am

    Hi James,

    yes i edit the file und deletet following section:
    <div class="col-md-12 col-lg-6">
    <div class="form-group bg-change-focus-addclass">
    <label class="text-primary text-uppercase"><?php echo __("At","premiumpress") ?></label>
    <select class="form-control selectpicker" multiple data-live-search-placeholder="Search"
    data-none-selected-text="<?php echo __("Any Location","premiumpress") ?>" data-selected-text-format="count > 3" data-done-button="true" data-done-button-text="OK" name="country" id="basic_country">
    <?php if(!isset($_GET['country'])){ $selcat = ""; }else{ $selcat = $_GET['country']; } echo $CORE->CUSTOMFIELD_LIST('map-country', $selcat); ?>
    </select>
    </div>
    </div>

    If you changed the file then you would just need to alter it appropriately to have it view correctly without adding additional CSS.

    Can you explain please? I don’t know what you mean.
    Perhaps I have to much or to less code deletetd?

    Best regards,
    Ole

  • JamesD
    JamesD
    Super Guru 1,722 points
    December 16, 2018 at 7:21 pm

    @Ole

    The div blocks are styled with those elements considered, so re-arranging/editing/removing/adding something can alter the layout.

    Note: This solution refers to editing the default theme file /DT9/_direcotry/elementor/elementor-hero.php.

    Remove these lines (around #143-163):
    <div class="col-md-12 col-lg-6">
    <div class="row gap-1">
    <div class="col-md-12 col-lg-6">
    <div class="form-group bg-change-focus-addclass mb-1-xs">
    <label class="text-primary text-uppercase"><?php echo __("In","premiumpress") ?></label>
    <select class="form-control selectpicker" multiple
    data-none-selected-text="<?php echo __("Any Category","premiumpress") ?>" data-selected-text-format="count > 2" data-done-button="true" data-done-button-text="OK" name="catid" id="basic_catid">
    <?php if(!isset($_GET['cat1'])){ $selcat = ""; }else{ $selcat = $_GET['cat1']; } echo $CORE->CategoryList(array($selcat,false,0,THEME_TAXONOMY)); ?>
    </select>
    </div>
    </div>
    <div class="col-md-12 col-lg-6">
    <div class="form-group bg-change-focus-addclass">
    <label class="text-primary text-uppercase"><?php echo __("At","premiumpress") ?></label>
    <select class="form-control selectpicker" multiple data-live-search-placeholder="Search"
    data-none-selected-text="<?php echo __("Any Location","premiumpress") ?>" data-selected-text-format="count > 3" data-done-button="true" data-done-button-text="OK" name="country" id="basic_country">
    <?php if(!isset($_GET['country'])){ $selcat = ""; }else{ $selcat = $_GET['country']; } echo $CORE->CUSTOMFIELD_LIST('map-country', $selcat); ?>
    </select>
    </div>
    </div>
    </div>
    </div>

    This is the portion you keep (and replace the above with):
    <div class=”col-md-12 col-lg-6″>
    <div class=”form-group bg-change-focus-addclass mb-1-xs”>
    <label class=”text-primary text-uppercase”><?php echo __(“In”,”premiumpress”) ?></label>
    <select class=”form-control selectpicker” multiple
    data-none-selected-text=”<?php echo __(“Any Category”,”premiumpress”) ?>” data-selected-text-format=”count > 2″ data-done-button=”true” data-done-button-text=”OK” name=”catid” id=”basic_catid”>
    <?php if(!isset($_GET[‘cat1’])){ $selcat = “”; }else{ $selcat = $_GET[‘cat1’]; } echo $CORE->CategoryList(array($selcat,false,0,THEME_TAXONOMY)); ?>
    </select>
    </div>
    </div>

    Now, check the various browser views to make sure all is well.
    I’ll post a file if this post becomes corrupt.
    Let me know the child theme name if this file isn’t the same as you use.


  • Ole
    Newbie 19 points
    December 17, 2018 at 9:26 am

    Hey James,
    Thank you very much. With your help I got it!
    I had a litte problem with copying your code. The forum seems to break the ” -Signs.
    I’have change the ” manuel in my local editor an now it works.

    Many thanks!!

  • JamesD
    JamesD
    Super Guru 1,722 points
    December 17, 2018 at 9:12 pm

    @Ole,

    You’re welcome, glad it helped.

    Note: The code is the same as in the original file, you’ve only removed the surrounding couple divs that grouped the elements.

Viewing 6 posts - 1 through 6 (of 6 total)

New Business Themes for WordPress 2020

Start your new website today!

View Business Themes