vb.org Archive - Move 'Subscribe' button in line with 'Articles', 'Forum' etc.

Page 1 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB5 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=264)

- - Move 'Subscribe' button in line with 'Articles', 'Forum' etc. (https://vborg.vbsupport.ru/showthread.php?t=322164)

David Karol

03-19-2016 12:31 AM

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

1 Attachment(s)

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.

https://vborg.vbsupport.ru/attachmen...1&d=1458351068

In Omnibus

03-19-2016 12:50 AM

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

David Karol

03-19-2016 01:04 AM

That didn't seem to help.

Replicant

03-19-2016 02:08 AM

1 Attachment(s)

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

Code:

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

03-19-2016 03:57 AM

Quote:

Originally Posted by Replicant (Post 2567613)

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

Code:

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

03-19-2016 04:03 AM

Quote:

Originally Posted by David Karol (Post 2567617)

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

shimei

03-19-2016 09:10 PM

Quote:

Originally Posted by Replicant (Post 2567619)

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

03-20-2016 12:30 AM

Quote:

Originally Posted by shimei (Post 2567653)

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

04-24-2016 04:24 AM

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

Code:

.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

05-11-2016 04:36 AM

1 Attachment(s)

Quote:

Originally Posted by noypiscripter (Post 2569467)

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

Code:

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

All times are GMT. The time now is 11:13 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01731 seconds Memory Usage 1,747KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: