Page 1 of 1

styling templates in Calguys User Directory

Posted: Sun Oct 20, 2013 11:37 am
by fiddler
This seems like it should be a simple matter, but the solution eludes me. I'd like the templates in Calguys User Directory to show fonts in different sizes according to h1, h2, etc., as well as different colors. All I have accomplished was getting certain info bolded by using the <strong> </strong> code before/after particular pieces of info. I've tried linking an outside styesheet by adding this code at the top:
<link rel="stylesheet" href="http://mywebsite.com/css/stylesheet.css" type="text/css" />
then adding the <h1> </h1> code accordingly where I had previously had the <strong></strong> code, but that didn't seem to work.

I've tried embedding the font size, color, etc. into the the divs, themselves, as well as other areas on the templates, but that didn't produce any results either.

The Module Help section for Calguys User Directory says Styling is completely controllable by the website developer. Can anyone shed light on how this is done?

Re: styling templates in Calguys User Directory

Posted: Sun Oct 20, 2013 5:59 pm
by Dr.CSS
Not with out seeing the 'template' or better yet the problem page and what text needs to be changed to what...

Re: styling templates in Calguys User Directory[solved]

Posted: Mon Oct 21, 2013 12:42 pm
by fiddler
I figured it out.

To get a property to display with a particular style of font, color, etc., in the Calguys User Directory I selected the template I wanted to use to display the list of members, then I created a class and added the style info for that property on the main style sheet associated with the template for the page that was used to call up that list. Next, I added that class to the Calguys User Directory template.

For instance, I wanted the property Category bolded on my members list

Here's what I added to the main style sheet:
.userdirectory_category {
font-family: 'Geogia', 'Times New Roman', serif;
color: #D54604;
font-weight: bold;
font-size: 1.5em;
margin: 0.5em;
padding-bottom: .25em;
}

Then I added the class to the Calguys User Directory template I used to call up the list of members - like this:
<div class='userdirectory_category'> {$oneuser.properties.category}</div>

Otherwise, if I didn't want any fancier styling, I could just do this:
<strong> {$oneuser.properties.category}</strong>
in the Calguys User Directory template without adding anything to the main style sheet.

Note - adding styling directly to the Calguys User Directory template only worked for bolding the property, it wouldn't work for adding font color or size, and it wouldn't work to call up a link to an independent stylesheet on the server - which is why the class had to be added to the main style sheet associated with the template for page that was used to call up that list.

I hope this sounds clear enough to help others.