Oxygen Theme, social buttons, footer, color and border

  • Unknown's avatar
    viajaelmundo · Member ·

    Hi, can you help me with various things?
    I want to make several CSS changes and do not know what code I use:

    1. I want to add buttons of social networks (Facebook, Twitter, Pinterest) top right, the same level of name of my blog, but the right side.
    2. I want to place information in the footer on the right side. I would also have there a link that redirects to a page on my own blog.
    3. Is it possible to add text with links in the right column and to have a different background color and a border?
    April. Can I change the color of the titles of each post?

    Thank you very much for the help and sorry for so many questions :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi,

    1. Adding social icons in the header area on Oxygen is difficult since it is a responsive width theme and due to the way the HTML and CSS are structured. If you wanted to add your social icons to a text widget (see links in #3 below) in the sidebar (right or left) I could then work on moving that widget up and into the header area and see if I could make it behave properly.

    2. Add the following CSS and then edit the “content” value and insert your text.

    .site-info {
    width: 100%;
}
.site-info:after {
    content: "My Text Here";
    float: right;
    color: #777777;
}

    3. You can add text and links in the right sidebar using a text widget.

    Text Widget
    Text Widget Links

    To add a background color to all text widgets, you can use the following CSS.

    .widget_text {
    background: #66ee66;
}
.textwidget {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.widget_text .widgettitle {
    margin-left: 10px;
}

    If you wish to have different colors in different text widgets that can be done also, but it would be easiest if you added those widgets first because we need to get the ID number for the individual widgets.

  • Unknown's avatar
    designsimply · Member ·

    Let’s work on these one at a time.

    1. I want to add buttons of social networks (Facebook, Twitter, Pinterest) top right, the same level of name of my blog, but the right side.

    You can do this by adding social media icons into a text widget and then using absolute positioning with CSS to move that widget to the top right.

    For the first step, you can follow this guide:
    http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/

    Once that is done, you will need to read the HTML in order to find out the unique identifier (the id attribute) for the widget you added. You can use that in your CSS to target just that widget and move it.

    To get you started, here is an example CSS snippet that will move the search widget currently in the right sidebar on your home page to the top right:

    #search-2 {
	position: absolute;
	top: 60px;
	right: 30px;
	width: 300px;
}

    After you add your text widget with the social media icons in it, you will replace “#search-2” with the id from your new widget and then adjust the numbers until the positioning looks good to you.

    I’ll keep going with answers to your longer list of questions, but in the future it would be awesome if you could post each help request in a separate thread.

  • Unknown's avatar
    designsimply · Member ·

    Nevermind :) thesacredpath beat me to the other questions!!!

    Double support dose. :D

  • Unknown's avatar
    viajaelmundo · Member ·

    Thanks very much for your help!!!! I’m going to make all the changes and I’ll come back if I have another question :)
    Thank you both for making this much easier!!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Oxygen Theme, social buttons, footer, color and border’ is closed to new replies.