Creating a New Block of Links on the left with their own style

[ddpWebGuy]

I just need to have a second set of links with their own style to show up in the left column. But I want them them to only show up where I have placed that block in the Website Layout section for a specific content type.

Example:

I have a content type called: Programs.
On these pages I want to display a subset of links that have their own style on the left and I only want this new style of links to show up for this content type, and not the others.

So I have created a set of custom links in the Menu/Lists area, and have associated it with this new link block in my code using blockStyle="Left Program Links" and I have also inserted the new class I created for these: programLinks.

I have my new links working. But it's showing up as a duplicate on the page, and this is also showing up in all the side links, rather than just for my Program pages.

What code do I need in this block to have it show up ONLY on my program pages?

Here's a screen shot of the code in my styleguide. The code on top is my new code with new style, the one on the bottom is the default. Both are showing up. And I don't want to delete the default one, because I need to use that on other pages.

http://dev.darcydesign.com/_interspire_support/sideLinks/sidelinks1.gif

Here's a screen shot of the page:

http://dev.darcydesign.com/_interspire_support/sideLinks/sidelinks2.gif


Any help is appreciated.

[ddpWebGuy]

thanks to Jodie to who totally rocks, I have resolved this issue. I'm posting it here so that others can have the code that worked!

Here's a screen shot of the final code for my new sidebar links. Keep in mind this new class has been added to the Advanced tab of the menu/list I created for these side bar links. As well as the blockStyle="Left Program Links" which has also been selected in the drop down menu in that advanced tab.

For those of you who don't know. In order to associate your new style with a specific block of code, you insert the blockStyle starting with the location (it must be one of the following: Top, Left, Right, Middle, Bottom). Then after that you can make up the name that describes what it is so you can easily understand in the admin.

http://dev.darcydesign.com/_interspire_support/sideLinks/sideLinksFixed.gif

[rmcguire]

Thanks for all your posts ddp, they've helped me out a lot.

[ddpWebGuy]

Glad I could help! I wasn't finding the answers I was needing here for IWP 5.0. So as I get each question I need answered by Interspire, I'm committed to posting the answers here. I hope others will do the same.

[rmcguire]

I appreciate that, annoying when I find a post relating to a problem I'm having and it just says "Answer found" but doesn't explain the answer. If I come across any solutions myself I'll be sure to try and put all information I can up here.

[ddpWebGuy]

I totally agree. I couldn't believe that when I did a search that there was nothing posted for putting Flash in the header. Or even adding an additional block of links. But then, they did revamp the WP 5.0 a great deal and just released it.

I encourage everyone to do this because the fact that Interspire doesn't have phone support has pushed my project back a week of time at least, waiting for their replies on these questions.

They did say they are talking about having phone support in the future when they hire more people for their office in Austin, TX. I hope they do, because one of the primary reason I selected this app for my client is because they do offer support. But I didn't realize it wasn't phone support.

[ddpWebGuy]

I just wanted to post a little more information on this here.

I have used different content types for all sections that require it’s own side navigation so that I could control what links show up using the layout manager and custom link sets.

For the side navigation, I have used a new list style so I could make it look different and created a new link List in the Menu/Links area.


This is the code I have in my styleguide. I have placed just above the other set of side links. Which I just duplicated, and created my own styles for. You don't necessarily have to create a new style for these, you could just change the styles for the standard links as well. But I wanted to keep those in case I needed them for other pages.

I originally was going to do this for just the program pages. But the client then wanted them for everything.



<!-- Program Links specific to the Program pages - but I'm actually using these for all the content type side links -->
<div id="programLinks" block="list" blockStyle="Left Program Links">
<div class="programLinks">
<h2><span class="tplvar-list-title">Program Links</span></h2>
<ul class='tplrepeat-parent'>
<li class="tplrepeat-list"><a href="#blarg" class="tplvar-listitem-url-href tplvar-listitem-title tplvar-listitem-target-target">Get Involved</a></li>
<!--{ignore}-->
<li><a href="#">FAQ</a></li>

<li><a href="#">Success Story</a></li>
<li><a href="#">Our History and Philosophies</a></li>
<!--{/ignore}-->
</ul>
</div> <!--{ignore/} end of programlinks class-->
</div> <!--{ignore/} end of programlinks id-->





The styles in styles.css You'll want to modify as necessary.




.programLinks {
font-size: 10px;
font-weight: bold;

}



#programLinks h2 {
color: #999999;
font-size: 11px;
text-align: right;
letter-spacing: 1px;
margin-right: -5px;

}


#programLinks {
margin-top: 10px;
margin-bottom: 25px;

}
#programLinks ul {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #D4D4D4;
}


#programLinks a {
height: 20px;
width: 165px;
padding-top: 10px;
padding-bottom: 15px;
background-image: url(../images/programLinkbg.jpg);
text-align: right;
background-repeat: no-repeat;
margin: 0px;
padding-right: 5px;
}

#programLinks li {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px 0px 5px;
padding: 0px;
display: block;
}

#programLinks a:link, #programLinks a:visited{
text-decoration: none;
height: 20px;
width: 165px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 15px;
color: #666666;
}

#programLinks a:hover {
color: #006699;
text-decoration: underline;
background-image: url(../images/programLinkbg-hover.jpg);

}

#programLinks a:active {
color: #FF6600;
text-decoration: underline;
background-image: url(../images/programLinkbg-active.jpg);

}




Once you have these loaded. (remember to select the template in the Design area of the control panel to load the new code in the styleguide once you uploaded it).

You then just create a new Link List in the Menu/List area. Use a custom set of links. And set the new Template Block Style and new class.

http://dev.darcydesign.com/_interspire_support/sideLinks/side-menu1.png




and you must select the block type, and add the new class in the advanced tab.



http://dev.darcydesign.com/_interspire_support/sideLinks/side-menu2.png

and then you place it on that page using the Layout manager.

http://dev.darcydesign.com/_interspire_support/sideLinks/side-menu3.png

[joncw]

ddp, thanks for this post, it has helped me out tremendously figuring out how to setup the architecture for my site. I was able to implement using different content types as main nav sections and works great. I liked the way you were segregating your content into subfolders in your URL string and could not get that working. I was not putting a lead slash mark in the content type url structure.

/about-us/{title}.html works
about-us/{title}.html causes a page not found error

thanks for that tip.

[ddpWebGuy]

Great! I've made that mistake several times.

I like to have two or more control panel windows open at the same time so I can have the Content manager open, at the same time as the Menu/Lists manager. That way I can copy the URL straight from the page list.

yeah, without that first / the URL will point to the subdirectory off the /admin/

Glad I could help!