Subscribe button directly to post
-
Trying to figure out how I can add a subscribe button directly to the end of my post. Ideally it would be the same looking subscribe button which is in my sidebar widget, but I could work with just a link and add it to an image that I insert or something like that. I know there is a subscribe icon at the bottom right corner of the screen, but I find that too small and likely to get overlooked. Any help would be great!
The blog I need help with is: (visible only to logged in users)
-
I actually figured this out by using the shortcode [blog_subscription_form] I there a way to accomplish this with my social media links as well?
-
I’ve noticed the mobile version of the site does not display the social links. Perhaps I can duplicate the links in the footer?
-
I’m seeing the sharing buttons on individual post pages, such as http://chasingthenichols.com/2016/03/24/coming-soon/ on my iPhone and iPad. Are you not seeing them in your phone/tablet? If not, can you let me know what phone/tablet you are using and what OS and OS version?
-
So I discovered those after I posted this. They are infact showing up but those are for people to share the article onto THEIR social page.
What I’m referring to are the links that take them straight to OUR social page to like or follow etc. On desktop they are located to the right of the top nav bar but they disappear on a smaller device. It would be great if I could keep them up in that nav bar space for the smaller screen sizes as well. Right along with the little menu button. Or perhaps add that same social bar down in the footer.
Thanks for your help!
-
Ah, I see what you are meaning now. Give the following a try.
@media screen and (max-width: 767px) { #social-links { display: block; float: none; width: 100%; text-align: center; } .social-links { float: none; } } -
Yes! Love it!
Would it be possible to say.. move the red menu button over to the right and put the social-links to the left? I might go back to it all centered how you have it, but curious what it looks like :)
Thanks!
-
-
This is the complete 767px media query you have with some additions to float the menu toggle to the right and social icons to the left. Make sure and save what you have to a plain text file so that you can easily go back to it if you choose.
@media screen and (max-width: 767px) { #social-links { display:block; float:none; width:100%; text-align:center; padding-top: 20px; } .social-links { float:left; } .page-id-90 .wp-caption { width:49% !important; max-width:100% !important } .site-title a { font-size:80%; padding-top:0; word-spacing:0; line-height:150% } .site-description { margin-top:15px !important } .navigation-footer { text-align:center } .site-info { text-align:center } .menu-toggle { float: right; } } -
Yes! Thanks for cleaning that up.. One final thing :) When you click on the red mobile nav button, the social links are at the bottom of the menu. Any way to keep them above the drop down menu?
I lied.. 2 more things. I changed the padding so the social bar was vertically centered in the light blue bar at the top. But when I view phone horizontally the blue strip gets a bit thicker and it’s uncentered. Is there any code to keep it centered in that bar vertically other than the padding-top: px ?
Thanks!
-
You can give the following a try. Again, replace the media query with the following, saving what you have in a plain text file and see what you think. I’ve made some other adjustments as well to clean things up. Make sure and view and toggle the menu on phone and tablet, both in portrait and landscape orientation and switch back and forth to make sure that nothing goes awry. It all looks good in my testing, but check just to make sure.
@media screen and (max-width: 767px) { #social-links { display:block; float:none; width:100%; text-align:center; padding-top:12px } .social-links { left: 5px; position: absolute; z-index: 10; top: 15px } .page-id-90 .wp-caption { width:49% !important; max-width:100% !important } .site-title a { font-size:80%; padding-top:0; word-spacing:0; line-height:150% } .site-description { margin-top:15px !important } .navigation-footer { text-align:center } .site-info { text-align:center } .menu-toggle { float:right } .main-small-navigation { padding-top: 70px; } .main-small-navigation .menu-toggle { position: relative; top: -65px } } -
Great! I’ll give that a go when I get home!
Do you know if there’s an attribute to adjust the drop shadow on the main title header text when it switches to the media screen size? And possibly an all CAPS attribute?
I really appreciate your help with all of this. I’d love to give you a great review if there’s a place to do so!
-
Code is working great! The vertical centering was still changing depending if it was portrait or landscape, but after some poking around at the code for the red menu button I figured it out.
I added: margin: 2.5% auto; and changed the top px a bit and it works like a charm! -
-
Alright, another one for ya..
I’ve been messing with a few things but can’t seem to get it to work how I want it. Trying to adjust the site title (for media screen) to get it to span the full 100% of the width. In other words I’m trying to get “Chasing the Nichols” to be all on one line. I know there’s space there to do it, but when I change the site-title width to 100% the background image gets messed up.
-
Give the following a try, added at the very bottom of your custom CSS. It makes a few adjustments to things and makes the font size just slightly smaller so that it doesn’t wrap. Make sure and view in your phone. If it still wraps in your phone, take the font size down in 1% increments until it doesn’t wrap.
@media screen and (max-width: 480px) { .site-title a { padding-left: 0; padding-right: 0; width: 100%; font-size: 74%; } } -
That’s def looking better. For some reason even with the padding to 0, it wants to wrap around before it actually gets to the sides. If I could get it to stretch to the boarder of the main site white boarder elements without wrapping down that would be great!
-
-
Yeah, I get it. It’s working pretty well the way it is now. I’m just being nit-picky :p Thanks for all your help!
-
- The topic ‘Subscribe button directly to post’ is closed to new replies.
WordPress.com Forums 