Change Blue Color for all Mobile first pages 2017-04-13T15:28:08+00:00

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

  • Author
    Posts
  • Aarin Jacobs
    Participant
    Post count: 9

    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
    Post count: 109

    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
    Post count: 9

    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
      Post count: 9

      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
    Post count: 9

    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
    Post count: 9

    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...

You must be logged in to reply to this topic.