Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How to edit the CSS

edited November 2012 in Support
I want the same Design for RemoteMessages than at my iPhone with BiteSMS. It's called Bitethafly Pro. Can you please explain to me, how to edit the CSS?

Comments

  • Their is an override CSS file located at /var/mobile/Library/RemoteMessages/custom.css.

    As far as I understand you can override our CSS implementation by providing a new implementation of our CSS entries.

    For example to change the background texture you would put in your custom.css file the following:
    body {
    background-color: #FFFFFF;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    margin: 0px 0px 0px 0px;
    color: #111111;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    min-height: 100%;
    padding-bottom: 1px;
    background-image: url(NEW_TEXTURE_URL.png); /*new bg texture*/
    background-attachment: fixed;
    }

    My colleague Al will hopefully be able to give you a more complete answer soon.
  • no thanks - think that's all i need!
  • Alex was nearly there :)

    Basically all my stuff (/css/main.css) gets loaded in first, then anything from custom.css gets loaded in second. This means you can over-ride my styles with your own, but only enter the ones you need to replace, so to ammend alex's example, you will only need the following to change the texture:

    body {
    background-image: url(/blah/tex.png);
    }

    If something isn't working quite right, try using the !important to over-ride it, for example:

    .error p {
    background-color: #000000 !important;
    }

    It's all just basic CSS, I tried to make the javascript output as many useful classes as possible!
  • can you give me please to complete path to your main CSS?
    can't find it at /var/mobile/Library/RemoteMessages
  • main.css is in /Library/Application Support/RemoteMessages/Web/css

    However you don't need to modify anything inside there. You should be able to override everything from custom.css!
  • You can of course mod main.css, but it will get overwritten in the next update, so keep that in mind when making changes. custom.css doesn't get touched.
  • I've some trouble with your CSS. I want to change the background and text color of the chat bubbles. I tried to analyze your CSS with an analyzer tool… but i didn't get it..
  • AlAl
    edited December 2012
    This should help!

    /* All bubbles */
    #messages .text {
    background-color: #FDFDFD;
    border-color: #CCCCCC;
    color: #111111;
    }

    /* Outgoing bubble */
    #messages .me .text {
    background-color: #EAF4FC;
    border-color: #B9C9D3;
    color: #111111;
    }

    /* Outgoing SMS bubble */
    #messages .sms .text {
    background-color: #EEF7DF;
    border-color: #C0D1A5;
    color: #111111;
    }

    /* Failed to send bubble */
    #messages .error .text {
    opacity: 0.3;
    }

    ^^ Change the hex values to whatever then drop it into your custom.css file!
  • perfect - now I'm done.
    If anybody want's that design - it's no problem for me to upload it.
    it looks similar to that Image http://j.mp/Run5K2
  • Devs, could you possibly have a small curated gallery page on this site, to which users can upload and share their css files?
  • this is a very good idea!
  • I agree! I'll get to work on that once we've got the next version out. \o/
  • A gallery for CSS would be a great start, but I'd love to see full on "themes" eventually be released, so designers could include images, custom fonts (and loading them in via @font-face), what-have-you. I know it opens a potential flood gate for bad performance, but think it'd be neat all the same
  • For the current version and the next upcoming release, '/var/mobile/Library/RemoteMessages/custom.css' will be the official way to provide skins/themes.

    If you wish to include custom images, for portability it would best if you could include them inside the actual CSS file using base64:
    http://www.greywyvern.com/code/php/binary2base64

    Whilst you *can* drop images into '/Library/Application Support/RemoteMessages/Web/img/' it is not a good idea since we modify the Web directory with each release, files could get replaced unexpectedly etc.

    I really like the idea of having single files for custom skins which you can just drop into the particular directory and it'll 'just work'.

    We will definitely be looking at including a more efficient theme system in the next feature release (1.2 possibly?).
  • Hey Al, good point on the base64 encoding. Looking forward to seeing this app grow :)
Sign In or Register to comment.