Forum Discussion

memerylane's avatar
memerylane
Expert
14 years ago

More on Colors: Customizing the Mobile Interface

I'm just going to keep coming with questions on mobile until you gurus get tired of answering them :smileyhappy:

 

As we continue to approach our launch, I'm looking to customize the mobile interface a bit so that our branding is stronger and the visual presentation is sleeker.

 

Attached is a snapshot from my iPhone of the community. I'm interested in the CSS that would allow me to customize the colors on following components/areas independently:

 

  • The background at the top (currently red); I know that this is the foreground, but I don't like that it affects some of the other colors
  • The red "Forums" text toward the top
  • Blue color behind the "Forums" text
  • The red "Launch Q&A" text
  • Blue color behind this text (I think this is Primary 1?)
  • The red "Up" text
  • The blue arrow's color behind that

I guess what I'm also getting at is that I don't know which colors affect which areas on the Mobile interface. I'd love to see a comprehensive document on skin color settings like you have for the desktop interface.


Finally, would it be possible to have our logo instead of just the text at the top of the page? That would fit our needs the best from a branding perspective.

 

Thanks!


ADA Mobile Community.PNG

2 Replies

  • RickyS's avatar
    RickyS
    Lithium Alumni (Retired)
    14 years ago

    Hi memerylane,

     

    You can add a mobile logo in the header by going into your mobile skin in Studio and adding a reference to whatever mobile logo asset you upload in the page header section of the wrapper.

     

    Keep in mind that with the limited UI in mobile browsing, you will want to keep the mobile logo to a minimal size/dimension.

     

    Here are a couple examples as reference:

     

    http://forums.att.com

     

    http://supportforums.blackberry.com

     

    Also, please find attached the mobile colors guide, similar to the desktop version you have.

  • AdamN's avatar
    AdamN
    Khoros Alumni (Retired)
    14 years ago

    In addition to the mobile colors guide that Ricky mentioned, one way that I've found particularly helpful in figuring out the styling overrides is to switch into the Mobile view on a desktop/laptop so that you can use your usual full-featured debuggers (ie. FireBug, Chrome Developer Tools, etc.)

     

    To switch into mobile view, you can use the following query string:

    ?device-view=mobile

    For example, to view the Lithosphere in mobile view:

    http://lithosphere.lithium.com/?device-view=mobile

    Here's a TKB article on the topic for reference:

    http://lithosphere.lithium.com/t5/Growing-Successful-Communities/Seeing-the-mobile-view-on-a-desktop-computer/ta-p/6559

     

    Now you can easily use the "inspect" tool in your favorite debugger to figure out the classes and IDs to use in your CSS selectors.