Build with IDX Broker › Forums › IDX Broker Control Panel › Custom CSS in Control Panel › Change Blue Color for all Mobile first pages

Tagged: ,

Viewing 4 reply threads
  • Author
    Posts
    • Aarin Jacobs
      Participant
      April 13, 2017 at 3:28 pm
      Post count: 9
      #1910

      Hi,

      I use mobile first for all of my IDX pages. But the blue color scheme doesn’t match my website at all. How can I change all of the blue via CSS? (i.e. menu bars and submit buttons).

      Attachments:
      You must be logged in to view attached files.
      1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
      You need to be a registered member to rate this post.
      Loading...
    • Nick Leech
      Keymaster
      April 13, 2017 at 3:41 pm
      Post count: 179
      #1912

      I believe these will work:

      /* IDX Broker CSS to change the top Menu on all MobileFirst Search pages 9.28.2015 */

      /* Top Menu – General */
      .IDX-wrapper-standard .IDX-navbar-default,.IDX-navigation {
      background-color:red !important; /* Background */
      border-color:#fff !important; /* Border */
      }

      /* Top Menu – Current page */
      .IDX-navbar-nav>.IDX-active>a,.IDX-nav-mapsearch .IDX-currentPageLink {
      background-color:yellow !important; /* Background */
      color:red !important; /* Font-color */
      }

      /* Top Menu – Other pages */
      .IDX-searchNavItem:not(.IDX-active) a:hover {
      background-color:green !important; /* Background on hover */
      }
      .IDX-searchNavItem:not(.IDX-active) a {
      color: black !important; /* Font-color */
      }

      /* Top Menu Mobile – collapsed menu icon */
      .IDX-navbar-toggle:hover {
      background-color: blue !important; /* Background on hover */
      }
      /* Map Search Header – Background */
      #IDX-mapHeader-Search{
      background-color: white; /* Background-color */
      color: black; /* Font-color */
      }
      /* Map Search Header – Buttons */
      .IDX-btn.IDX-btn-primary{
      color: red !important; /* Font-color */
      background-color: green !important; /* Background-color */
      }

      You could change the color values to be whatever you would like.

      1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
      You need to be a registered member to rate this post.
      Loading...
    • Aarin Jacobs
      Participant
      April 13, 2017 at 5:20 pm
      Post count: 9
      #1913

      Awesome! Thanks!

      By the way, do you have any CSS for mobile? Again, the dark areas don’t really match my brand, so i’d like to make a few changes 🙂

      1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
      You need to be a registered member to rate this post.
      Loading...
      • Aarin Jacobs
        Participant
        April 13, 2017 at 5:32 pm
        Post count: 9
        #1914

        I saw that there was mobile css code in there, but this is what I see on my mobile device… Doesn’t look like the code above is showing on my iphone.

        Attachments:
        You must be logged in to view attached files.
        1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
        You need to be a registered member to rate this post.
        Loading...
    • Aarin Jacobs
      Participant
      April 13, 2017 at 7:02 pm
      Post count: 9
      #1916

      Nevermind, I just turned the mobile wrappter off.. Thanks!

      1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
      You need to be a registered member to rate this post.
      Loading...
    • Aarin Jacobs
      Participant
      April 13, 2017 at 11:14 pm
      Post count: 9
      #1917

      How can I change the color of the blue and green fields?

      Attachments:
      You must be logged in to view attached files.
      1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
      You need to be a registered member to rate this post.
      Loading...
  • Author
    Posts
Viewing 4 reply threads
  • You must be logged in to reply to this topic.