I am using a bootstrap theme for my application in Xpages (using the Xpages Bootstrap theme included). The size of everything seems way too big to me; this app is for web (and maybe the Lotus XPiNC client.
How can I change the size without changing modifying any of the Bootstrap css?
You can override the default font size with some CSS, by changing the font size set on the body element:
body.xsp {
font-size: 14px;
}
But that won't cover everything. There are likely to be a number of other font sizes you need to override for other elements, e.g. buttons
.xsp .btn {
font-size: 14px;
}
This will be noticably easier to do using Bootstrap 4 when it is released. In v4 there is a font-size set on the html element (default is 16px). Then every font-size set in the rest of the Bootstrap CSS uses rem values (root em). This sets the font-size of everything relative to the font size of the root html element. Thus you can easily change the font size throughout your application by making one CSS change to alter the font size of the html element. This will also allow for responsive typography, so you can scale your font size up/down depending on the device size. Check out this link for more info about this feature in Bootstrap 4; look for the "New Unit (rems) for Typography" section.
Related
The default font is a bit large for my target application.
I saw that loadTheme could change the primary theme color, but is there a way to change the default font size across all components?
IFontStyles has a variety of sizes specified, so is there a way to set the font size for all the fabric react components to "small" (FontSizes.small)?
I have tried to set the css font-size to something smaller directly in the outer containers and inside the Fabric component, but the components still seem to render around 14px (ms-font-size-m) once rendering goes inside the Fabric component.
The theme code is fairly confusing to me but it looks like fabric-react uses a combination of fabric-core scss, fabric-react scss and glamor (runtime js->css) to generate stylesheets as needed and return the classnames to react code for className property. There does not appear to be use of inline styles.
loadTheme can override font-szie.
When I put content in under navbar, the content starts top of the page and blocked by the navbar. So how does the jumbotron class place the content below it? I can't figure it out by looking in the chrome dev tools (i kno...).
So how does one generally place content under the navbar?
If you're using the regular, non-fixed navbar, just put your content below it with no special styling.
But if you're using navbar-fixed, you DO have to put body { padding-top: 70px } to avoid your content being obscured.
.jumbotron has no special styling tho avoid this, although it does have it's own internal padding specific to .h# classes which pads them, but the jumbotron itself is still overlapped by navbar-fixed.
See this:
Static Navbar: http://www.bootply.com/gkCqPq2Cti
Nabar-Fixed-Top: http://www.bootply.com/BsBIXWldc2
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
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
Is there a line-height discrepancy in Firefox that would be affecting the line-height on this input element? http://cure.org/curekids/
You'll see in the signup form right in the middle of the page that my email a dress input field has the text vertically aligned very awkward, whereas in Chrome, Safari and IE (gasp) all is well.
What's causing this inconsistency in Firefox and how should I remedy it?
All browsers have a default style for many elements, and they are not at all consistent, so the best approach to it is using a CSS Reset style sheet to remove all those default CSS rules.
The only "disadvantage" is that after including a reset you may have to add a couple more of rules, as you might have used some of the browser's defaults styles, like heading sizes for example.
I have been using the YUI 3 CSS Reset and it works really well, but be sure of including it before your CSS.
on sponsor.css you have div#sponsor-notify-me input#email-field there this padding:10px 10px 0; just change this to padding:0 10px 0; and also change the height:32px; to height:42px;
Firefox and Webkit based browsers treat line-height differently and this affects input elements. One work-around that worked for me was to use the same values for line-height and height in the css properties for each element.
e.g.
#button{
vertical-align: middle;
line-height: 60px;
height: 60px; /* Firefox needs this to be equal to height */
}
You could take a look at this issue as well:
Font height changes between Firefox & Webkit browsers?