Share icons on the top of post
-
Hello there,
I was wondering if there’s any css code to change the position of my list of sharing icons to the top of my posts, just below the headings. I’ve tried some codes out there but they all mess up design.
Thanks a lot in advace! :)
Greetings.
The blog I need help with is: (visible only to logged in users)
-
Try something like this for your single post pages:
.single .post .entry { position:relative; margin-top:85px; } .single .post #jp-post-flair .sd-sharing-enabled { position:absolute; top:-85px; } -
-
Can you try adding the code back in? It looks like you only tried it out in the customizer and didn’t save it, if you try saving it then I’ll take another look and see what might be causing the problem.
-
-
Any thoughts so far?
My menu bar and banner are moving weirdly using that code you told me… :S
-
You currently have this in your custom CSS which isn’t what I gave you, I’m not sure where it’s come from though! Delete it and copy in the previous code I provided and it will fix the menu bar/banner issues and start showing the sharing icons appropriately.
a:hover{ text-decoration:underline; margin-top:85px } .single .post #jp-post-flair .sd-sharing-enabled{ position:absolute; top:-85px } -
Ok, nevermind, my mistake… I was just mixing lines, that first one I use to underline the links. I’ve just moved it down and everything got fixed.
Thanks a lot for your help! :)
-
Hi there again hallluke,
I was wondering if you could help me with some other issue related to my blog. If you have a tablet nearby and you check how that version of my blog looks, you can appreciate that links and image titles duplicate in the puzzle design.
Is there any possibility to avoid repeating showing the links on the tablet version? In other words: just show the images but of course without affecting the desktop version.
Thanks in advance and sorry for my English if I didn’t explain myself correctly.
-
The title and dates repeat in my desktop also since you have incorporated those into the images. If you wish to hide those titles and dates from the main page of your site, try adding the following.
.home .main article .entry-title, .home .main article p.post-meta-data { display: none; }I’ve used the “home” body CSS class to limit this change to the front page of your site.
-
Woah! perfect! now I don’t have double titles on my tablet version.
Ok, now next step: would it be possible for the zooms on images to be transparent? (no color whatsoever) because its really ugly now when you scroll over it and all you see is a full colored square/rectangle.
Thanks in advance to both of you! :)
-
This should do it, let me know if you run into any problems:
.main article.post-archive section a.link-image:hover { opacity:1; } -
Cheers!
You’re helping me a lot with last minute details for my blog. I’m really thankful.
I just came across another issue, on the “tablet” and “mobile full site versions” (the mobile version itself is just alright) I’ve notice the margins are so width that they leave no space in between the text and the limits of the screen, any thoughts to solve this on?
I’m counting on you fellas, thanks again both for all your help so far.
-
I think I understand what you are seeing, on the single posts and pages such as about. Add the following and see what you think.
.single .post, .page .page { margin-left: 25px; margin-right: 25px; } -
Cheers thescrapedpath, helpful and handy as always mate.
Now I’ve one last question, if you back to my site http://www.dealwithdigital.com you know the zoom-in animations that are activated in the home page? I’d like them to turn into something like the ones in http://www.theverge.com home page, you think you can find any code lines that does that?
Hope so, thanks in advance buddy.
Greetings!
-
If you look at the Puzzle demo, it is almost doing what theverge.com is doing, but they are using a linear gradient set at 135 degrees as a background for each image.
On puzzle, the section backgrounds behind the images has the bright green color set. The image in each section has an opacity of 1 (opaque) when not hovered, but when you hover the image, the image opacity goes down to 0.1 (nearly transparent) allowing the green background color to show through.
To have a different color or gradient for each image, you would have to specifically target each post by its unique post css class, such as the followingwhich targetss Lords and San Andreas with two different colors.
Temporarily remove this from your CSS, or comment it out
.main article.post-archive section a.link-image:hover { opacity: 1; }Add the following and then hover Lords and San Andreas.
.main article.post-881 section { background-image: linear-gradient(135deg, #292484, #dc4225); } .main article.post-815 section { background-image: linear-gradient(135deg, #e0be00, #dc4225); }To continue that you would need to use your web inspector in your browser and identify the CSS post class, which is in the “article” tag for each post. You can then construct linear gradients of your choosing for each, or perhaps do two or three and then alternate them. The above code covers a good portion of browsers, but you would want to look at the following two resources if you wish to cover older browsers and Internet Explorer earlier than 10.
http://www.w3schools.com/css/css3_gradients.asp
http://www.colorzilla.com/gradient-editor/
- The topic ‘Share icons on the top of post’ is closed to new replies.
WordPress.com Forums 