I'm using angular-ui bootstrap carousel and would like to change the right and left navigation links with images. It seems that within the tpl they are hardcoded with ‹ and ›
Does anyone have any recommendations on changing these to images without changing the actual angular-ui bootstrap files? I want to keep this in a library and don't want to change it after each version release.
The only solution I had was a hack to make the control of these angle brackets super small in CSS so they couldn't be seen and placed the images.
.carousel-control {
font-size: 1px
}
.carousel-control.left, carousel-control.right {
background: url(/path/to/[image-here].png) no-repeat !important;
}
Is there a better solution?
The goal for the http://angular-ui.github.io/bootstrap/ project is to have customizable templates so if you don't like the default markup you can swap it for your own. If you want to change carousel's look and feel I would recommend overriding the default template (https://github.com/angular-ui/bootstrap/tree/master/template/carousel).
You can easily override individual templates without messing without touching project's deliverables as described here: https://stackoverflow.com/a/17677437/1418796
Related
Im using yiibooster with yiibootsrap in the yii framework. I dont want the site to be responsive so i set responsive to false. The problem is the default container width is too small, 940px. I want to change this to 1045px.
You could change the width set in protected/extensions/bootstrap/assets/css/bootstrap.css here:
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
Alternatively, this is what I'm currently doing, you can override the CSS in your layout. In my protected/views/layouts/main.php I've added this style to the container div like this:
<div class="container" id="page" style="width:99%;">
Hope one of those options is useful to you...
The CSS is in \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.no-responsive.css
If you look at the css carefully, you will find several places where the 940px is hard coded in the css. This is how you get the 940px.
You can edit this, but I would highly discourage doing so for 2 reasons. First it is highly discourage to hack the standard code. It is better to override it with your theme css. Second, there are other css elements that are tied to the 940px. Changing the 940px in the container css may break other css. To overcome this problem, open up the responsive css, i.e. \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.css
Search for the word #media
Keep on searching until you find
#media (min-width: 1200px) {
what ever enclosed within the braces are the css elements that tied up to the container size. Copy them and place them at the end of your non-responsive file (or better in your theme css).
Thanks
Hi I am using twitter bootstrap for my website. I have put dropdown in collpsable which is in modal window. My problem is the dropdow I have put in collaspable inner, it cutoff the menu. Here is that Image
It should show like this :
I have tried by changing the z-index attribute but unable to show it. Can anybody know what is the problem?
I beleive the css it is using is the .dropdown-menu class whose position is set to absolute. If you change the position to relative it will give you the behavior you desire.
So you could isolate this change in your own .css file so you don't touch the main bootstrap.css file so its easier to update without breaking your styles.
So perhaps something in a custom.css:
.dropdown-menu {
position: relative;
}
I wanted to know how to theme a specific Container and not every Container in the whole app.
#ext-element-18 x-scroll-container
if I wanted to change a background color of this would it be?
app.scss
#ext-element-18 x-scroll-container{
background-color: #000;
}
this is not working
It's bad pratice to base your CSS on auto-generated id's like ext-element-18. It can change anytime. So what I suggest is you use the cls config
Give a cls attribute to your contrainer :
cls:'my-css-class'
Then use this class in your CSS or SCSS file to customize the component.
If you ever need to reach children of your component you can now do something like
.my-css-class .x-scroll-container{
// custom style
}
This works too;
Ext.get(Ext.fly('ext-groepen_detail-1').query('.x-scroll-container')).elements[0].style.backgroundImage = 'url("http://somedomain/path/to/test logo 2.jpg")';
I'm looking for a sample of how to style a list on the results returned from Sencha.
Do I need 100's of line of custom CSS, or are there some predefined styles I need to apply to make my app look native device like?
The default styling should look OK: at least, consistent with the rest of the Touch UI.
Simply provide an itemTpl: property and bind the list to a store: you should see the items appearing in a list like:
You can of course elaborate on the itemTpl as much as you like. There are also some 'standard' UI behaviors such as the disclosure buttons and index bars. See this screencast for examples: http://vimeo.com/19245335
And finally, of course, it's all just HTML & CSS, so you can go completely crazy with the styling if you want. Check: http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/
Use this to make it vertically center aligned always:
.x-list .x-list-item{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}
In the default download of Sencha Touch there is a folder called Kitchen Sink in the demos. There's a basic css file in this demo that you can use as a starting point.
Also, you could give the list or nestedlist a class with the cls:'yourClass' and then, in the source of your project, check the nested divs and their classes...
Another option is to use style:'background-color:black;color:white;' inside the component to get basic styling.
Your best bet would be to check out the kitchen sink special css file as it's indented in a right way and very clear to beginners.
I have a dijit tree that has dnd enabled via the dndController="dijit._tree.dndSource" option. Currently, when drag is initiated, the avatar content seems to be right aligned. The avatar is automatically picking the image and text content of item that is being dragged but
I would like to have this information left aligned.
I believe that writing a custom creator function for the tree is the solution, but can find no examples of the same. Could someone point me to an example where the avatar for dijit tree is customized using a creator function?
Thanks,
Fell
One solution to the problem, which may not work in all cases, is to use CSS classes to style the avatars. Dojo uses the HTML of the tree node in the avatar, or something like that, so if you write a CSS class for both the tree node and tree node avatar, you can have them display differently by using CSS similar to this:
.treeNodeItem {
text-align: right;
}
.dojoDndAvatarItem .treeNodeItem {
text-align: left;
}
I don't have my code in front of me, but I will try to remember to expand on this sometime later.
http://docs.dojocampus.org/dojo/dnd