Tips and Tricks HQ Support Portal › Forums › WP eMember › WP eMember F.A.Q/Instructions › eMember – How to move the bookmark button to a custom location on the page
Tagged: bookmark, button, css, move bookmark button
- This topic has 8 replies, 5 voices, and was last updated 7 years, 9 months ago by neuralytix.
-
AuthorPosts
-
March 14, 2013 at 1:27 am #8743adminKeymaster
This tweak/customization is only applicable if you have enabled eMember’s bookmarking feature on your site:
The eMember’s bookmark button is placed at the top right hand corner of a post or page by default.
You can do a little CSS tweaking to move this bookmark button and place it almost anywhere on a page. Here is what to do:
Step 1) First disable the bookmarks on your blog page. Your blog page lists all the posts and if each post is showing a bookmark then positioning them will be a mess (this is why we show the bookmarks the way we do by default).
Go to eMember plugin settings and find the “Enable Bookmarking Feature” field. Check the following options so you are only showing bookmarks when an individual post or page is being viewed:
Disable Bookmark Feature on:
[x] Home Page
[x] Category Archives
[x] Search Result
Step 2) Open eMember’s custom CSS file (wp-eMember/css/eMember_custom_style.css) and paste the following CSS code in it:
.ememberbookmarkbutton{
position: absolute;
margin: -300px 0 0 250px;
}This will move the bookmark button somewhere in the header of your site (right hand side of the header).
Step 3) Tweak the pixel values to move it and place it where you want it on the page.
Here is an example… the following will place the bookmark button/icon towards the left hand side of the header area:
.ememberbookmarkbutton{
position: absolute;
margin: -300px 0 0 -500px;
}Basically, increase or decrease the pixel values to suit your needs.
April 5, 2013 at 6:03 pm #54415rvlawrenceMemberHi, I was able to move the bookmark button using CSS but there is a “hole” where the button used to be.
How do I get the words in the paragraph to continue and not wrap around the blank area where the bookmark button previously was?
April 5, 2013 at 10:47 pm #54416wpCommerceModeratorHi, can we take a look at the page where you are customizing the bookmark button?
April 7, 2013 at 2:04 am #54417rvlawrenceMemberHi, I was able to fix the issue, there was a problem with another one of my settings for the paragraph. Many thanks for the reply.
February 27, 2017 at 5:11 pm #54418neuralytixMemberI tried this code, but the bookmark button does not move. I’m wondering if WordPress 4.7 handles this code differently. Ideally, I’d like to see it on the same line (or above) the Post/Page title, right justified.
Thanks in advance.
February 27, 2017 at 8:59 pm #54419wzpModeratorPlease post a link to a test page (NOT A SCREENSHOT); and indicate where the button is “supposed to be.”
March 1, 2017 at 6:59 pm #54420neuralytixMember[http://www.neuralytix.com/doc/9066]
I’d like the bookmark to be immediately to right margin of the line of the title, so for this page “HPE to Acquire SimpliVity – Our Initial Comments”
March 1, 2017 at 10:55 pm #54421adminKeymasterThe following custom CSS code should do it.
.emember_bookmark_button{
margin: -160px 0 0 0 !important;
}You can use a plugin similar to the following to inject the CSS tweak:
https://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413
March 2, 2017 at 2:31 pm #54422neuralytixMemberThank you… I’m using the Divi theme, so I just added it to the custom CSS field that is in the Divi Theme options, and it worked. Thanks for the prompt reply.
-
AuthorPosts
- You must be logged in to reply to this topic.