Best way to insert related pages sidebar?

Hi Laura,

If I were you, I would use CSS to turn the links into icons, and display them horizontally one next to each other.
This should get you started:

#icon-container {
   float: right;
   position: relative;
   width: 200px;
}
#icon-container a {
   background: url("path/to/icon.png") no-repeat 0 0 transparent;
   display: block;
   float: left;
   padding-left: 10px;
}

In order for the code to work, you would have to insert id="icon-container"“in the HTML. You could also insert a title attribute when calling the link tags, so that when you hover over the corresponding icons, their names and/or descriptions appear as a tool tip.

Cheers!

Hmmm thanks…don’t love the idea of horizontal though I don’t think…they would look like breadcrumb nav it seems? I was thinking a vertical box with border, sort of like a widget box like on the home page? I feel like I’ve seen plug ins or something to do it that way, but I could be confusing it with something else…

In that case, you could try applying the same HTML structure and CSS classes as the one in your homepage widgets. Something like:

<div id="page-links" class="sidebar-wrap categories">
<h3>Some Title</h3>
<ul class="xoxo categories">
<li class="cat-item">
<a title="Frequent Flyer Programs" href="https://juicytravels.com/mileageair-travel-programs/">Frequent Flyer Programs</a>
</li>
<li class="cat-item">
<a title="Hotel Loyalty Programs" href="https://juicytravels.com/hotel-loyalty-programs/">Hotel Loyalty Programs</a>
</li>
<li class="cat-item">
<a title="Car Rental Loyalty Programs" href="https://juicytravels.com/car-rental-loyalty-programs/">Car Rental Loyalty Programs</a>
</li>
</ul>
</div>

That should do the trick.

Ok thanks…I’ll play around with it! Thank you!

Emmm…well I’m stuck. Close but stuck ??
I’ve got the box on the right with the shadow just as I want it in the right place and all…the only thing I’m not getting is how to get the text to fill in the white space between the “Award wallet” logo on the left and the new box on the right. I want the text to flow in that white space around both of those divs. I’m sure I’ve got a dumb css error.

So this is the code:

<div class="sidebar-pages"><span class="sidebar-title">Other Loyalty Resources</span>
<ul>
<li><a title="Frequent Flyer Programs" href="https://juicytravels.com/mileageair-travel-programs/">Frequent Flyer Programs</a></li>
	<li><a title="Hotel Loyalty Programs" href="https://juicytravels.com/hotel-loyalty-programs/">Hotel Loyalty Programs</a></li>
	<li><a title="Car Rental Loyalty Programs" href="https://juicytravels.com/car-rental-loyalty-programs/">Car Rental Loyalty Programs</a></li>
</ul>
</div>
<div class="articleimage1"><a href="https://www.awardwallet.com"><img class="alignleft" src="https://juicytravels.com/assets/articleimages/Page-LoyaltyPrograms/awardwallet.gif" alt="Award Wallet logo" width="200" height="50" /></a></div>
<div class="articlecontent1"><a title="Award Wallet" href="https://www.awardwallet.com">Award Wallet</a> keeps track of your reward programs such as frequent flyer miles, hotel and credit card points with 427 current loyalty programs. What's Juicy: It's free and it monitors your accounts to notify you when points are going to expire. The interface is clean and easy to use, and best of all there is a smart phone app so you can quickly see balances on the go. Takes some time to enter in all your accounts but it sure is nice to have once you get them set up. For a mere $5 for six months you get the premium benefit tier including unlimited expiration tracking as opposed to only 3 for a free account. The coverage is better than the popular MileageManager and MileTracker sites.</div>
<div style="clear:both;"></div>

<hr />

And this is the relevant css:

}
.articleimage1 {
	float:left;
	width:210px;
}
.articlecontent1 {
	float:right;
}
.sidebar-pages {
	width:200px;
	float:right;
	padding:10px;background: #fff;
	border: 1px solid #ccc;
	-moz-box-shadow: 0 0 5px #BBB;
	-webkit-box-shadow: 0 0 5px #BBB;
	box-shadow: 0 0 5px #BBB;
	margin-bottom: 16px;
	padding: 10px 12px;
}
.sidebar-title {
	font-family:Arial, Helvetica, sans-serif;
	color:#069;
	font-size:14px;
	font-weight:bold;
}

Do you know how to get the text to flow between the two in that white space? New style for just that item?

Thank you!

Hi Laura,

The reason why the text is not flowing around the AwardWallet ad is because the ad in question is set to display as a block. If you leave that property in its default inline value the text should flow as expected.
However, if what you want is to show the link box first, and below that the AwardWallet ad and info, set the sidebar-pages div containing the links to display as a block. That will push the ad downward and will force it to display as the rest of the ads.

I don’t see where it’s telling it to be in a block?
I tried adding display:inline to the css style sheet but it didn’t affect it. Should I add that somewhere else? I’m trying to accomplish the first version of what you said…for the text to flow between the adwallet image and the box of links on the right. Those two things are in the correct place, it’s just that I want the text to flow into that white space, starting at the top of the adwallet image like it does for the others…

Hey it looks like I forgot to post the link to the page in question…
https://juicytravels.com/travel-mileage-loyalty-programs/

Solved ??

Great! Glad you were able to find it.
Looking way better now, ??

Yup thanks for jumping in to help!
Might not be the most elegant css solution but it seems to work so I’ll leave it alone ??