How to find graphic file to edit social icon - css

I am using a WordPress theme called Divi. This isn't a WordPress question. There are a number of provided social media icons, but I need a Soundcloud icon, and that is not provided. I'm not understanding how these icons are populating the page as they don't seem to be graphics, but rather are a font? However, I am unable to tell from the source code what is going on (inexperience).
What I'm trying to do is either add an icon of my design, or replace an existing icon. Can someone help point me in the direction if where I should be looking within my files to find the actual icons?
You can see a live site here and the icons are at the top right:
http://rattletree.com/wordpress2/
The dev code has this for the Facebook icon:
<ul class="et-social-icons">
<li class="et-social-icon et-social-facebook">
<a href="#" class="icon">
<span>Facebook</span>
</a>
</li>
</ul>
And the css has this:
.et-social-facebook a.icon:before {
content: "\e093";
}
#top-header .et-social-icon a {
font-size: 14px;
}
So that makes me think this is a font, but I don't know how or where I can edit that font? Thanks for any help!

This looks like the font pack you are using:
http://www.elegantthemes.com/blog/resources/elegant-icon-font
It doesn't look like it has an icon for soundcloud, but you could use the cloud one:

So just add this to the style sheet:
.et-social-soundcloud a.icon:before {
content: "\e002";
}
Also, here's a tutorial:
https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website

To add an icon of your design, add the following code to your stylesheet.
#top-header .et-social-icon.soundcloud a {
width: 15px;
height: 25px;
}
.soundcloud a.icon:before {
content: "";
background: url('https://placehold.it/15x25') 100% 100% no-repeat;
height: 100%;
width: 100%;
display: inline-block;
}
Make sure you create an icon, add the icon image to theme folder and update the url in the above code to point to that image.
Also add the class soundcloud to your menu in WordPress backend.

Related

Change size of an image appearing by hovering over text css

I have a text on which when you hover (or when you click on it on mobile), a picture appear. I used this stackoverflow answer to make it work.
I'm now trying to make the picture change size automatically, so the picture fit both on mobile and computer.
a.hovertext1:after {
content: 'Text that appears before I hover.';
}
a.hovertext1:hover:after,
a.hovertext1:focus:after {
content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
display: block;
}
<a name="return1" id="return1"></a>
I know I need to add width:100%; somewhere in my code, but I have no idea where. I tried putting it in the a.hovertext1:focus:after{...} block, but it didn't do anything.
Hope someone can help me!
Is there any reason for which you want to use pseudo elements ? There is a different approach using simple display property on hover.
img {
display: none;
width: 100%;
}
a:hover + img {
display: block;
}
a:hover {
display: none;
}
Text that appears before I hover
<img class="img" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />
Also I suggest to use buttons instead of links. Buttons are used for actions that affect the website’s front-end; links are used for navigation and actions that don’t affect the website.

Can't Modify Imported Font from FontAwesome

I am unable to edit this font from FontAwesome. When I add <i class="fas fa fa-child"></i> to my code I can see the child figure. But when I added this to my CSS:
.fa {
background-color: green;
color: red;
}
But, nothing happened to the child icon. I know this is something little but I can't figure out how to solve the issue.
FontAwesome5 that you are using is SVG based, so u need to edit it like SVG.
Visit - https://css-tricks.com/using-svg/

How to remove wonderplugin.com link from WonderPlugin slider

