Is it possible to create like [this alert][1] in CSS? I seen this alert in my cPanel dashboard. Where I also try to view Css of that code when I try to view it recut to login page. I couldn't done.
as simple as this :
i have added FontAwesome for icon test. you can font icon list Here
to find the related icon code for .alert:before content click on the icon in the list and copy the unicode text.
dont forget to put a backslash before the unicode in content.
.alert {
max-width: 550px;
position: relative;
padding: 10px 20px 10px 10px;
margin: 10px auto;
border-radius: 3px;
background-color: #faf8df;
border: 2px solid #f5c340;
border-left-width: 40px;
}
.alert:before {
content: '\f071';
font-family: "FontAwesome";
position: absolute;
left: -27px;
top: 50%;
transform: translateY(-50%);
color: #fff;
}
.alert .close {
position: absolute;
right: 8px;
cursor: pointer;
top: 10px;
color: #999;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="alert">
<b>Warning:</b> this is the text you want to show as a warning message.
<span class="close">×</span>
</div>
Related
I wanted to try and create a bigger input and submit button box for a simple JS function for my course. However, when I changed the height and font size of my input my submit button no longer functions. I know it has to do with the height because when I remove it, it works. How can I work around this?
I will provide the URL for my website my CSS code that starts the input and the button is on line 273.
http://web.gccaz.edu/~pet2153867/test/
Thanks!
Add position: relative; and z-index:9999; to your button style.
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
height: 50px;
position: relative;
z-index: 99999;
}
this problem caused by H1 Tag. h1 tag crosspvered with your button. removing bottom:70px will also fix your problem.
#projects h1 {
position: relative;
bottom: 70px;
}
I've added a custom weather web part to my SharePoint page, but I want a hover message that displays additional info.
The pieces I've got worked out look great in Chrome, but not so great in IE 11. I need this to look the same in both - any tips?
.tooltip {
display:inline;
position: relative;
font-family:Arial,Helvetica,sans-serif;
font-size:9pt;
}
.tooltip:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
top: 6px;
color: #fff;
content: attr(title);
left: 5px;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
/*width: auto;*/
}
.tooltip:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
top: 40px;
content: "";
left: 25px;
position: absolute;
z-index: 99;
}
Here's my JSFiddle: http://jsfiddle.net/hcoa82wb/
The problem was the .tooltip tag using the display: inline When this is changed to display: inline-block both IE and Chrome began to show the messed up version of the tool-tip. From there it was just a matter of changing the top properties to display how you would want it. Here is your JS Fiddle updated. I left comments in the CSS code.
On the same note I would recommend using a different Class name other than .tooltip I would hate for you to run into issues in the future if someone adds a WebPart or a 3rd party SharePoint plug-in that uses the same class name. I've had issues with that in the past.
Sometimes ago I found a Site, URL is http://www.fun71.com i saw that when i bring mouse to the image than image cation is hide. can someone tells he how can i do this with my site ?
is is done by CSS or by Javascript ? If it is CSS than please code for me. my Friend Gives e CSS which is
.wp-caption .wp-caption-text {
font-size: 0.8em;
line-height: 17px;
margin: 0px;
width: 100%;
padding: 0px 0px 5px;
background-color: #FFF;
position: absolute;
bottom: 0px;
left: 0px;
opacity: 0.7;
}
but it is not working for me. plz help me
What worked for me:
Removing the image title visible on hover by adding this to the theme functions.php
// Title Removal from WordPress image
add_filter( 'wp_get_attachment_image_attributes', 'remove_image_text');
function remove_image_text( $attr ) {
unset($attr['title']);
return $attr;
}
Source
if all your image captions have the wp-caption-text class then simply hide the text on hover as below.
.wp-caption .wp-caption-text {
font-size: 0.8em;
line-height: 17px;
margin: 0px;
width: 100%;
padding: 0px 0px 5px;
background-color: #FFF;
position: absolute;
bottom: 0px;
left: 0px;
opacity: 0.7;
display:block;
}
.wp-caption .wp-caption-text:hover{
display:none !important;
}
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
I'm trying to create a custom checkbox only using css and no images, but I am having a bit of trouble.
I followed a few tutorials online, but I seem to have hit a road block and help would be great.
My css looks like this
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
input[type='checkbox']:checked {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 5px;
position: relative;
bottom: .3em;
-webkit-transform: rotate(45deg);
}
What keeps happening is when I do the rotate the whole box rotates and I have tried adding a :after to it, but it didn't seem to do anything.
You could use a unicode check, or even an icon font if you want to get really fancy...
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
/* added content with a unicode check */
input[type='checkbox']:checked:before {
content: "\2713";
left: 0.2em;
position: relative;
}
Demo
As a matter of fact I tried the same thing on my website (http://e-home.mx) but I ended up hiding the input element with css and adding a label to each one which is the one that "emulates" its behavior like this:
HTML
<input type="checkbox" id="c8" name="c8" />
<label for="c8"><span></span>Label here</label>
CSS:
input[type="checkbox"] + label{color:#000;font-family:Arial, sans-serif;}
input[type="checkbox"] + label span{
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") left top no-repeat;
cursor:pointer;
}
input[type="checkbox"] {display:none}
input[type="checkbox"]:checked + label span {
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") -19px top no-repeat;
}
Here is the fiddle:
http://jsfiddle.net/xedret/bTAGU/