Social Links On Top of the Header
-
Hi Guys,
How can I make the social links on the Responsive Template be shown right above the header instead of on the bottom of the page?
Many thanks!
The blog I need help with is: (visible only to logged in users)
-
-
@acswilde, since I always start from the oldest threads to the newest, bumping a thread will put you back up with the newest and could very well delay my getting to it. Volunteers don’t necessarily start at the oldest, so there is a chance one of them will grab your question before I get to the top of the list, but there is no guarantee.
Due to the way Responsive is designed, this is about the best we can hope for on the social icons.
#footer-wrapper .fit.col-380 { position: absolute; top: 50px; right: 100px; } -
Oh, apologies Thesacredpath, I thought it worked the other way. Very sorry!
But the social links worked perfectly!
Is it possible to customize the way those buttons look by any chance?
-
Yes certainly its possible to customize the looks of those buttons.
If you let me know what type of buttons you want then I can help to show how to grab those buttons and implement those.
-
Cool! I like the current ones, but it would be great if they were colored with their respective logo colors. As they are, they just blend a bit too much on the page.
Is it possible to add a goodreads button as well?
-
so whatever your choice first find those images in internet make sure they all are in same sizes and then upload them via media in dashboard.
Now change the images path either going through theme options or editing footer.php file.
If your theme comes with theme option suaully found under appearances then look for. Find the footer or social tab or similar.
If there is no theme options then its bit tricky for you.
You need to edit the theme file as I mentioned earlier.
The code seems either on header.php or footer.php.
Have a look and good luck.
-
-
Oh man, you lost me there. I can’t see the entire page’s code, just what I changed in the CSS tab?
-
-
if you still lost then may I ask you can you login to wordpress dashboard?
If yes then can see Editor under Appearances ?
-
Yes, customize. And then I used the CSS tabs to customize a few items, but I can’t see a php file there. Just the codes I have used.
-
-
I can’t see where I’m supposed to paste the location of the image I want in the CSS file.
Because it’s not done through a widget, it’s the standard image of the template for the social links, so I can’t change it without a CSS code. -
Yes that’s correct. Unfortunately you wont be able change.
You need to access php file to locate the html code where the Facebook and Twitter icons placed.
-
-
@zakiruk, we cannot edit theme files here at WordPress.com. The differences between WordPress.com and WordPress.org.
-
@acswilde, since we can’t edit any php theme files here at WordPress.com, we have to get creative with CSS. This hides the existing twitter icon and then adds one back in on the parent .twitter-icon div. I would suggest icons of 24px square to match the size of the existing.
Here would be the twitter icon code..twitter-icon img { visibility: hidden; } .twitter-icon { background: url("URL_OF_IMAGE") no-repeat scroll center bottom / 26px auto; padding-top: 20px !important; display: block; } .twitter-icon a { display: inline-block; }And here would be the facebook icon code.
.facebook-icon img { visibility: hidden; } . facebook-icon { background: url("URL_OF_IMAGE") no-repeat scroll center bottom / 26px auto; padding-top: 20px !important; display: block; } . facebook-icon a { display: inline-block; }Upload the images to your media library, get the URLs of those image and replace URL_OF_IMAGE between the quote marks with the URL of your new image.
-
-
- The topic ‘Social Links On Top of the Header’ is closed to new replies.
WordPress.com Forums 