Showcase "Item Management System" (Reviews, Guides, Garage etc)

Showcase "Item Management System" (Reviews, Guides, Garage etc) [Paid] 2.9.0

No permission to buy ($50.00)

ibenick

Active member
Just signed up to have a play :)

My first question is how did you get each section here


to appear as one continuous entry here with sub-headings, etc?


In the template nflj_showcase_item, I took the code for each of the usual additional tabs and their content and removed it via TMS:

First the tabs themselves get removed:

Code:
<xen:if is="{$item.tab2_name} && {$t2.hasContent}">       
                <li>
                    <a href="">{$item.tab2_name}</a>
                </li>
            </xen:if>       
            <xen:if is="{$item.tab3_name}  && {$t3.hasContent}">       
                <li>
                    <a href="">{$item.tab3_name}</a>
                </li>
            </xen:if>       
            <xen:if is="{$item.tab4_name}  && {$t4.hasContent}">
                <li>
                    <a href="">{$item.tab4_name}</a>
                </li>
            </xen:if>
            <xen:if is="{$item.tab5_name}  && {$t5.hasContent}">
                <li>
                    <a href="">{$item.tab5_name}</a>
                </li>
            </xen:if>

And then the content of those tabs:

Code:
<xen:if is="{$item.tab2_name} && {$t2.hasContent}">
                <li>
                    <div style="padding-top:10px;">               
                        <article><blockquote class="ugc baseHtml">{xen:raw $t2.message}</blockquote></article>
                    </div>       
                </li>
            </xen:if>
            <xen:if is="{$item.tab3_name} && {$t3.hasContent}">
                <li>
                    <div style="padding-top:10px;">               
                        <article><blockquote class="ugc baseHtml">{xen:raw $t3.message}</blockquote></article>
                    </div>           
                </li>
            </xen:if>
            <xen:if is="{$item.tab4_name} && {$t4.hasContent}">
                <li>
                    <div style="padding-top:10px;">               
                        <article><blockquote class="ugc baseHtml">{xen:raw $t4.message}</blockquote></article>
                    </div>   
                </li>       
            </xen:if>
            <xen:if is="{$item.tab5_name} && {$t5.hasContent}">
                <li>
                    <div style="padding-top:10px;">               
                        <article><blockquote class="ugc baseHtml">{xen:raw $t5.message}</blockquote></article>
                    </div>   
                </li>       
            </xen:if>

Then I just took all of those tab content items and inserted it into the first tab, below the main content. I left the 'if is' statements in there so they won't show unless there is content, and I included an h3 tag for each section and styled it in extra.css. Here is my code for the first tab with all of the sub headings:

Code:
                <h3 style="margin-top: -10px !important;">Overview</h3>
                <article><blockquote class="ugc baseHtml">{xen:raw $item.message}</blockquote></article>
           
            <xen:if is="{$t2.hasContent}">
                <h3>Trailhead</h3>
                <article><blockquote class="ugc baseHtml">{xen:raw $t2.message}</blockquote></article>
            </xen:if>
         
            <xen:if is="{$t3.hasContent}">                     
                    <h3>The Hike</h3>                   
                <article><blockquote class="ugc baseHtml">{xen:raw $t3.message}</blockquote></article>
            </xen:if>
         
            <xen:if is="{$t4.hasContent}">
                <h3>Permits & Regulations</h3>
                <article><blockquote class="ugc baseHtml">{xen:raw $t4.message}</blockquote></article>
            </xen:if>
           
            <xen:if is="{$t5.hasContent}">
                <h3>Relevant Books & Maps</h3>
                <article><blockquote class="ugc baseHtml">{xen:raw $t5.message}</blockquote></article>
            </xen:if>
 
<xen:if is="{$t6.hasContent}">
                <h3>Trip Reports</h3>
                <article><blockquote class="ugc baseHtml">{xen:raw $t6.message}</blockquote></article>
            </xen:if>

It's a little tougher to do all this in Template Modifications System rather than directly editing the template, but well worth it when it comes to upgrades as you don't have to try to figure out everything you changed and reapply.

To give you an idea, this a list of all of my TMS modifications made just to the 'nflj_showcase_item' template.

Screen Shot 2013-01-25 at 9.24.14 AM.png
 

RobParker

Well-known member
That's a huge help, thanks :)

I think you also partly answered my next question, how did you add the discuss link at the end? Is that automatic or manually added?
 

ibenick

Active member
That is manually added. An admin or a the item creator has to go create the thread, and then paste the URL into the field I created for it. If the URL is supplied, the styled box at the bottom prompting people to visit the discussion thread appears. Really looking forward to possible future implementation of discussion threads in Showcase. :)
 

RobParker

Well-known member
Almost managed to reproduce it.

Only thing I've done differently which I think has worked is use $item.tab3_name as the heading name, rather than hardcoding it in like you have. Is there any reason that my way wouldn't work?

I'm trying to get the h3 styling to work. I don't want to style every h3 tag so thought I could do this:

.showcasetabcontainer h3 {
color: #102234;
font-weight: bold;
}

