• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

RM 1.0 Create "Discuss this Resource" button below an article

MrC

Active member
#1
Hi,

I am wondering how to create the button just bellow an article. It is more convenient and noticeable for (first time) viewers.

Thanks.
 

Brogan

XenForo moderator
Staff member
#2
You can edit the templates and move the related code to where you want.
You may need to make some CSS changes also.

A mockup of where you want it would help.
 

MrC

Active member
#3
You can edit the templates and move the related code to where you want.
You may need to make some CSS changes also.

A mockup of where you want it would help.
Thanks Brogan. My site is mainly articles and I have disabled reviews. It would be nice for me to have something like the attached.
 

Attachments

Morgain

Well-known member
#4
Thanks Brogan. My site is mainly articles and I have disabled reviews. It would be nice for me to have something like the attached.
Mr C I agree with you and I have managed to add the button but can't style it for width and height.

The template is resource_view

Code:
<xen:comment>ADD BUTTON TO RESOURCE_VIEW</xen:comment>
<div><xen:if is="{$thread}"><a class="callToAction" href="{xen:link threads, $thread}"><span>
        {xen:phrase discuss_this_resource}
        <xen:if is="{$thread.reply_count}"><small class="minorText">{xen:phrase replies}: {xen:number $thread.reply_count}, {xen:phrase latest}: {xen:datetime $thread.last_post_date}</small></xen:if>
    </span></a></xen:if>
</div>
 
<xen:sidebar>
<xen:sidebar> shows location in template.

The result is here http://www.housemorgain.co.uk/oval/resources/multiple-page-article.5/
at the bottom

I added this to EXTRA.css but no effect

Code:
/* STYLE DISCUSSION BUTTON BOTTOM OF PAGE */
.resource_view .callToAction {
margin-left:300px;
width:230px !important;
height:100px !important;
{
Brogan come back! Ja a a ke Shelley ... someone?
 

Shelley

Well-known member
#5
Mr C I agree with you and I have managed to add the button but can't style it for width and height.

The template is resource_view

Code:
<xen:comment>ADD BUTTON TO RESOURCE_VIEW</xen:comment>
<div><xen:if is="{$thread}"><a class="callToAction" href="{xen:link threads, $thread}"><span>
        {xen:phrase discuss_this_resource}
        <xen:if is="{$thread.reply_count}"><small class="minorText">{xen:phrase replies}: {xen:number $thread.reply_count}, {xen:phrase latest}: {xen:datetime $thread.last_post_date}</small></xen:if>
    </span></a></xen:if>
</div>
 
<xen:sidebar>
<xen:sidebar> shows location in template.

The result is here http://www.housemorgain.co.uk/oval/resources/multiple-page-article.5/
at the bottom

I added this to EXTRA.css but no effect

Code:
/* STYLE DISCUSSION BUTTON BOTTOM OF PAGE */
.resource_view .callToAction {
margin-left:300px;
width:230px !important;
height:100px !important;
{
Brogan come back! Ja a a ke Shelley ... someone?
Wouldn't you use the following? .resource_view a.callToAction

Seems like your missing two characters
 

Morgain

Well-known member
#6
Wouldn't you use the following? .resource_view a.callToAction
Seems like your missing two characters
OK yes I understand that but it's not reaching it.
Seems like the EXTRA.css is not exerting control here for some reason

I got some effect by editing direct in resource_view but much better to get EXTRA to do it.
I checked resource_view.css - it has this
Code:
.sidebar .callToAction
{
    display: block;
    text-align: center;
    height: auto;
    line-height: normal;
    margin: 15px 0;
}
 
    .sidebar .callToAction span
    {
        font-size: 12pt;
        padding: 3px 0;
    }
 
    .sidebar small.minorText
    {
        display: block;
        font-size: 11px;
        font-weight: normal;
    }
So maybe I need to add another class so EXTRA can specify it;s THIS callToAction because there's one up top and the sidebar. So waht I'm getting is generic callToAction - the sidebar one has something that says "Do this if it's in the sidebar."
 

Shelley

Well-known member
#7
try

Code:
.mainContent a.callToAction {
    height: 42px;
}
.mainContent might control the button for any additional styling you want to do without it affecting the sidebar button. TBH I'm unsure what you've done. :D
 

Shelley

Well-known member
#8
Find

.mainContent a.callToAction span and remove the margin-left

and then
.mainContent a.callToAction {height: auto;}

that should fix your button at the bottom.

morgains-button.png
 

Morgain

Well-known member
#9
Shelley thank you this is reaching it now.
What's left is that the background of the button is a gradient bar which creates a border. It is getting left behind.
See http://www.housemorgain.co.uk/oval/resources/multiple-page-article.5/updates?page=1
at the bottom. Also hits the add page button at the top :(
It really needs a command to make this EXTRA stuff ONLY command that one button at the bottom.

Also the second line of text on the button is showing bold which doesnt match the one on the sidebar.
I tried this with no effect:
Code:
.mainContent a.minorText span {
font-size: 10pt;
font-weight: normal;
}
 

Morgain

Well-known member
#10
Yes thank you the height is good with auto
and the top button is now ok
shame to sacrifice the placing at centre of bottom one

but the background gradient needs a height control - despair no idea!
 

Shelley

Well-known member
#11
Yes thank you the height is good with auto
and the top button is now ok
shame to sacrifice the placing at centre of bottom one

but the background gradient needs a height control - despair no idea!
I actually had it centered in firebug. you seem to have a rogue div ""=""


the....
.mainContent a.callToAction { height: auto; } still needs applying as it's falling short at the bottom.
 

Morgain

Well-known member
#13
Hmm I think that set of css on the right you show, is the main XF css for this type of callToAction button. because 20px fits the size it usually is.
Here I have the front of it responding to height: auto but not the background. have tried putting in some background controls no effect.

Also complicated by the twinning with the top instance of callToAction which governs the ADD PAGE button at the top.
Wish we could create a new class to govern just THIS bottom instance of the button not that one too.
 

Morgain

Well-known member
#14
Can anyone help with this pesky bit of CSS please?
See Shelley's screenshot above. We cannot find why the background image which gives a blue border to the button, persists in a height of 20px instead of the bigger height of the front layer.
 

Shelley

Well-known member
#15
Did you try changing the height like so? You may have to !important those.

Code:
a.callToAction { height: auto; border:1px solid #yourcolour;}
 

Morgain

Well-known member
#16
Shelley thank you yes that has sorted out the silly border.
But now the second row of text disappears - the a.minorText
Here's what I have in EXTRA,css

Code:
/* STYLE DISCUSSION BUTTON BOTTOM OF PAGE */
.mainContent a.callToAction  span {
height: auto !important;
width: auto;
text-align: center;
font-size: 12pt;
border:1px solid #ffffff;
}
.mainContent a.minorText span {
font-size: 10pt;
font-weight: normal;
padding: 3px;
}
Weird - I tried commenting out this whole section just to see the minorText stuff return and refresh my memory - and it makes no difference whether that is in EXTRA or not. I still get your new border effect! and no minorText. I am very confused.