I would like to change the Dribble icon within the team post types to a LinkedIn icon. I know I can do this by changing the class to fa-linkedin. The problem is I can't seem to find the source for the team posttype.
When I click appearance > editor and search for fa-dribbble (or fa-drib*) the code is nowhere to be found? I checked within all the php and html files that are there.
Can somebody help me with this?
Thanks!
The theme I am using is http://www.enginethemes.com/themes/oneengine/ (free download)
This is my website http://www.suuper.co/. The icon that I mean is visible in this print screen.
I found this reference but it does not really make me any wiser.
http://codex.wordpress.org/Post_Formats
That icon is created with the following:
The grey circle (and is found in the styles.css file):
.social-share ul.social li a
{
display: block;
width: 30px;
height: 30px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #bdc3c7;
text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
The yellow colour is added with the following (and is found in the custom-css.php file):
.social-footer li a:hover i
{
color:#efd751;
}
The shape inside the icon is created with the following (and is found in the font-awesome.min.css):
.fa-dribbble:before
{
content: "\f17d";
}
Changing the value in content should work.
This is the working sollution.
Put the following code into your style.css file and you are done.
.fa-dribbble:before {
content: "\f0e1" !important;
}
Related
I'm not great at making websites but am trying to make my own. Basically i split my page up in two, the left side being a menu bar and the right side containing content. To get a 'cool' blur effect over my menu bar i overlay it with a coloured image, where as the user hovers over it, the opacity changes (with a transition).
It is working as intended except when you click on a link and a new page loads, it doesn't register the hover until you move the mouse, this means the opacity of the image is full until you move even a tiny bit, then it jumps to 0.
Ideally when a new page opens and your mouse is already in the left region, the opacity of the overlaying image would already be 0.
#left {
text-indent: 1cm;
width: 23%;
height: 100%;
position: fixed;
background: rgba(51, 51, 51, 1);
}
#right {
padding-top: 2cm;
width: 77%;
height: auto;
position: absolute;
right: 0;
background: white;
}
#img {
position: absolute;
opacity: 0.6;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}
#left:hover>#img {
opacity: 0;
}
I hope i have given enough information, thanks in advance
Bas
How do you 'load' the page? is it ajax.load or? because if so, that language is already in use and therefor better to make a hover handler function in there because there is no way your CSS file is gonna notice on load wether the mouse is on your picture already or not untill you`ve moved it
Sorry i cant put comments down therefor i wrote here.
Is it possible to animate with a CSS transition the status of the cursor?
I've tried with this code but it is not working.
.test {
cursor: default;
width: 100px;
height: 100px;
background: red;
}
.test:hover {
cursor: pointer;
-moz-transition: cursor 500ms ease-in-out;
-o-transition: cursor 500ms ease-in-out;
-webkit-transition: cursor 500ms ease-in-out;
transition: cursor 500ms ease-in-out;
}
<div class="test"></div>
That is not possible with CSS alone. Transition only works on animatable properties; whereas cursor does not appear. For a full list of animatable props, please check here.
Please notice you may also put .gif for the .cursor element; bare in mind there are certain size restrictions that apply accordingly on different browsers.
Cursor is not an animatable property and it would be kind of weird if it were to be honest. If you want to create an animation I would suggest creating a GIF that would start as default and end as pointer.
Then you can use that GIF as shown:
.test:hover {
cursor: url("your-image.gif"), auto;
}
You can, by specifying a url to it in CSS:
.test{
cursor:default;
width: 100px;
height: 100px;
background: red;
}
.test:hover{
cursor:url(smiley.gif),url(myBall.cur),auto;
}
I'm trying to give my flat icons a nice smooth scale effect on hover. I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
Thanks,
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
transition: all .2s ease-in-out;
}
.flaticon-city:hover {
transform:scale(1.3);
}
and this doesn't work either:
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
}
.flaticon-city:hover {
transform:scale(1.3);
transition: all .2s ease-in-out;
}
I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
The issue is simply that you specified transition for .flaticon-city:before, but apply the transform on .flaticon-city:hover.
Edit:
It “doesn’t work” in your example, because you have a problem with specificity:
#page-content #services .service i {
/* … */
transition: color .4s ease;
}
.flaticon-city:hover {
transform: scale(1.3);
transition: all 2s ease-in-out;
}
The first rule as higher specificity than the second one, but they both apply to the same i element that holds your icon – and therefor, you have now specified color as transition property only (because you have overwritten the transition), so changing the transform is not transitioned any more.
Just combine the two transitions into one:
#page-content #services .service i {
transition: transform 2s ease-in-out, color .4s ease;
}
So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. Codepen
HTML:
<div class="object">
<p>Object</p>
</div>
CSS:
* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}
p {
width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}
p:hover {
border-bottom: 5px solid white;
}
How would I go about doing this, as simple as possible?
Thank you ;3
Transitions work in both directions automatically.
The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly.
This means that when you hover it, it becomes solid instantly and then spends time becoming 5px.
But when you unhover it, it becomes none instantly and you can't see the width animating.
Make the default (non-hovered) state explicit so that the border-width is the only thing that changes when you hover it.
Add:
border-bottom: 0px solid white;
to the rules for p.
I don't know if this could help, but in my case I just did like this:
Over:
.<nameOfClass>:hover{
transition: width 0.4s ease-in-out;
}
No over:
.<nameOfClass>:not(:hover){
transition: width 0.4s ease-in-out;
}
Add border-bottom: 0px solid white to p. Css wants to know where to transition back to! :D
for transition add an animate class to the element you want the transition
.animate
{
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
Now when you add this class to your element it will make transition in both hover and hover out.
I have a DIV that's wrapped in an anchor tag; all of the DIV is clickable, even the whitespace that doesn't contain any text (and this is desired, for my purposes).
I have another anchor tag that's absolutely positioned over this DIV with a higher z-index. This anchor tag wraps an image (a "close" icon).
This all works correctly, EXCEPT that I only want the close icon to appear on hover. As currently implemented, the close icon is always visible. I'm not sure if I'm going about this the right way. As a further wrinkle, I need to implement this without using JavaScript, since I'm running on an embedded system and I can't afford to invoke a JavaScript engine.
This only needs to work with WebKit (even more specifically, it only needs to work with Chrome).
Can someone give me a nudge in the right direction?
Here's the CSS I'm using:
.content {
border-top: 1px solid #eff1f2;
border-bottom: 1px solid #c5c5c5;
padding: 8px 11px;
border-left: 1px solid #c5c5c5;
}
div.content:hover {
background-color: #d1d6de;
}
.close {
position: absolute;
right: 100px;
top: 10px;
z-index: 0;
}
Here's my HTML:
<div>
<a href="native://action1/">
<div class="content">
<p>This is my content</p>
</div>
</a>
<a href="native://action2/">
<img class="close" src="images/close.png"/>
</a>
</div>
Here's a jsFiddle that contains my source.
All you need, given your current HTML, is a simple revision of your CSS:
.close {
display: none; /* Added this to hide the element */
/* other CSS */
}
div:hover a .close { /* to make the element visible while hovering the parent div */
display: block;
}
JS Fiddle demo.
With the use of the CSS transition properties, you can also use fade in/fade out:
.close {
opacity: 0; /* to hide the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
/* other CSS */
}
div:hover a .close {
opacity: 1; /* to reveal the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
JS Fiddle demo.
It's also worth noting that, prior to HTML 5, it's invalid to wrap a block-level element inside of an inline-level, the a, element. In HTML 5, though, this seems to be valid (though I've yet to find the W3 documentation to support this).