{"_id":"55b83216d9caa30d001aae38","user":"5384345d90c19d5e43a8170c","version":{"_id":"53844558a43e08da4677be12","__v":8,"project":"53844557a43e08da4677be0e","createdAt":"2014-05-27T07:57:12.136Z","releaseDate":"2014-05-27T07:57:12.136Z","categories":["53844558a43e08da4677be13","538619e1ef91f96d49aa1a0b","541e82877eb16bb64f83c0ca","5445a073c3eb3808000c76b2","5445a098c3eb3808000c76b3","54bb05ab522f03150054d9e8","54bb05cf9741c81500078f73","55b7d0e5568be2230092bb92"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"false","version_clean":"1.0.0","version":"1.0"},"__v":5,"category":{"_id":"55b7d0e5568be2230092bb92","project":"53844557a43e08da4677be0e","version":"53844558a43e08da4677be12","pages":["55b7f917568be2230092bc55","55b800e2568be2230092bc85","55b83216d9caa30d001aae38","55b8324ad9caa30d001aae3a","55d3a5bac336ec0d007c222b","55d7732f4ad876170027fa1d"],"__v":6,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-28T18:58:45.698Z","from_sync":false,"order":2,"slug":"inbox-by-knowtify-in-app-notifications","title":"InBox by Knowtify - In-app Notifications"},"project":"53844557a43e08da4677be0e","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-07-29T01:53:26.193Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"You can have full control of how your InBox appears in your application. Right now you can control this by adding InBox specific styles to your current style sheets.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"CSS Selectors for InBox\"\n}\n[/block]\nHere is a list of the CSS selectors used to style your InBox. We've organized them by the different components of the InBox.\n\n(Prefixing each selector with 'body' in your CSS will ensure the correct order of precedence.)\n\n**THE INBOX BUTTON**\nThis is the button that serves as trigger for your InBox. The numbered alert will be displayed on this button and when your users click this button, the InBox will pop up. You can style the actual numbered alert element with this selector: \n\n- **body #inbox_message_count** -- The number element on your Alert Button\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/xXto6tY7T1mHsxMoJADU_Screen%20Shot%202015-07-29%20at%203.39.24%20PM.png\",\n        \"Screen Shot 2015-07-29 at 3.39.24 PM.png\",\n        \"1096\",\n        \"266\",\n        \"#2cacdb\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**THE INBOX CONTAINER**\nThe parent container for InBox is ruled by the following selectors:\n\n- **body #inbox_tooltip** -- The InBox container itself\n- **body #inbox_header** -- The InBox header\n- **body #inbox_header_text** -- The InBox header text\n- **body #inbox_mark_read** -- InBox 'Mark all Read' link\n- **body #inbox_footer** -- The footer of the InBox\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/50hlUlsfSqqW6qKwxiNN_Screen%20Shot%202015-07-29%20at%203.40.28%20PM.png\",\n        \"Screen Shot 2015-07-29 at 3.40.28 PM.png\",\n        \"1874\",\n        \"1172\",\n        \"#2da6d3\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**THE MESSAGE LIST VIEW**\nThis is the main view of the InBox - the view that lists all messages in separate \"Message Cards\". The CSS selectors that relate to this view are:\n\n- **body #inbox_messages** -- The Message list in InBox\n- **body #inbox_messages .message** -- InBox Message cards\n- **body #inbox_message .message .delete** -- Message card delete button\n- **body #inbox_message .message img** -- The image in a Message card.\n- **body #inbox_message .message .heading** -- The message heading in the Message card\n- **body #inbox_message .message .description** -- The description copy in the Message card\n- **body #inbox_message .message.read** -- Message cards \"marked-as-read\" style\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/lKNbYQWS12XyuFUWOInq_Screen%20Shot%202015-07-29%20at%203.41.16%20PM.png\",\n        \"Screen Shot 2015-07-29 at 3.41.16 PM.png\",\n        \"2276\",\n        \"914\",\n        \"#2da6d3\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**THE ADDITIONAL CONTENT VIEW**\nFor every message posted to InBox, you can add additional content that can be displayed upon clicking the message card. This content displays in a new window in the InBox. That window is controlled by the following CSS sectors:\n\n- **body #inbox_content** -- The entire container for this additional content.\n- **body #content_back** -- \"Back-to-Messages\" button \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/QGeMhUpvQ7ag1lNf1vMq_Screen%20Shot%202015-07-29%20at%203.49.36%20PM.png\",\n        \"Screen Shot 2015-07-29 at 3.49.36 PM.png\",\n        \"1146\",\n        \"806\",\n        \"#3da6d1\",\n        \"\"\n      ],\n      \"caption\": \"\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Default styles\"\n}\n[/block]\nIn order to make it easier for you to style your InBox, we've provided a style sheet with some of our default styles below. \n\nHaving access to these CSS selectors gives you a lot of flexibility with the layout and design of your InBox, but we recommend against changing things like the size and positioning of the InBox as that may break how it functions in your application. We would recommend limiting any styling changes to cosmetic elements. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/**THE INBOX BUTTON**/\\n\\nbody #inbox_message_count {\\n  \\n background-color: #fed200;\\n}\\n\\n\\n/**THE INBOX CONTAINER**/\\n\\nbody #inbox_tooltip {\\n  \\n  background: #f5f5f5;\\n}\\n\\nbody #inbox_header {\\n\\nbox-shadow: 0px 1px 2px #c9c9c9;\\n}\\n\\nbody #inbox_footer {\\n\\nbox-shadow: 0px 0px 2px #c9c9c9;\\n}\\n\\n\\n/**THE MESSAGE LIST VIEW**/\\n\\nbody #inbox_messages {\\n\\nborder: 1px solid #e3e3e3;\\n}\\n\\nbody #inbox_messages .message {\\n  \\n  border: 1px solid #e3e3e3;\\n}\\n\\n\\n/**THE ADDITIONAL CONTENT VIEW**/\\n\\nbody #inbox_content {\\n  \\ntext-align: center;\\ncolor: #343434;\\nbackground: #fff;\\n}\\n\\n\\nbody #inbox_content img {\\n\\nmax-width: 100%;\\n}\\n\\nbody #inbox_content h1 {\\n\\nfont-size: 32px;\\n}\\n\\nbody #inbox_content h2 {\\n\\nfont-size: 28px;\\n}\\n\\nbody #inbox_content h3 {\\n\\nfont-size: 24px;\\n}\\n\\nbody #inbox_content h4 {\\n\\nfont-size: 20px;\\n}\\n\\nbody #inbox_content p {\\n\\nfont-size: 16px;\\ncolor: #616161;\\nfont-weight: 300;\\n}\\n\\n\\nbody #inbox_content ul, body #inbox_content ol, body #inbox_content li {\\n\\ntext-align: left;\\n}\\n\\nbody #content_back {\\n  \\ntext-align: left;\\n}\\n\\n/* to create a Button in the additional content box, you can use this class */\\n\\nbody #inbox_content a .button {\\n\\nborder-radius: 5px;\\npadding: 10px;\\nbackground: #2EA9DC;\\ntext-decoration: none;\\ncolor: #fff;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]","excerpt":"Here is how to control the styling of your InBox via your own CSS","slug":"styling-your-inbox","type":"basic","title":"STYLING YOUR INBOX"}

STYLING YOUR INBOX

Here is how to control the styling of your InBox via your own CSS

You can have full control of how your InBox appears in your application. Right now you can control this by adding InBox specific styles to your current style sheets. [block:api-header] { "type": "basic", "title": "CSS Selectors for InBox" } [/block] Here is a list of the CSS selectors used to style your InBox. We've organized them by the different components of the InBox. (Prefixing each selector with 'body' in your CSS will ensure the correct order of precedence.) **THE INBOX BUTTON** This is the button that serves as trigger for your InBox. The numbered alert will be displayed on this button and when your users click this button, the InBox will pop up. You can style the actual numbered alert element with this selector: - **body #inbox_message_count** -- The number element on your Alert Button [block:image] { "images": [ { "image": [ "https://files.readme.io/xXto6tY7T1mHsxMoJADU_Screen%20Shot%202015-07-29%20at%203.39.24%20PM.png", "Screen Shot 2015-07-29 at 3.39.24 PM.png", "1096", "266", "#2cacdb", "" ] } ] } [/block] **THE INBOX CONTAINER** The parent container for InBox is ruled by the following selectors: - **body #inbox_tooltip** -- The InBox container itself - **body #inbox_header** -- The InBox header - **body #inbox_header_text** -- The InBox header text - **body #inbox_mark_read** -- InBox 'Mark all Read' link - **body #inbox_footer** -- The footer of the InBox [block:image] { "images": [ { "image": [ "https://files.readme.io/50hlUlsfSqqW6qKwxiNN_Screen%20Shot%202015-07-29%20at%203.40.28%20PM.png", "Screen Shot 2015-07-29 at 3.40.28 PM.png", "1874", "1172", "#2da6d3", "" ] } ] } [/block] **THE MESSAGE LIST VIEW** This is the main view of the InBox - the view that lists all messages in separate "Message Cards". The CSS selectors that relate to this view are: - **body #inbox_messages** -- The Message list in InBox - **body #inbox_messages .message** -- InBox Message cards - **body #inbox_message .message .delete** -- Message card delete button - **body #inbox_message .message img** -- The image in a Message card. - **body #inbox_message .message .heading** -- The message heading in the Message card - **body #inbox_message .message .description** -- The description copy in the Message card - **body #inbox_message .message.read** -- Message cards "marked-as-read" style [block:image] { "images": [ { "image": [ "https://files.readme.io/lKNbYQWS12XyuFUWOInq_Screen%20Shot%202015-07-29%20at%203.41.16%20PM.png", "Screen Shot 2015-07-29 at 3.41.16 PM.png", "2276", "914", "#2da6d3", "" ] } ] } [/block] **THE ADDITIONAL CONTENT VIEW** For every message posted to InBox, you can add additional content that can be displayed upon clicking the message card. This content displays in a new window in the InBox. That window is controlled by the following CSS sectors: - **body #inbox_content** -- The entire container for this additional content. - **body #content_back** -- "Back-to-Messages" button [block:image] { "images": [ { "image": [ "https://files.readme.io/QGeMhUpvQ7ag1lNf1vMq_Screen%20Shot%202015-07-29%20at%203.49.36%20PM.png", "Screen Shot 2015-07-29 at 3.49.36 PM.png", "1146", "806", "#3da6d1", "" ], "caption": "" } ] } [/block] [block:api-header] { "type": "basic", "title": "Default styles" } [/block] In order to make it easier for you to style your InBox, we've provided a style sheet with some of our default styles below. Having access to these CSS selectors gives you a lot of flexibility with the layout and design of your InBox, but we recommend against changing things like the size and positioning of the InBox as that may break how it functions in your application. We would recommend limiting any styling changes to cosmetic elements. [block:code] { "codes": [ { "code": "/**THE INBOX BUTTON**/\n\nbody #inbox_message_count {\n \n background-color: #fed200;\n}\n\n\n/**THE INBOX CONTAINER**/\n\nbody #inbox_tooltip {\n \n background: #f5f5f5;\n}\n\nbody #inbox_header {\n\nbox-shadow: 0px 1px 2px #c9c9c9;\n}\n\nbody #inbox_footer {\n\nbox-shadow: 0px 0px 2px #c9c9c9;\n}\n\n\n/**THE MESSAGE LIST VIEW**/\n\nbody #inbox_messages {\n\nborder: 1px solid #e3e3e3;\n}\n\nbody #inbox_messages .message {\n \n border: 1px solid #e3e3e3;\n}\n\n\n/**THE ADDITIONAL CONTENT VIEW**/\n\nbody #inbox_content {\n \ntext-align: center;\ncolor: #343434;\nbackground: #fff;\n}\n\n\nbody #inbox_content img {\n\nmax-width: 100%;\n}\n\nbody #inbox_content h1 {\n\nfont-size: 32px;\n}\n\nbody #inbox_content h2 {\n\nfont-size: 28px;\n}\n\nbody #inbox_content h3 {\n\nfont-size: 24px;\n}\n\nbody #inbox_content h4 {\n\nfont-size: 20px;\n}\n\nbody #inbox_content p {\n\nfont-size: 16px;\ncolor: #616161;\nfont-weight: 300;\n}\n\n\nbody #inbox_content ul, body #inbox_content ol, body #inbox_content li {\n\ntext-align: left;\n}\n\nbody #content_back {\n \ntext-align: left;\n}\n\n/* to create a Button in the additional content box, you can use this class */\n\nbody #inbox_content a .button {\n\nborder-radius: 5px;\npadding: 10px;\nbackground: #2EA9DC;\ntext-decoration: none;\ncolor: #fff;\n}", "language": "css" } ] } [/block]