eMember – How to move the bookmark button to a custom location on the page

[admin]

This tweak/customization is only applicable if you have enabled eMember’s bookmarking feature on your site:

http://www.tipsandtricks-hq.com/wordpress-membership/how-to-use-the-bookmarking-feature-in-wp-emember-99

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.

[rvlawrence]

Hi, 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?

[wpCommerce]

Hi, can we take a look at the page where you are customizing the bookmark button?

[rvlawrence]

Hi, 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.

[neuralytix]

I 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.

[wzp]

Please post a link to a test page (NOT A SCREENSHOT); and indicate where the button is “supposed to be.”

[neuralytix]

[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”

[admin]

The 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

[neuralytix]

Thank 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.

[Author]

Posts