Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Missing Social Media Icons on Mystique

  1. 1godfather
    Member

    Thanks for the job the support team is doing here by helping people with the CSS for certain aspects of that Mystique theme. I happen to be using this Mystique theme for my blog and I love it to bits. But I wanted to change a few things about it so I went to tinker with the CSS. I managed to customize it to the way I liked (like making the blog post color darker, altering the block-quotes appearance,etc).

    But after this tinkering, I discovered that I lost the social media icons at the blog header, or the useful icons at the top of the Mystique tabbed widget, or the special rendering of the blog post date and author. These were the three that I noticed immediately. I am suspect that there could be other features/formatting of the custom Mystique theme that I lost with my CSS alteration, but they are not as important as these ones I’ve mentioned. So, in the end, I just went back to the original default Mystique theme. After a while, I decided that I liked my customization even though it lacked these three things that came with the default Mystique theme, so i reverted back to it.

    As you can see from the page, a) my social media icons are missing b) the icons above the Mystique tabbed widget are missing c) that special Mystique theme rendering of the blog post date and author are also missing.

    I'll appreciate any help with any of these three issues. Thanks!

    The blog I need help with is 1godfather.wordpress.com.

  2. 1tess
    Moderator

    I'll move this thread to the CSS Forum where someone who can help will see it more easily.

  3. thesacredpath
    Member

    CSS editing here at wordpress.COM is a different and you are not actually "editing" the original stylesheet. Since what you put into the CSS edit window is saved in a different location from the original stylesheet and then applied after the original stylesheet, when you copy and paste it into the edit window, you end up breaking all the relative URL links to all the theme images in the stylesheet.

    What you need to do is to put only the specific selectors, and the specific declarations you are changing into the edit window. For example, if this were the original #container

    #container {
background: #FFFFFF;
border: 3px solid #CCCCCC;
margin: 0 auto;
width: 940px;
}

    and you wanted to change only the width, you would add only the following to the CSS edit window.

    #container {
width: 940px;
}

    You need to remove all the CSS from the CSS edit window and then put in ONLY what you are changing.

  4. thesacredpath
    Member

    Oh, and using the above, make sure that "add to existing..." is selected before saving.

  5. designsimply
    Staff

    Particularly, it's the url() functions that are causing you trouble. For example, if you take out these lines from your custom CSS, then you'll see the icons come back. Try removing these lines to see the difference: 

    .social-icons .rss {
background:url('images/media-icons.png') no-repeat -71px 0;
}

.social-icons .twitter {
background:url('images/media-icons.png') no-repeat left top;
}

.social-icons .youtube {
background:url('images/media-icons.png') no-repeat -294px top;
}

.social-icons .facebook {
background:url('images/media-icons.png') no-repeat -146px 0;
}

.social-icons .flickr {
background:url('images/media-icons.png') no-repeat -221px 0;
}

    This is because you need to have the full URL of the images inside the url() function in order for it to work in the WordPress.com CSS editor.

  6. 1godfather
    Member

    Thanks a lot thesacredpath and designsimply. That helped a lot. Designsimply's answer quickly fixed the issue. Thesacredpath's answer taught me something I didn't know before--which is that when you want to customize the CSS, you simply add the elements you want to change and leave the underlying CSS intact. I'll take my time in the coming days to do this all over. Thanks all.

  7. designsimply
    Staff

    Happy to help! Cheers.

  8. thesacredpath
    Member

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags