Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Trusted Contributor
sergiosandoval
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900
Accepted Solution

How to Style

I've been having some trouble styling my app on BB10.

 

Everytime I do something with in Divs the app wont work.

 

 

Any ideas?

Please use plain text.
Developer
nathanpc
Posts: 134
Registered: ‎05-19-2012
My Device: Torch 9800, PlayBook 64GB, Dev Alpha

Re: How to Style

Could you show some code (preferably before and after)? Because we need more details to help you.
If I helped you please click the "Like" button to support my work.
My apps: CherryNotes - Bookmarked - Requests
Social Me: about.me - Twitter
Please use plain text.
Trusted Contributor
sergiosandoval
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900

Re: How to Style

Well, Ive tried everything. My main problem is adding the background some color.

 

BBui.css code

body, html {
	padding:0;
	margin:0;	
	font-family:"Slate Pro",Slate,"Myriad Pro","BBAlpha Sans",Helvetica;
	font-size: 12pt;
	overflow:visible;
	user-select: none;
	-webkit-user-select: none;
	background-color:#666;
}

 If I add background-color; #000; nothing will happen.

 

Or if I add color: #000;

 

The colors change in Dreamweaver but when I load it ton the simulator it load my #000 color for halft a sec then goes to the default white.

Please use plain text.
Developer
nathanpc
Posts: 134
Registered: ‎05-19-2012
My Device: Torch 9800, PlayBook 64GB, Dev Alpha

Re: How to Style

You need to change the color of your screen, not the whole body, because the screen is always on top of the body.

 

bbUI generates a <div> with the id of the name you gave the screen when you call bb.pushScreen(). In order to do this you should add a id to your top screen <div> (the one with the data-bb-type="screen"), which is inserted into the div with the name of your screen, so you can call it from your CSS with the styling you want.

 

An example:

 

<style>
#test {
  background-color: black;
}
</style>

<div id="test" data-bb-type="screen" data-bb-effect="fade" data-bb-scroll-effect="off"></div>
If I helped you please click the "Like" button to support my work.
My apps: CherryNotes - Bookmarked - Requests
Social Me: about.me - Twitter
Please use plain text.
Trusted Contributor
sergiosandoval
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900

Re: How to Style

This worked! thanks man i appreciate it.

Please use plain text.
Developer
nathanpc
Posts: 134
Registered: ‎05-19-2012
My Device: Torch 9800, PlayBook 64GB, Dev Alpha

Re: How to Style

You're welcome. Don't forget to "Like" and "Accept as Solution". :smileyhappy:

Have fun with bbUI.js, it's the best UI framework I ever seen.
If I helped you please click the "Like" button to support my work.
My apps: CherryNotes - Bookmarked - Requests
Social Me: about.me - Twitter
Please use plain text.