I am relatively new to the WordPress. I am using free version of the WonderPlugin slider in my site. There is a link coming in the top left corner of the slider showing wonderplugin.com.
Is it possible to remove that link from the free version of the WonderPlugin.
I am using WordPress 4.0 and WonderPlugin Slider Free Version 2.6
First of all if you want to use free version of the WondePlugin, you should be fine to show the wonderplugin link on the slider. You can avoid that link by using commercial version of plugin.
As far as free version is concern, the link can be removed by the custom css.
On the edit slider screen of the plugin click on Option tab.
Click on Advance Option and put following css in the Custom CSS box.
div.amazingslider-box-1 :nth-child(3) {
visibility: hidden;
}
This will hide the link.
CSS
.wonderpluginslider-container{
display: none
}
JS
jQuery('.wonderpluginslider-container')
.show()
.find('a[href="http://www.wonderplugin.com/wordpress-slider/"]')
.parent().remove();
Thanks for the answers but it doesn't work with the WonderPlugin Grid Gallery Free Version 2.2., which I was looking for when I stumpled over the thread. To remove the watermark from the grid gallery, go to wonderplugin-carousel/engine/wonderplugingridgallery.js and look for
<div style="display:none;position:absolute;top:4px;left:4px;padding:2px
Change the display:block to display:none and the watermark is no longer visible.
You have to search for:
wpositioncssdefault:"display:block;position:absolute;bottom:8px;right:8px; line 162
in the wonderplugincarousel.js and then you change display:block; to display:none;. Cheers!
wonderplugincarousel.js
Line No.259 replace display:block with display:none,
change visibility:visible to visibility:hidden
and remove !important
and change mklink.css("visibility")=="visible" to mklink.css("visibility")==""
Open engine\wonderplugingallery.js and search for var commonOptions. Then change
var commonOptions = {
/* other options */
...
fv: true,
...
}
to
var commonOptions = {
/* other options */
...
fv: false,
...
}
and the plugin will take care rest(no custom CSS and JS headache).
I have checked it with Version 8.6 and it's working.
These solutions are all updated and solved by WonderPlugin admins. But here is the new solution for WonderPlugin Portfolio Grid Gallery (Version 11.8):
open: engine\wonderplugingridlightbox.js
on line 66 :
title='WordPress Gallery'><div style='display:block;width:180px;height:20px;text-align:center;border-radius:3px;-moz-border-radius:3px
Change display:block to display:none
And here we go!
Open your style.css and then put the code below
div.html5gallery-container-0
div.html5gallery-box-0
div.html5gallery-elem-0
div.html5gallery-elem-img-0
a{
visibility: hidden;
}
A simple solution
div.amazingcarousel-image :nth-child(3) { visibility: hidden;}
because free version link is the 3rd child div in parent div with class- amazingcarousel-image
search for this.options.watermarktext=this.options.vermk; and replace this.options.vermk with nil
Good way to purchase the plugin and it is removed automatically but in free version you can add the following css to make it invisible.
div.amazingslider-box-1 div:nth-child(3) {
visibility: hidden !important;
width:0 !important;
height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
There is no style.css file. There are only wonderpluginslider.css and wonderpluginsliderengine.css
So do you know where the file and code?
Also i inspected that element on my internet browser and i saw this codes:
<div class="amazingslider-text-box-1" style="display: block;">
<div class="amazingslider-text-wrapper-1" style="width: 100%; height: auto; position: absolute; left: 0px; bottom: 0px; margin-bottom: 0px;"></div>
</div>
<div style="display:block;position:absolute;top:6px;left:6px;font:12px A…or:#fff;opacity:0.9;filter:alpha(opacity=90);cursor:pointer;"
<a target="_blank" title="Responsive jQuery Slider" style="text-decoration:none;font:12px Arial,Tahoma,Helvetica,sans-serif;color:#333;" href="http://wonderplugin.com/wordpress-slider/">
WordPress Slider Free Version
</a>
</div>
"Wonder Plugin" (Free Wordpress Slider Plugin)

Readding a link to a Page Logo using CSS

I've installed the Social Fixer plug-in to tinker with the CSS of Facebook. I've been doing a decent job and playing with the overall look of it except for one little detail that's been bothering me
I've reached the point where I've decided to change the Facebook logo to a gif I got online and modified. The change is made no problem except that clicking on the logo no longer takes you back to the Facebook homepage.
The change I made is the following:
#pageLogo
{
content: url('http://i.imgur.com/hrsJAJh.gif');
height: 82%;
width: auto;
position: relative;
left: -35px;
}
I've tried using background-image: url(...);, but it just puts my new logo behind Facebook's official logo. I realize that using content: url(...); is also changing (i.e. removing) the anchor to the homepage found in:
<h1 id="pageLogo">
<a data-gt="{"chrome_nav_item":"logo_chrome"}" href="https://www.facebook.com/?ref=logo">Facebook</a>
</h1>
I've tried changing the content of the anchor itself to add the link back to the homepage:
#pageLogo a
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:link
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:visited
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:active
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:hover
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
But it doesn't work and I'm guessing that's because I'm changing the content of the anchor (i.e. the "Facebook" text) and not the actual "href" of that anchor.
I've looked here for anyone with a similar problem and most answers said to modify the HTML or use Javascript instead. With Social Fixer, I am only able to modify the CSS.
I've checked w3 for an attribute for "href" and "data-gt" just in case, but no luck.
Just to reiterate after all this text, I want to change Facebook's logo while keeping the link to the Facebook homepage only using CSS.
The Facebook logo is, at the time of this answer, a background-image of the a link inside the h1#pageLogo, not the background of the element itself. This is why your attempt at changing the background-image resulted in an image behind the logo.
You'd want to change the background-image of the link. Something like:
#pageLogo a {
background-image: url('http://i.imgur.com/hrsJAJh.gif');
background-position: top left; /* probably */
height: "your image height";
width: "your image width";
}

MVC3 Access UI Icons

In ASP.NET MVC3, how do I access the user interface icons which are included in the default package. They are located in the ~/Content/Themes/Base/Images, however, they are in an image map. An answer or link will work, just unsure of how I am supposed to integrate them and could not find an answer searching google or SO.
You'd do something like this:
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_469bdd_256x240.png);
}
That would be a generalized icon CSS class to indicate it as an icon and set the inheriting properties of width and height, as well as the grouped image to map icons off of. Then you'd reference each like so, using mapping:
.ui-icon-someIcon {
background-position: -32px -16px;
}
And then you could apply this to a DOM element:
<span class="ui-icon ui-icon-someIcon"></span>

Resources