custom social media icons

  • Author
    Posts
  • #1157040

    drjmlosada
    Member

    How can I change the original social media icons to customized ones?

    thanks in advance

    The blog I need help with is drlosada.com.

    #1157134

    unlusoycan
    Member

    If you are asking about the little Facebook and Twitter icons in your blog, they come with your theme, Linen.

    I don’t think that you can’t change them, but you can add the Image widget. You just need to have the URL of the icons, and you can link them to your accounts from the Widget editing box.

    #1157165

    drjmlosada
    Member

    Are you sure?
    No more ideas?

    thank you!

    #1157166

    timethief
    Member

    Hello there,
    Your theme is a premium theme and read-access to the premium themes forum is now open to all users so you can search to see if your question has been previously asked and answered there. The premium theme forums are at http://premium-themes.forums.wordpress.com/ with separate sections for each theme. http://premium-themes.forums.wordpress.com/forum/linen

    If you are not successful when searching there is a link for the specific Premium Theme support forum for your theme under Appearance -> Themes in your blog’s Dashboard, but do note that the premium theme must be active and you must be signed in as the user who purchased it in order to see it and post to it.

    #1157416

    You can change the social media icon images in the Linen theme by using an attribute selector for the link for each one. Here is an example:

    .subscribe a[href="http://twitter.com/drjmlosada"] img {
    	display: none;
    }
    .subscribe a[href="http://twitter.com/drjmlosada"] {
    	background: url('http://s2.wp.com/wp-content/themes/premium/linen/images/flw-twitter.png?m=1351119118g') no-repeat;
    	display: block;
    	height: 20px;
    	width: 20px;
    }

    Replace the url() value with the image you’d like to use instead and adjust the width and height values if necessary.

    #1157430

    drjmlosada
    Member

    It worked!!!!!!!! thanks so much!

    Could you help me with other question?

    How can I apply effects on the images on my main page?
    I want the three one the main column change to black white when you put the mouse over them…

    thanks in advance!!!!

    #1157433

    Here is an example to get you started. Note that is very specific to your current structure with only linked images in the content area of the home page right now. This example will make the images disappear and the area behind them black when you hover over the images:

    .home .entry a {
    	background: black;
    	display: inline-block;
    }
    .home .entry a img {
    	display: block;
    	padding: 0;
    	margin: 0;
    }
    .home .entry a:hover img {
    	visibility: hidden;
    }
    .home a.post-edit-link {
    	background: none;
    }

    Note that if you add additional linked images that you don’t want to turn black when you hover, you will need to set specific classes for the images you want to affect and adjust your CSS accordingly. If you keep the content as it currently is, you won’t have to worry about that.

    #1157434

    drjmlosada
    Member

    It works, but what i want is: when you put mouse over, turn each image to black and white…

    I am not going to change the content, so the idea is great.

    #1157435

    drjmlosada
    Member

    I have saved the stylesheet, so you can see what I mean, it works for the first image, but must be a code to distinguished between images.
    Do you know how can I do?

    #1157444

    It works, but what i want is: when you put mouse over, turn each image to black and white…

    :) That makes a lot more sense.

    To swap out a background image, first you need to have a unique class or ID value setup in your HTML. For example, here is your current HTML for the first image in the middle of the main content area of your home page:

    <p style="padding-left:210px;"><a href="http://drlosada.com/profesionales/materiales/"><img class="wp-image-445 alignnone" alt="Materiales" src="http://drlosadadotcom1.files.wordpress.com/2013/02/conoce-mat-copy.jpg?w=366&h=150" width="366" height="150"></a><a href="http://drlosada.com/pacientes/urgencias/"><img class="alignleft wp-image-448" alt="Urgencias 24/7" src="http://drlosadadotcom1.files.wordpress.com/2013/02/urg-copy.jpg?w=367&h=151" width="367" height="151"></a></p>

    You need to add a unique name to something in that list. For example:

    <a id="my-image-one" href="http://drlosada.com/profesionales/materiales/">

    Then you can use that id value as a selector in your CSS:

    #my-image-one { /* your css goes here */ }

    I converted the example I posted earlier to use the “#my-image-one” selector and change the background image instead of the background color. To make this work, you must update the HTML inside the page first so that you have a unique selector for each linked image. Once you have done that, replace YOUR_B&W_IMAGE_URL with the link to the black & white version of the image:

    #my-image-one {
    	display: inline-block;
    }
    
    #my-image-one img {
    	padding: 0;
    	margin: 0;
    }
    
    #my-image-one:hover img {
    	visibility: hidden;
    }
    
    #my-image-one:hover {
    	background: url('YOUR_B&W_IMAGE_URL') no-repeat;
    }

    Then repeat that same section of CSS for the other two images. Make sure they have their own, unique ID value in the HTML.

    #1157447

    drjmlosada
    Member

    First of all, thank you for your time.

    How can I add that unique name to the html code of the image? In the CSS editor?

    How can I see that html code of the other images?

    #1157448

    How can I add that unique name to the html code of the image? In the CSS editor?

    To edit HTML inside posts or pages, use the “Text” tab in the editor. Here is a help page that explains:
    http://en.support.wordpress.com/editors/#text-editor

    In my example, I added an “id” attribute to the “a” tag. Here is the example from above that I showed you before:

    <a id="my-image-one" href="http://drlosada.com/profesionales/materiales/">

    Note that’s just one part of the HTML. See how it includes id=”my-image-one”? You would need to add an id like that with a unique value (whatever you choose) and then copy the CSS example for each image you setup an id attribute for.

    If you’re not sure how to read HTML or basic CSS, you should start with tutorials like these to make sure you’re familiar with enough of the basics to apply the examples from above.
    http://www.htmldog.com/guides/htmlbeginner/
    http://www.htmldog.com/guides/cssbeginner/

The topic ‘custom social media icons’ is closed to new replies.