I noticed that some people on here have been asking how to change the layout of new members photos and descriptions (i.e. what gets dynamically inserted on the page from the {%newMembersBlock%} macro)
After spending some time on this I have managed to figure this out, it basically involves some CSS hacking in the <head> section of the HTML code for the Front Page Layout (note that you have to have the Custom HTML option selected, NOT the WYSIWYG Editor in the Site Settings).
To complicate things, each pre designed template on WDP uses different class names for the table/DIVs that generate the new members block, so if you haven't used the same predesigned templates that I've used, then you will need to play about with the code until you get the desired results, but hopefully you can use this tutorial as a guide.
Now on to the tutorial...
Romantic Dating Template (colour_scheme1)
The following code should be inserted in the <head></head> section of your HTML code before the <title></title> tags:
CODE
<style type="text/css">
.members {
width: 100%;
height: auto;
}
.foto {
width: 100%;
padding: 15px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.foto img, {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.foto * div {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
.members {
width: 100%;
height: auto;
}
.foto {
width: 100%;
padding: 15px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.foto img, {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.foto * div {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
End result should like the new members block at http://www.bluegrassdating.com
40plus Club Template (colour_scheme2)
The following code should be inserted in the <head></head> section of your HTML code before the <title></title> tags:
CODE
<style type="text/css">
.members {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.forImg {
max-width: 150px;
float: left;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
div {
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
.members {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.forImg {
max-width: 150px;
float: left;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
div {
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
End result should like the new members block at http://www.petloversdating.co.uk
I hope this tutorial is of some help to people?
Cheers,
Sam
