Need help? Check out our Support site, then


Social icons - Notepad theme

  1. How can i change the social icons (facebook, twiter and rss) from below of title's blog to right side of brown bar?

    The blog I need help with is maickcosta.com.

  2. thesacredpath
    Staff

    This will do it, and it changes the text link colors to that of the menu as well.

    .socialmedia a {
    color: #CBC3BB !important;
    }
    .socialmedia {
    position: relative;
    top: 70px;
    left: 650px;
    z-index: 1;
    }
  3. I try to change all of this:

    .socialmedia a {
    text-decoration: none;
    margin-right: 20px;
    color: #666;
    }
    #header .socialmedia a:hover, #header .socialmedia a:focus {
    color: #ca6c18;
    }
    #header .socialmedia img {
    vertical-align: middle;
    margin: 0 8px 5px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px #ccc;
    -moz-box-shadow: 0 2px 2px #ccc;
    box-shadow: 0px 1px 4px #000;
    }

    For this:

    .socialmedia a {
    color: #CBC3BB !important;
    }
    .socialmedia {
    position: relative;
    top: 70px;
    left: 650px;
    z-index: 1;
    }

    I try a second time and change just this:

    .socialmedia a {
    text-decoration: none;
    margin-right: 20px;
    color: #666;
    }

    For this:

    .socialmedia a {
    color: #CBC3BB !important;
    }
    .socialmedia {
    position: relative;
    top: 70px;
    left: 650px;
    z-index: 1;
    }

    And the icons go to the place i want and the color link was change, but the backgroud was gone.

  4. thesacredpath
    Staff

    Did you by chance paste the entire stylesheet into the CSS edit window?

  5. Yes, i paste the entire stylecheet into the edit window. All the content remained and the modifications was in the way you told me, just the background became transparent.

  6. CSS is theme specific. If you have custom CSS and later change themes, you need to delete whatever CSS you have in the Editor, otherwise, you’ll get undesired results.

    To ‘reset’ a theme, you need to delete the CSS in the Editor, make sure the “add to existing CSS” radio button is checked, then save. Things should go back to normal.

    When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:

    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  7. thesacredpath
    Staff

    You don't actually edit an existing stylesheet at wordpress.COM. What is best is if you put only the specific selectors, and the specific declarations you are adding or changing into the edit window and then make sure that the "add to existing..." button is selected.

    Delete everything in the CSS edit window, paste only the first code I gave you and everything will be fine. From then on, put only the specific stuff you need into the edit window. Read the article timethief references.

  8. UOW! Thank you guys... sorry for that. It's all perfect now! =] Thank you very much for your concern

  9. One more question: if i want more modifications, i will put only the specific modification code in the edit window, ok? But and this modifications that we've done now?

  10. Sorry for being inconvenient. I've detected one more thing: a lot space was created in the right side, out of yellow box (notepad). How can i fix it?

  11. thesacredpath
    Staff

    Here is an example. This is what is in the CSS for the post title selector.

    .post-title {
    color: #644527;
    font: bold 1.9em/1em Arial,Helvetica,sans-serif;
    letter-spacing: -0.05em;
    margin: 0 0 10px;
    text-shadow: 0 1px 4px #DFDFBB;
    }

    Let's say that you want to change the color of the post title but leave everything else the same. You would add the following to your CSS and then edit the hex color code and put in yours.

    .post-title {
    color: #644527;
    }

    When you say "space" on the right side, are you talking about beneath the widgets?

  12. About the modifications, i'm asking to you how i put other code to change the style if there were a code in there that was used to change something else.

    About the space, it is not beneath the widgets, it is in the outside of the yellow box. In the right side.

  13. thesacredpath
    Staff

    What you do is to put the original stylesheet into a plain text file and save it to your computer for reference. Then when you identify the selector and declaration you want to change, you copy just those parts out of the saved CSS from the text file and put it into the CSS edit window.

    What you might want to do is get the Firebug add-on for Firefox which allows you to quickly identify the parts of the CSS which style the different elements of the theme. You can even change things in the CSS from within FF to see what your changes will look like. You still have to add the changes to the CSS edit window, but it is more convenient than the preview function on the CSS page.

    Get the add-on and play with it and work through the getting started document and you will be able to learn to use it quite quickly. It is a great tool.

    The page wrapper (outside bounds of the yellow notepad looking area) is set at 980px wide, which is all the wider I would suggest going. There are still over 40% of the web users that are on 1024 x 768 monitor resolutions and if you make your site wider that means that people are going to have to scroll horizontally to see everything, and horizontal scrolling is one of the top things that irritate web users.

  14. Ok, really thank for all your explanation.

  15. thesacredpath
    Staff

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic