Move 'Subscribe' button in line with 'Articles', 'Forum' etc.

[David Karol]

See screenshot.

How could I go about moving the Subscribe button to be in line with the other menu options in articles and forums? (Posts, Latest Activity). The goal is get rid of extra white space.

I tried using CSS to shift 'bottom', 'top' and 'right' for .button, .ui-widget .button but it ended up being covered by white space.

[In Omnibus]

I haven't tried moving the button but did you attempt using the overflow: visible attribute?

[David Karol]

That didn't seem to help.

[Replicant]

Try this code. You will need to adjust to clear the search bar or just move it beneath the search bar.

button.is-topic.button.follow-btn.uppercase.h-left.secondary {
    position: absolute;
    bottom: 105px;
    right: -1em;
}

.canvas-widget-list.section-2.js-sectiontype-notice.h-clearfix.l-col__large-12.l-col__small--full {
    height: 46px;
}

.canvas-widget-list.section-2.js-sectiontype-notice.h-clearfix.l-col__large-12.l-col__small--full {
    height: 45px;
    margin-top: -50px;
    
}

[David Karol]

Originally Posted by Replicant

Try this code. You will need to adjust to clear the search bar or just move it beneath the search bar.

button.is-topic.button.follow-btn.uppercase.h-left.secondary {
    position: absolute;
    bottom: 105px;
    right: -1em;
}

.canvas-widget-list.section-2.js-sectiontype-notice.h-clearfix.l-col__large-12.l-col__small--full {
    height: 46px;
}

.canvas-widget-list.section-2.js-sectiontype-notice.h-clearfix.l-col__large-12.l-col__small--full {
    height: 45px;
    margin-top: -50px;
    
}

This will end up breaking the content slider. How about moving in line with the FORUMS and LATEST ACTIVITY, or the PAGE TITLE areas in the screenshot from the last post? I think going in line with those would make sense to save on space.

[Replicant]

Originally Posted by David Karol

This will end up breaking the content slider. How about moving in line with the FORUMS and LATEST ACTIVITY, or the PAGE TITLE areas in the screenshot from the last post? I think going in line with those would make sense to save on space.

I'd need a link to the site to dial it in. PM if you want.

[shimei]

Originally Posted by Replicant

I'd need a link to the site to dial it in. PM if you want.

Could you also share what you did Replicant. I would like the subscribe button to be inline with the forum, latest activity, and subscription menu too. I would just like the subscription button moved down onto the grey menu bar: https://www.christforums.org/forum/c...ism-oec-or-yec


With the code you had provided I am only able to move the subscription button behind it and not on it.

[Replicant]

Originally Posted by shimei

Could you also share what you did Replicant. I would like the subscribe button to be inline with the forum, latest activity, and subscription menu too. I would just like the subscription button moved down onto the grey menu bar: https://www.christforums.org/forum/c...ism-oec-or-yec


With the code you had provided I am only able to move the subscription button behind it and not on it.

We weren't able to get it to work, it broke the responsiveness and also didn't work on Safari. It's going to need a lot more tweaking and some media queries to get it working and I still have no clue what to do about Safari as I have no access to a machine that has it.

[noypiscripter]

These position the Subscribe button to the rightmost spot without the big gap at the bottom. These should work on both desktop and mobile.

.conversation-content-widget .conversation-controls {
    position: relative;
    bottom: -22px;
    z-index: 1;
    margin: -26px 0 0;
    right: 0;
    float: right;
    padding: 0;
}
.canvas-layout-container .canvas-widget.page-title-widget {
    margin-bottom: 0;
}

I think that looks better than putting the Subscribe button right next to Posts and Latest Activity tabs.

[David Karol]

Originally Posted by noypiscripter

These position the Subscribe button to the rightmost spot without the big gap at the bottom. These should work on both desktop and mobile.

.conversation-content-widget .conversation-controls {
    position: relative;
    bottom: -22px;
    z-index: 1;
    margin: -26px 0 0;
    right: 0;
    float: right;
    padding: 0;
}
.canvas-layout-container .canvas-widget.page-title-widget {
    margin-bottom: 0;
}

I think that looks better than putting the Subscribe button right next to Posts and Latest Activity tabs.

How does this end up looking on your end? It gives me a great starting point- thanks. Still not ideal though. The checkbox (admin only?) ends up being covered up, and we still have a bit of waste space.