Login  Register

Re: Captions

Posted by GregChapman on Mar 29, 2012; 9:54pm
URL: https://support.nabble.com/Captions-tp7418606p7419442.html

Take a look at:
http://greg-afloat.969558.n3.nabble.com/Canal-Boat-Brokers-td2945250.html

The code for the first image looks like this:
<p class="caption750"><nabble_img src="brokerage01.jpg" border="0" class="center" 
alt="Narrowboat Eliza Jean on sale through ABNB"/>Eliza Jean was one of the boats that we 
looked over at Andy Burnett's Crick Wharf.<br>There was much to like about the boat. The 
huge paintings of a kingfisher on one side and heron on the other wouldn't be to everyone's 
taste and her fixed saloon furniture was not to mine</p>

The CSS that achieves it is this:
.nabble .caption750 {
	background-color: #ddddee;
	width: 760px;
	text-align: center;
	font-size: 0.9em;
	margin: 5px auto;
	padding: 5px 0px;
	border: 1px solid #000080;
}
Similarly, the code for the second image looks like this:
<p class="captionr500"><nabble_img src="brokerage02.jpg" border="0" alt="Whilton Marina"/>
The view of Whilton marina from outside the sales office<br>There are often 30 to 40 boats available 
to view</p>
and the CSS for that is:
.nabble .captionr500 {
	float: right;
	background-color: #ddddee;
	width: 510px;
	text-align: center;
	font-size: 0.9em;
	margin: 5px 0px 5px 5px;
	padding: 5px 0px;
	border: 1px solid #000080;
}
The CSS is simply added to the dialogue under the CSS button on the Change Appearance toolbar. Had there been a left aligned image I would simply have added a ".captionl500" and the float rule would have been changed appropriately.

If you need help editing this stuff to suit your forum, just ask.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.