Need help? Check out our Support site, then


custom social media icons

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

    thanks in advance

    The blog I need help with is drlosada.com.

  2. 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.

  3. Are you sure?
    No more ideas?

    thank you!

  4. 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.

  5. 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.

  6. 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!!!!

  7. 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.

  8. 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.

  9. 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?

  10. 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.

  11. 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?

  12. 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/

Topic Closed

This topic has been closed to new replies.

About this Topic