I'm trying to achieve effect shown on the second picture - namely the green icon. My current state is on the first picture (working on icon with heart symbol but that doesn't really matter).
Current state
Goal
Digging on problem I've decided to break it into parts:
Render base icon (with white color)
First circle around the icon (with desired color - red in this case)
Rectangle below the icon
Second circle around the icon (white again) - this should overpaint a part of rectange from point 3 to create the edges effect.
I've been able to complete first two points with my current code:
<i class=\"fas fa-heart fa-lg\"></i>
Where fa-heart is overriden like:
.fa-heart {
display: inline;
border-radius: 60px;
box-shadow: 0px 0px 2px #888;
background: #d44d32;
width: 18px !important;
height: 18px !important;
text-align: center;
line-height: 30px;
vertical-align: middle;
padding: 3px;
color: white !important;
}
Code is taken from my asp mvc app due to this first line of my code may look strange - I'm computing the icon state in view.
One possible solution I've found doing my research is to use stacked icons. I'd very much like to render entire effect using one icon - if possible.
You need to change your padding: padding: 5px; also, having !important in w/h is unadvised.
Related
I've created three circles that are used for the dot controls/pagination on an image slider. For some reason on page load in Chrome they always appear first as squares and not as circles. Once you interact with them they then turn to circles. How can I get them to be outlined circles on page load? (if i just fill in the circles with a background they work and are circles on page load but I want them to be outlined circles on page load)
Any ideas? Thanks!
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
margin: 0 8px;
height: 8px;
width: 8px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border: 2px solid #b6b6b6;
}
Thanks for the help guys! I figured out what the issue was but I don't quite understand why. I added an overflow to the dots and this took care of the bordered showing up as a square rather than a circle like I wanted on page load.
overflow: hidden;
I don't know exactly what do u mean.
But I think issue is html of slider creates dynamically via js on dom or page load event, so css applied with some delay.
Check source code of your page with right click->view source to ensure.
Try to call your slider plugin immediately after slider container, not at the end of page for ex.
I believe this is a pretty basic question for someone who knows CSS language (not my case lol). I'm using this code hosted at jsfiddle to make some speech balloons in my website. The problem came when the message inside the balloon is little. For example, in the code posted above, change the code from "bubble you" balloon to something like:
<div class="bubble you">Hi.</div>
You will see that the balloon stay on the same horizontal line as the previous balloon, and this is ugly and strange. I want the balloons to stay one after another (one below another) even when the message is small like a simple 'Hi'... What properties should I change or add in the balloons classes to get this?
Add clear: both to .bubble.
Demo here:
http://jsfiddle.net/sifriday/mek5Z/1957/
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 10px 18px;
position: relative;
vertical-align: top;
clear: both
}
I've been trying to solve this issue for a few hours, and I've searched for a good solution without much luck. It's driving me bonkers, fiddling with the padding and line-height. Vertical aligning it isn't doing anything (it was suggested in another thread here).
Basically I'm trying to create a responsive nav menu that, when the icon is tapped or clicked, will push down the page when the menu is revealed. I'm using a mobile-first strategy without using a framework (the site is simple so I feel Bootstrap is overkill).
But the icon seems to have an extra 1px on top.
I'm using Chrome, and I've reproduced the issue for you guys to look at.
<i class="fa fa-bars"></i>
i {
width: 48px;
height: 48px;
margin-top: 24px;
box-sizing: border-box;
border: 2px solid #555;
border-radius: 50%;
}
.fa-bars {
color: #555;
font-size: 24px;
text-align: center;
line-height: 48px;
}
You can view the result: http://jsfiddle.net/thecornishninja/jK8rD/
See the icon is not vertically centered? It looks like it has an extra 1px or 2px on top, and it's there whether I use rem or px.
I was using the code from Fontastic, but for demo purposes I'm using the simpler CSS from Bootstrap. The problem exists with both methods.
It's probably something ridiculously simple and I may well end up kicking my own butt, but my brain's fried so I hope you can help.
You need to change the css for .fa-bars:before, that's the element that is mispositioned.
Try:
.fa-bars:before {
content: "\f0c9"; /*This is what the creator of font-awesome put in to show the lines character */
display:block;
margin-top:-1px;
}
Also, it seems the height of the lines altogether is odd, so it won't position correctly. I changed the size of the circle to 49px so that it'd be centered.
Forked jsfiddle.
I would like to adjust the CSS code for the Fiore theme on Wordpress. My URL is theuniversalasian.wordpress.com. It is an upgraded premium wordpress account.
With the upgrade, I am able to edit the CSS, but a number of problems are happening. If you could help me with the code, I'd appreciate it!
I want to make a white background for the post texts. When I do that, it moves the date, comments, edit links on the left side. I would like those to stay up top near the post title ribbon. At the moment, the site does not show the changes I wanted because I keep fiddling with the code....
If possible, I'd like the white background for the text to have rounded corners....
The left column somehow loses the graphics....There should be a top cherry blossom graphic like the original theme (http://fioredemo.wordpress.com/), along with the rest of the ribbon image for the post titles.
I cannot paste the entire code here..., but hopefully you will know what I mean from the site...
For the first two, I'll work on the last now, you needed to locate the .entry-content class in your css file.
The first style I added was the background: #fff; which added the white background and then I added border-radius: 7px; which gives it rounded corners.
.entry-content {
color: #2b2b2b; /* changed to black font since you wanted a white background */
width: 300px;
padding: 10px;
border: 0 solid #000;
margin-left: 10%;
margin-bottom: 10px;
margin-top: 10px;
background: #fff;
border-radius: 7px;
}
For the third question, I am not 100% positive but since you removed the nav on your site I believe you removed the image as well. For some reason on the template page I can not find any styles when you inspect an element. The image is apart of the nav/header area so this is just my best guess.
EDIT: Moving the comment/date block around.
.entry-meta {
color: #333;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 1px;
position: absolute;
text-align: right;
text-transform: uppercase;
width: 150px;
top: 0;
left: 35%;
}
I have a division that has a background image but it needs to be a varible size. I'm using three images. One of the top, one for the bottom and a repeating one for the middle.
I've only got one div to work with and given the middle background image to that and then used the before and after pesudo classes to place the other images. The image from the main division shows up behind these two since they are semi transparent. Is there a way round this in css or a better method to do it?
HHTML:
<div class="faq">
<strong>Q. Who was the greatest business man?</strong><br />
<p><strong>A. </strong>Noah. He kept his stock afloat, while the rest of the world went into liquidation.</p><br />
<strong>Q. How should my employees let off steam?</strong><br />
<p><strong>A. </strong>Take them see to see the comedian Sampson. He'll bring the house down.</p><br />
</div>
CSS - style
.faq{
background: transparent url(../images/image_middle.png) repeat-y center;
color: #ffffff;
display: block;
}
.faq:before {
background: transparent url(../images/image_top.png) no-repeat center top !important;
}
.faq:after {
background: transparent url(../images/image_bottom.png) no-repeat center bottom !important;
}
CSS - layout
.faq:before {
padding-top: 20px;
display: block;
content: "\A";
}
.faq:after {
padding-top: 14px;
display: block;
content: "\A";
}
.faq{
margin: 20px 0 5px !important;
padding: 0 20px 0 15px !important;
}
The best way to do this is by using multiple backgrounds - see https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds. in this way, you can specify the 3 different images and their positions as styles for the element. List the top image first.
If your browser support requirements won't work with CSS multiple backgrounds, you can get the same result by styling other elements - such as a h1 or p:last inside your div. This approach is more complicated, since you have to be very careful about the position of elements inside that div.
Note that a background or image will always show through transparent areas of an image above it. If you don't want this, you must put something opaque into that cover-up image - such as the background color that you're trying to fade to.
For more detailed help, please post a self contained example of the code you're working with.