but that's not working.

Here's firebugs output:

Screen Shot 2013-01-25 at 19.33.55.png

Edit: This worked

.showcaseItemTabs h3 {
color: #102334!important;
padding: 2px 2px;
text-align: left;
font-size: 1.65em;
border-bottom: 1px solid #102334;
margin: 25px 0 10px;
padding: 10px 0px 4px 29px;
}
 

ibenick

Active member
Correct. The top image in the content I manually inserted so that it would grab the featured image and always float it there. Pretty much like the little one that comes standard in the sidebar, just a bit bigger and adds to the visual appeal.
 

RobParker

Well-known member
Correct. The top image in the content I manually inserted so that it would grab the featured image and always float it there. Pretty much like the little one that comes standard in the sidebar, just a bit bigger and adds to the visual appeal.

Sorry, do you mean you inserted in the template or that you manually add it for each post?
 

ibenick

Active member
It is inserted in the template so that it is automatically generated for each item. Some of the Trail Guides have other photos inserted into the content but those are manually inserted on an item by item basis.
 

ibenick

Active member
The Node Items Module in the latest version of Showcase is awesome! This really takes it up a notch in making Showcase more integrated with the forum home. And it even looks pretty nice with my XenPorta slider. This software just keeps getting better and better!

Check it out:

http://backcountrypost.com/
 

RobParker

Well-known member
It is inserted in the template so that it is automatically generated for each item. Some of the Trail Guides have other photos inserted into the content but those are manually inserted on an item by item basis.

Is this the correct code or did you edit it?

Code:
<xen:foreach loop="$item.attachments" value="$attachment" i="$i">
                        <xen:if is="{$i} <= 1">
                                <div class="nailthumb-container"><a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger" data-href="{xen:link misc/lightbox}"><img  border="0" src="{$attachment.thumbnailUrl}" class="LbImage" /></a></div>
                        <xen:else />
                                <div style="display:none;"><a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger" data-href="{xen:link misc/lightbox}"><img  border="0" src="{$attachment.thumbnailUrl}" class="LbImage" /></a></div>
                        </xen:if>    
                    </xen:foreach>

I wasn't sure if it needed the loop or something changing.
 

ibenick

Active member
I edited it. The default thumbnail for the featured image is 300px wide and I wanted that first image in the Trail Guide to be 400px. This is my code for the div inserted there.

Code:
<div class="tgFeaturedImage">
<xen:foreach loop="$item.attachments" value="$attachment" i="$i">
                        <xen:if is="{$i} <= 1">
                                <a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger" data-href="{xen:link misc/lightbox}"><img  border="0" src="{xen:link attachments, $attachment}" class="LbImage" width="400px"/><br>View Photo Gallery</a>
                        </xen:if>
                    </xen:foreach>
 
</div>
 

Ezenity

Active member
Looking to purchase this wonderful addon, however am having some issue in doing so. I registered on your site, and it is still displaying the following:
"You must be a validated registered member to purchase any products from the store."​
Any suggestions on fixing this.?
 

3rd AnGle

Well-known member
Just wanted to thank you Ibenick for sharing the modded codes. I wasn't so much interested in this but after looking at what you have done with it.. i am very very tempted. I wish i could do what you have done :D

If only Bobster agrees to put users star ratings in their comments.. this could be the one i have been looking for
 

Mouth

Well-known member
When looking at a ShowCase item, the image within the Image Gallery block on the sidebar is wider than the block. Example ...

scase.png


Can I correct this?
 

Mouth

Well-known member
Can anyone advise the CSS (I've looked, but need to improve my CSS knowledge) location for the tabs? I'd like to change the background colour for them and, hopefully, even have a different background colour for each tab that I have defined to help them both stand out and be helpful in recognition.
 

RobParker

Well-known member
Can anyone advise the CSS (I've looked, but need to improve my CSS knowledge) location for the tabs? I'd like to change the background colour for them and, hopefully, even have a different background colour for each tab that I have defined to help them both stand out and be helpful in recognition.

Use FireBug to inspect the element you want then search the css files for it :)
 

Bob

Well-known member
Can anyone advise the CSS (I've looked, but need to improve my CSS knowledge) location for the tabs? I'd like to change the background colour for them and, hopefully, even have a different background colour for each tab that I have defined to help them both stand out and be helpful in recognition.

the only CSS for those tabs that are specific to Showcase is this class...

HTML:
    .showcaseItemTabs {
        font-size: 12px;
        padding: 3px 0px;
        margin: 10px 0px 10px 0px;
    }

Everything else is Core Xenforo .Tabs .tabs
 

Mouth

Well-known member
the only CSS for those tabs that are specific to Showcase is this class...

HTML:
    .showcaseItemTabs {
        font-size: 12px;
        padding: 3px 0px;
        margin: 10px 0px 10px 0px;
    }

Everything else is Core Xenforo .Tabs .tabs

This applies to the entire content of the tab. I was looking for just the small tab itself and it's description, not the tab's content.
 
Top