Jump to content

Using IPS styles in Page

Mercury Forever

Recommended Posts

Hello ... I'm building a search engine in html + js, using the IPS's styles, for that I'm copying the native search engine's design, but the styles do not apply well in a page that I created. I understand that the pages inherit the IPS styles, so they should look good ...


I share the code I use for the search engine. It is the same one that IPS uses.

<div class='cWidgetContainer ' data-controller='core.front.widgets.area' data-role='widgetReceiver' data-orientation='horizontal' data-widgetArea='header'>
   <ul class='ipsList_reset'>
      <div data-controller='core.front.search.main'>
         <div class='ipsAreaBackground ipsPad ipsSpacer_top' data-controller='core.front.search.filters' id='elSearchFilters'>
            <div class="ipsPhotoPanel ipsPhotoPanel_mini cSearchMainBar">
               <button onclick="myFunction()" type="submit" class="cSearchPretendButton ipsPos_left" tabindex="-1"><i class="fa fa-search ipsType_huge"></i></button>
                  <input type="text" id="elMainSearchInput" name="q" value="" placeholder="Buscar palabra" class="ipsField_primary ipsField_fullWidth">
                  <button onclick="myFunction()" type="submit" id="elSearchSubmit" class="ipsButton ipsButton_primary ipsButton_verySmall ipsPos_right ipsResponsive_hidePhone" data-action="searchAgain">Buscar</button>
                  <hr class="ipsHr">
   function myFunction() {
     alert("Hello World");

The only additional thing is the JS code, which adds it as a button action, to see that it works well (it does)

Greetings and thanks to all..!!

Link to comment
Share on other sites

Stylings aren’t automatically inherited, for example if they are narrowed down to certain parent elements, which don’t exist in other places. Also, it is not a good idea to repeat “id” elements. They need to be unique on a page. 

You can user your browser inspection tools to see which stylings are applied to the original search section and what is missing or overridden in your custom search. Just looking at your screenshot doesn’t reveal anything. 

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...