Okay, so I am a beginner but I've read a decent amount on this situation. But I'm trying to put my brand image in my nav bar.
I know it will be something stupid and small. I can always overwrite the style in the HTML but I'd prefer to have it done in a custom css file.
First things first, getting the obvious out of the way. My custom CSS file is the last css declared in the head. I am able to modify other elements on the page like paragraph element colors, so I know the CSS file is linked properly. I understand specificity, at least the core concept of it.
To try to tackle the specificity issue. I first made a custom id for my so within the tag I declared and in my CSS file I wrote
#logo {
height: 110%;
}
Nothing. So I tried being more specific and adding every single class declaration possible that could point to the logo file.
#logo .nav .navbar .navbar-inverse .navbar-fixed-top .navbar-brand {
...
}
again no luck. I tried just .navbar-brand and every single combination of classes. I just don't understand the hierarchy and who is taking precedence. My CSS file, if listed last in the header, with a properly Specified class declaration should overwrite any of bootstrap's code.
I know this question must get asked a lot but after hours of searching for the answer I haven't found it anywhere.
html snippet of the section
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img id="logo" src="images/logo.png" alt="Limit Magazine">
</a>
</div>
The thing is you are specifying the height in percentage, which requires the high of the parent element to be defined. In Bootstrap 3 the parent element of .navbar-brand is div.navbar-header and it has no defined height. For that reason height: 110%; does not work. So you need to define the height of the logo in pixels or define it in percentage and define div.navbar-header height in pixels.
Related
Wnen I use buttons on my page the word spacing is too large by default.
.btn {
word-spacing: 1px;
}
is it correct to use negative word spacing? It seems to do the trick.
.btn {
word-spacing: -8px;
}
It's a little bit strange that it has this big spacing by default, but maybe it's just a matter of preference.
Twitter Bootstrap (bootstrap.css||bootstrap.min.css) does not set word-spacing on .btn elements.
Inspect the element and see what stylesheet is adding that rule, because I can assure you it is not the default bootstrap.css (as of v3.3.6). You are either using a modified (non-standard) Twitter Bootstrap version or you are loading a different theme/framework on top of it.
And yes, as long as you load your own stylesheet last or you are using a stronger selector than the one that's currently setting the rule, you can override the word-spacing property on .btns (whithout "breaking" anything else).
You are only changing the space between the letters of your buttons. As a sidenote, I recommend using word-spacing: 0;, which will render the font exactly as it has been designed, with proper kerning and ligatures.
Had the same Problem with glyphicons inside bootstrap buttons. My problem was that I did forget to close the glyphicon span. Afterwards it displayed as normal.
Wrong example:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-envelope">
Text with spaces
</button>
Working example:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-envelope"></span>
Text with spaces
</button>
I'm building a header for my website. On the left side is a logo which has an underline at the bottom of the image. I then use another image underlaid to continue this underline to the right side of the screen. You can see at http://www.phoenixwebdev.com.au/.
The problem is that in Firefox the heights of the underlines in the two images are often slightly different. The two images are the exact same height, both pngs, both outputted from the same photoshop file. In Chrome, IE, Opera and Safari the underlines are always the exact same height. Below is an image with the artifact taking place.
These are the two images.
and
When changing the browser window size in Firefox, this effect will appear and disappear.
I've played with several aspects of css including height, max-height, position, vertical-align. I've also tried taking the logo out of it's containing <a> tag to no avail. The same thing happens when the non-logo image exists as a background of the parent element rather than an <img>.
Header HTML code:
<div class="top-info">
*top search bar code removed for brevity*
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-header-border.png" style="">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.phoenixwebdev.com.au">
<img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-logo.png" alt="PhoenixWeb">
</a>
</div>
<div class="triangle visible-md visible-lg">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-header-border.png" style="position: absolute; width:100%; height:80px;">
<ul id="nav" class="nav navbar-nav navbar-right"><li class="menu-portfolio">Portfolio</li>
*nav items removed for brevity*
</ul>
</div>
CSS is a bit complicated as this is WordPress and I am using a child theme. I can add this in later if noone has an answer without seeing it summarised here. If anyone can cast some illumination on the problem it would be much appreciated!
I cannot see the problem on my Firefox but you can try not to put line breaks after your <img /> tags as I know it sometimes adds unwanted and unexpected gaps.
The problem is a mixture of both your css and those two images.
Upon inspecting your site at the URL provided, it appears that you are scaling down the images to be 80px tall. The original height of these images is 295px and 295/80 is 3.6875. This causes the browser to have to calculate uneven pixels, which is where the problem is coming from. Ideally your assets should be the same height as what you are trying to show them at unless trying to accommodate retina devices.
I would suggest resizing the actual images in photoshop to be exactly 80px tall.
I found that what was causing the slight height changes was the fact that I was stretching the 'underline' image across the width of the header. It seems that in Firefox compressing or stretching an image horizontally has an effect on the way it is rendered in the vertical direction.
By replacing the underline image with an images as wide as the screen and doing no stretching, the two images lined up fine.
In Twitter Bootstrap 3, given this glyphicon span:
<span class="glyphicon glyphicon-home"> Home</span>
the word 'Home' is rendered in standard sans serif instead of the font of the parent tag.
How can I assign an arbitrary font family to the text inside the span, and still render the icon correctly?
Of course I could move the text outside of the span, but then the would not be honored, would it? Regardless, from a semantic standpoint it would seem reasonable to keep the text described by the icon inside the span.
Here's an example:
That's how Chrome renders the following:
<h1>
<span class="glyphicon glyphicon-check"></span> Scoring
<span class="glyphicon glyphicon-home"> Home</span>
</h1>
The first span is how I want it to look, but is semantically wrong (IMOHO), while the second looks just wrong.
Since the icons are inserted using the :before pseudo-element you can make it so that the glyphicon font only applies to that instead of the actual element:
.glyphicon {
font-family: inherit;
}
.glyphicon:before{
font-family:'Glyphicons Halflings';
}
Demo fiddle
Like this
<span class="glyphicon glyphicon-home"> home</span>
Maybe not the most semantic solution, but it is super easy and works.
Wrap the whole darn thing in a span with nowrap.
HTML
<span class="nobr">
<span class="glyphicon glyphicon-check"></span> Scoring
</span>
CSS
.nobr {
white-space: nowrap;
}
I have this pure-CSS (display) solution for a follow button:
<span class="follow-status following">
<a href="#" class="btn btn-follow" data-user-id="123">
<span class="following-text"><i class="icon-ok"></i> Following</span>
<span class="follow-text"><i class="icon-plus"></i> Follow</span>
<span class="unfollow-text"><i class="icon-remove"></i> Unfollow</span>
</a>
</span>
I'd like to, for example, change the text on hover depending on what shows up. However the a element has the padding, and stylizing the span looks really awkward.
- Should I overwrite the A padding and shift it into the span?
- Should I write the HTML differently?
- Should I just toggle applicable text/style by JS?
- Something else?
you can see the outer span has the class "following"
.follow-status span { display:none }
.following .following-text { display: block}
.following:hover .following-text { display: none}
.following:hover .unfollow-text { display: block}
how would you accompliush that within the twitter bootstrap confines?
Personally, I would remove all padding/margins from the spans inside the anchor and apply your CSS padding/margins etc to the anchor element. That way you future proof yourself incase you want to add different elements inside the anchor element.
I have a span like this
<span class="ui-icon ui-icon-circle-close"></span>
which gives display a close icon of color same as the theme color.
But want to use the red icons which are available for the error.
Which jquery class should I use for that.
I found a class in Jquery css
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon
{background-image: url(images/ui-icons_cd0a0a_256x240.png); }
this image is the image which contains jquery red icons .
But I cant use it.
The span's class only determines the icon.
Set the "ui-state-error" on its parent to change the icon's color to red.
Check the icon example here: http://jqueryui.com/themeroller/ (the bottom of the right sidebar).
When trying to use such icons before text, I got line break problems and a bad alignment between the icon and the text.
To avoid the icon to add a line break, use
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
To get a better alignment for the text, use the following
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
<span style="display: inline-block; overflow: hidden;">Your text</span>
If You want just icon with other color, not whole box as is the example here:
http://jqueryui.com/themeroller/, in bottom right conner
add this to anywhere in Your .css file:
.ui-icon-red { width: 16px; height: 16px; background-image: url(images/ui-icons_red_256x240.png); }
The name and path of the file are depend of the color what You wanted.
And in html:
<div class="ui-icon-red ui-icon-circle-zoomin">
<span class="ui-icon ui-icon-alert"></span>
should do it.
Edited because I think I now found the right class.
Apply ui-state-error to the layer containing the icon(s) and remove the default background and border:
CSS:
.error-state-icon.ui-state-error {
border:none;
background:none;
}
HTML:
<div class="ui-state-error error-state-icon">
<span class='ui-icon ui-icon-info'></span>
</div>
Demo >>