I have a MVC project using the Unify Bootstrap template.
Clients wanted custom icons so I followed the following guide:
http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily
I generated a sprite with the icons, put it in assets/img/icons (I just named it sprite.png)
Copied and pasted all the CSS into my .css file where I put all the custom css.
I want to make it display on a "service-block" I've created, but no joy, however as soon as I point towards one of the original icons it does work. Makes me think something is wrong in the way I'm trying to reference the icons maybe.
Code examples:
Custom CSS:
[class^="cus-"],
[class*=" cus-"] {
display: inline-block;
width: 17px;
height: 16px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("icons/sprite.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
[class^="cus-"]:last-child,
[class*=" cus-"]:last-child {
*margin-left: 0;
}
cus.check{ background-position: 0 0; width: 16px; height: 16px; }
cus.coffee{ background-position: -21px 0; width: 16px; height: 16px; }
cus.p{ background-position: -42px 0; width: 16px; height: 16px; }
cus.pentzil{ background-position: -63px 0; width: 16px; height: 16px; }
cus.simbol{ background-position: -84px 0; width: 16px; height: 16px; }
cus.smile{ background-position: -105px 0; width: 16px; height: 16px; }
cus.star2{ background-position: -126px 0; width: 16px; height: 16px; }
cus.star{ background-position: -147px 0; width: 16px; height: 16px; }
cus.sun{ background-position: -168px 0; width: 16px; height: 16px; }
In my view:
<div class="span4 servive-block-in servive-block-colored servive-block-grey">
<h4>Avoid disputes over team composition</h4>
<p style="color:black;">Players will randomly be arranged in teams — avoiding the human factor.</p>
<p><i class="cus-check"></i></p>
</div>
It stays exactly the same - no icon whatsoever - however when I change that class to "icon-smile" which is one of the original ones, that works.
I've tried fiddling around with the url that references the sprite, but to no joy either.
Am I missing something really obvious?
The class in your icon element is "cus-check" but there is no class like that in your pasted css file.
cus.check{ background-position: 0 0; width: 16px; height: 16px; }
should be
.cus-check{ background-position: 0 0; width: 16px; height: 16px; }
matching the class name that you want. Therefore replace all
cus.XXXXX
with
.cus-XXXX
and that should fix your issue.
Related
I have a background image that's about 1200 (w) x 800 (h) but i just want to use the whole 100% resolution for it. I have a button inside this div container but it's not displaying correctly. The background image won't expand to it's full resolution. It seems like it's only showing enough to allow the button to show.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
width: 100%;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
here's a little picture demonstrating what's going wrong vs what i want:
This has nothing to do with background image not expanding. Your div is simply not tall enough to show more of the image. Going off of your diagram, you want to add some padding to .endFoot.
background-size: cover; is a good choice, but you may also want to consider centering the position with background-position: 50% 50%;.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
If you would like the endFoot div to have the same height as the background, just set the height to 800px, because 100% doesn't change anything in this case.
Also set the endFoot position to relative in order to put the botton to the correct position.
If you are trying to achieve full screen background try :
.endFoot {
width: 100vw;
height: 100vh;
}
For browser support informations of vh and vw units check : https://caniuse.com/#feat=viewport-units
Just add text-align:center to .endFoot class to make center button and add some margin to .customButton class for leave some space to bottom.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0px;
height: 100%;
position: relative;
text-align: center;
}
.customButton {
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
margin-bottom: 10px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
I am trying to use table cells with a background image and transparent text and when you hover over the background image (the td cell) the text appears in a transparent black box.
How do I get the td cell to expand to the entire size of the background image, a width of 100% filling the entire td?
Here is my JS Fiddle where I tried two different approaches (background-size:contain; background-size: cover; and background-size: 100% auto;):
https://jsfiddle.net/wpdyjLgd/#&togetherjs=Bp5OxozhEt
Edited CSS (only includes issue - JSFiddle includes all)
.HomeBody2 {
border-collapse: collapse;
margin: 0;
cellspacing: 0;
cellpadding: 0;
}
#HomeBody2 {
width: 100%;
border-collapse: collapse;
margin: 0;
cellspacing: 0;
cellpadding: 0;
}
.HomeBody2 h1 {
font-family: "Footlight MT Light";
font-size: 56px;
font-weight: bold;
margin: 0;
color: #062F4F;
padding-right: 10px;
padding-left: 10px;
}
.HomeBody2 h2 {
font-family: "Georgia";
color: #FF3B3F;
font-size: 32px;
font-weight: bold;
margin: 0;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.HomeBody2 p {
font-family: "Georgia";
font-size: 24px;
font-weight: none;
margin: 0;
color: transparent;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.HomeBody2 a {
color: #FF3B3F;
font-family: "Georgia";
font-size: 24px;
font-weight: bold;
text-decoration: underline;
}
table td.Why:hover {
border-collapse: collapse;
background: url("images/Money.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
table td.Why:hover > p {
color: #FFFFFF !important;
background-color: #000000;
opacity: 0.8;
}
table td.Why {
border-collapse: collapse;
background: url("images/Money.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
table td.How:hover {
border-collapse: collapse;
background: url("images/PeopleWorking.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
table td.How:hover > p {
color: #FFFFFF !important;
background-color: #000000;
opacity: 0.8;
}
table td.How {
border-collapse: collapse;
background: url("images/PeopleWorking.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
<table class="HomeBody2" width="100%">
<tbody>
<tr>
<td class="Why" width="33.5%">
<p>Spend less on administrative burdens by finding everyday solutions for your agency. Every dollar saved is a minute spent on other important tasks like analysis and policy.</p>
</td>
<td class="How" width="66.5%">
<p>We start with a demonstration of a potential solution, often one used by another Federal agency, since our best solutions are ones that have broad applicability. Then we move into a discovery process, determining your agency's needs. From there, we build a prototype, refine and reiterate that prototype, and enter testing once the agency is satisfied. Following more refining, the solution enters a pilot project, then moving into a live production environment for the end results. We work in an agile environment, meaning new solutions are always around the corner, offering capabilities to current and potential clients.</p>
</td>
</tr>
</tbody>
</table>
I'm trying to get this Sprite done, but i'm stuck and can't figure out a solution.
FIDDLE HERE
I have a simple button:
<a href="#" class="ui-button sub-beta-button">
<span class="button-content">Beta Sign-Up</span>
</a>
and the css:
.sub-beta-button {
height: 78px;
background: transparent url("http://i.imgur.com/PSpIGLA.png") 100% -160px no-repeat;
padding-right: 50px;
margin-left: 30px;
bottom: 18px;
z-index: 1;
position: relative;
}
.ui-button {
background: 0;
border: 0;
cursor: pointer;
display: inline-block;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
vertical-align: middle;
outline: 0;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.sub-beta-button .button-content {
background-image: url("http://i.imgur.com/PSpIGLA.png");
padding-left: 50px;
color: #fff;
font: normal normal 18px/86px "Bliz Quadrata", Times New Roman;
text-transform: uppercase;
text-shadow: 0 0 4px #000, 0 0 8px #000;
overflow: hidden;
min-width: 110px;
margin-left: -30px;
height: 76px;
z-index: 2;
}
.ui-button span {
outline: 0;
display: inline-block;
background-repeat: no-repeat;
}
but i'm getting only this result:
That's the Sprite:
FIDDLE HERE
your .ui-button class removes the background (background: 0).
You can better first get the button working without the ui-button class, and then rule by rule fill up the ui-button class. That way you are sure you are using minimal and correct css.
I've made an edit and removed all the junk code.
If you want the text to the center, edit padding-left and add text align:center
padding-left
and change it to
text-align:center
http://jsfiddle.net/va854
Encountering a CSS push down problem, been searching for fix but not able to find out what exactly is the problem. All the icons are displayed in a stairs-like layout. Need your help in fixing this.
HTML
<div style="/*float: left; width:153.6px;" */ class="footerStyles">
<h4 style=" margin: 0; font-size: 100%;">CONNECT</h4>
<br/>
<br/>
<br/>
<div class="clear"></div>
</div>
CSS
.connectWith{
/*background-position: left center;
background-repeat: no-repeat;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 40px;*/
margin-right: 0;
padding: 0;
float: left;
}
/* email ---------- */
.email{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-indent: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.email:hover{
background-position: 0 50px;
}
/* twitter ---------- */
.twitter{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-indent: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.twitter:hover{
background-position: 0 50px;
}
/* facebook ---------- */
.facebook{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-decoration: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.facebook:hover{
background-position: 0 50px;
}
/* google+ ---------- */
.googleplus{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-decoration: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.googleplus:hover{
background-position: 0 50px;
}
JSFiddle
If you want them side-by-side, then you should remove the <br />s you have. That's what's causing the stair effect.
http://jsfiddle.net/HZ4UU/1/
If you want them to display one underneath the other, then you shouldn't have it floated at all.
You just need to include property clear:both (or left, right).
Take out <br> element after each <a> tag and your problem will vanish. You are floating a elements left, but they are also separated with <br> tags that have some default margin and padding.
I have the following image with dimensions of 200px w x 100px h. Basically, I need the link to look like this
* link
where * is the image. The hover state should kick in when both the image and link are hovered on. My html & css is as follows, but it doesn't seem to work:
Us this location
.current-location {
background-position: 0 0px;
background: url(images/current-location.png) left top no-repeat;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
}
.current-location:hover {
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
I think a better solution would be not to use images at all:
add a span in the <a>:
<span>*</span> Us this location
Style it to show on hover:
.current-location {
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
padding-left: 20px;
}
.current-location span {
display: none;
color: red;
position: absolute;
left: 0;
}
.current-location:hover span {
display: inline-block;
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
SEE FIDDLE
Maybe you should try to set display: block to the .current-location class. Also I don't think that Us this location will be nicely put in 24px by width.