Example CSS for Web Directory


To edit the Other Styles area of the Web Directory settings you need knowlege of CSS.

Go to System Settings > Under Settings > Select Web Directory

To widen the boxes for the advertiser information, you can do this by changing the width in the CSS

To display the listing two columns wide:
.companycontainer { width: calc((50%) - (25px)); }

Example - The Edition Web Directory


To display the listing three columns wide:

.companycontainer { width: calc((33%) - (25px)); }

Monnow Voice - Web Directory Other Styles settings:

Voice Magazines Website Directory

#directoryholder .companysearchdiv {
max-width: 400px;
.companyname {
margin-bottom: 10px;
.premium .companyname{font-size:20px; font-weight:bold; padding-bottom:5px;}
.companysection {font-weight: 200;}
.weblistingdescription { min-height:150px}
.companydesc { min-height: 80px;}
@media (min-width: 600px) {
.premiumcos {display:flex; align-items:stretch; flex-flow: row wrap;}
.companycontainer.premium {min-height:180px; flex-basis:240px; flex-grow:1; flex-shrink:1;}


To set the container for premium listing so they are the same size (rather than one appear bigger than the other if one has more content than the other.
An extra line of code can be added to the Other Styles box on the Web Directory Settings:
.companycontainer.companypointer.shown.premium {min-height:321px;}

All premium listings will have the same height, with it set as 321px.

Have more questions? Submit a request


Please sign in to leave a comment.