Social Icons CSS Customization

  • Unknown's avatar
    vlogazul · Member ·

    Hello, I am using the Mixfolio theme and I would like to know if there’s a snippet for the following. Would there be a snippet to put a copyright text of my choice at the bottom of the page in between the two links from the bottom? and also add social media icons to that particular space as well?

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, to center your copyright, change your copyright CSS rule to the following. 

    #site-generator::after {
    color: #303030;
    content: "© 2016 vlogazul.com | El Blog de La Máquina";
    display: block;
    text-align: center;
}

    On the Social Media icons, the blog, archive, category and tags pages do not have sidebars, and we would need to add a widget and then move it with CSS. If there isn’t a footer or sidebar widget area, there is no way to add the linked social media icons.

  • Unknown's avatar
    vlogazul · Member ·

    Thanks for the snippet.
    The theme indeed has a widget sidebar section, I just added the social media icons widget to it. If you click on any of the posts you will see the icons on the right hand side, hopefully we can move them with CSS.

  • Unknown's avatar
    thesacredpath · Member ·

    Ah ok, we can move them on the single post pages, but they will not appear on the home/blog, archive or categories pages. We need to make a change to the code I already gave you above, so this would be the whole thing. 

    #site-generator::after {
    color: #303030;
    content: "© 2016 vlogazul.com | El Blog de La Máquina";
    display: block;
    text-align: center;
		padding-bottom: 40px
}
.single #wpcom_social_media_icons_widget-2 {
    bottom: -30px;
    position: absolute;
    right: 45.5%;
}
.single .row .twelve.columns {
    position: inherit;
}
.single #page {
    position: relative;
}
  • Unknown's avatar
    vlogazul · Member ·

    Thank you very much for the snippet.

    also would there be a snippet to change the text of the black button that is on the main page that says”contacto” to a text of my own?

  • Unknown's avatar
    thesacredpath · Member ·

    We can use this to change the text in that button 

    .hero .columns.four a:before {
	content: "My Text";
	color: #fff;
	position: relative;
	left: 40px;
}

    You will have to adjust the 40px value to center your text since I don’t know what you wanted to change it to.

  • Unknown's avatar
    vlogazul · Member ·

    Thank you very much, you are a CSS genius.

    One more last snippet for the moment, if you take a look at the featured images on the main page an category pages, you will see the image and when you point out on it it will hove to a gray background with the text of the article title. Is there a snippet to make that text visible with the image or below it so we can know what that image article is about?

  • Unknown's avatar
    thesacredpath · Member ·

    This will get rid of the dark background on hover and keep the titles visible. 

    .hide {
    background: none;
    opacity: 1 !important;
}
  • Unknown's avatar
    thesacredpath · Member ·

    If you wish to hide the post format icon in lower right, add the following. 

    .hide .format {
    display: none;
}
  • Unknown's avatar
    vlogazul · Member ·

    It works perfect for both snippets, thanks.

    Would there be a snippet to add a logo (image) in the site title section of the site where it says vlogazul .com next to the navigation bar, so basically replace that text with an image?

  • Unknown's avatar
    thesacredpath · Member ·

    We can do that with the following. I would suggest an image that is not too much larger, and in the same general proportions than the existing site title since could be a bit of a challenge with a larger image. The div for the existing site title actually extends full width and a larger image would end up pushing the menu down and below the title div.

    .site-title a {
background-image: url("URL_OF_IMAGE")
background-size: contain;
color: rgba(0, 0, 0, 0);
display: block;
}
  • Unknown's avatar
    vlogazul · Member ·

    I already tried using that snippet and i created an image logo that is 160px x 40px which is about the same size for that section but it didn’t work. Did i do something wrong?

  • Unknown's avatar
    thesacredpath · Member ·

    Sorry, it should have started with a # (id) rather than a period (class). I just tested this and it works. 

    #site-title a {
    background-image: url("https://vlogazul.files.wordpress.com/2016/01/logo.png");
    background-size: contain;
    color: rgba(0, 0, 0, 0) !important;
    text-shadow: none;
    display: block;
}
  • Unknown's avatar
    vlogazul · Member ·

    it works perfectly, thank you very much, you are a genius.

    One last snippet request, if you click on any of my recent posts you will see 2 widgets, an image and a video. Is there any way you can make the video widget be the same width size as the widget image that is on top?

  • Unknown's avatar
    vlogazul · Member ·

    I was able to figure it out about the video width, thanks for all your help Sacred, you are a genious.

  • Unknown's avatar
    thesacredpath · Member ·

    Hooray and you are welcome.

  • The topic ‘Social Icons CSS Customization’ is closed to new replies.