I'd like to change the shape of bootstrap badges. Not the default ellipse but a rectangle with rounded corners. What is the right way of doing so?
You need to adjust the badge class like the following:
.badge {
min-width: 28px;
border-radius: 4px;
}
try something like that...
.mynewbadge
{
width:20px;
height:20px;
border-radius:4px; //modify it according to your need..
-webkit-border-radius:4px;
background:gray;
color:white;
text-align:center;
}
<div class="mynewbadge">5</div>
hope this will help you.
This was very helpful and was able to get the badge to look exactly like how it is wanted, if anyone else who are beginner like me may find the following useful
//class
<span class="badge bg">[120]</span>
//css
.badge {
background-color: transparent;
float: right;
color:black;
font-size:15px;
}
Related
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I'm hoping someone could help me out! I'm trying to achieve the desired effect seen on this wordpress template from themeforest (http://themeforest.net/item/lespaul-retina-responsive-wordpress-theme/full_screen_preview/4083224 -- scroll right down to the bottom).
Basically having a pixel divider repeat across the page, and have text embedded on the left side. I've tried SOOO many different CSS codes and html... It should be an easy thing to do but I just can't seem to get it.
The closest I've gotten a to achieve this effect is the horizontal divider with Text under it...
/////////////////////////////
TEXT(but centered)
but I would like to have
TEXT ///////////////////////////
Here's my code!
div.divider17a {
height:5px; width:100%; border:0; background:url(images/divider17.png) repeat-x;
margin:35px 0 25px;
padding:0;
text-align:left;
float:left;
width:100%;
}
div.divider_notext {
margin:50px 0 20px;
}
div.divider_left1 {
text-align:left;
}
HTML
<div class="divider17a divider_left1"><h3>Strategic Planning</h3></div>
Any help would be much appreciated... Thanks =D
Is there a reason you're not just using the same styling they use anyway?
<h3 class="widget-heading separator-heading">
<span class="text-holder">Companies that trust us</span>
</h3>
.separator-heading {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}
.separator-heading .text-holder {
display: inline-block;
padding: 0 .6em 0 0;
background-color: white;
}
Can you provide a link to your page and subsequent code? Also if you look at their code this is what they are doing:
.separator-heading, hr.diagonal {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}
If you have to use text you can use the following CSS style:
.divider17a h3:after{
content:"//////////////////////////////////////";
overflow:hidden;
}
and add the following to you container:
div.divider17a{
overflow:hidden;
white-space:nowrap;
}
Demo: http://jsfiddle.net/kyBaN/1/
Alternatively, use a background image.
I am having the css sprite image.And it works fine but the issue is I want the image right side of the anchor tag's text.But it displays in the left side.The sprite image is here.
http://jstiles.com/temp/1360875952/ctrls/css-sprite.png
Expected result:
[Mylinktext]<MyImagehere>
Actual result what I am getting is
<MyImagehere>[Mylinktext]
I don't want to use after pseudo class.Becuase it wont work out in the IE7 browser too.My code is below.
.ctrls
{
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
background-image: url(images/ctrlsprite.png);
//background-image: url(images/css-sprite.png);
background-repeat:no-repeat;
text-decoration:none;
display: inline-block;
padding-left:30px;
}
.ctrls:hover
{
background-position: 0px -252px;
text-decoration:underline;
}
a.magenta
{
background-position:0px -144px;
}
And HTML
<div>
<p>Magenta</p>
Et Movet
</div>
How can I place the image right side of the Text?
How about adding a <span> to the right of the text in the anchor tag? Demo
HTML
<div>
<p>Magenta</p> Et Movet <span class="icon"></span>
</div>
CSS
.ctrls {
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
text-decoration:none;
}
.ctrls:hover {
text-decoration:underline;
}
.ctrls .icon {
display: inline-block;
background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
background-repeat:no-repeat;
width: 16px;
height: 16px;
background-position:0px -144px;
}
.ctrls:hover .icon {
background-position: 0px -252px;
}
When I tried your code, the result seems to be as you want: [Mylinktext]<MyImagehere>. I'm probably missing something. Try and explain what and will try and help you out.
Personally, I wouldn't use a sprite. Instead, I would make one image per color (I find that easier to work with) or, even better, make a font with the character I want (reference: http://mashable.com/2011/11/17/free-font-creation-tools/; I haven't tried any of the programs, so I don't know how good they are)
and then use the #font-face Rule (reference: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).
I'm trying to make a 30x30 pixel box. I don't care if it uses a button, a, span, whatever.
I can't get anything to show up uniformly across all browsers.
Here are the requirements:
Must append to the end of an
existing line (no line breaks)
Must be able to assign click events in jQuery
Must be a square
Appears flat with no sort of bevel
You should be able to achieve what you want simply by styling an 'A' tag in your css.
CSS:
a {
display:inline-block;
width:30px;
height:30px;
background-color:#ccc;
border:1px solid #ff0000;
}
HTML:
See working example: http://jsfiddle.net/fQP6J/1/
<html>
<style>
.btn {
BORDER: 1px solid; COLOR: black; height: 30px; width: 30px;
}
</style>
<button class=btn >btn</button>
</html>
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.