[Joe]

I’d like to have the Directory’s initial page and search results display a simple text list, and when a name is clicked it goes to a more detailed page which includes, among other things, space for an image and a Contact email form.

I am trying to accomplish this by using the Names template and the Card Bio template, along with the Contact extension (already purchased and activated). Now for the problems!

• I can’t get it to switch to the Card Bio template when a name is clicked off the list. If I click a name, it just goes to a list with the one name on it, no more info is displayed. I’m using this on the Directory’s initial page:

[connections template=”names”]

and have set all the options in Connections>Templates to the Card Bio template. I suppose I’m missing something obvious…

• The text formatting on the Names template is screwed up. The directory contains some Individuals and some Organizations. It seems to be forcing everything into a 2 column layout with lots of extra spaces in some of the names, and slightly offsetting the baseline between the first and last name. Like maybe they’re center-justified, but then why the baseline shift? I’d like to simply display a 1-col list with no justification or other whack format issues. Once a user clicks on a name, I’d like it to take them to a slightly tweaked Card Bio page.
• I’ve tried modifying the way the Names and Card Bio templates display entries using the instructions here http://connections-pro.com/2014/05/07/quicktip-custom-css-templates/ However, after creating the new folders and -custom.css files, nothing changes in either template. If I add css directly in Appearance>Edit CSS, I can change for example the font-size across ALL templates, but I can’t figure out how to change specific things in individual templates. For example, I want to fix the justification and layout in Names, and also the font sizes and layout in Card Bio.
• In Card Bio I’d like to change which elements are displayed where. For example, I’d like to switch the position of the social icons and the address, and I’d like to completely get rid of the “Last Updated x weeks ago” text. I tried putting:

.cn-last-updated {
display: none;
}

into Edit CSS and into card-bio-custom.css to no effect. So, I want to get rid of this one and rearrange/style the others.

Your help with these issues is appreciated. Thanks for a great plug-in!

[Steven Zahm]

@ Joe

re: I can’t get it to switch to the Card Bio template when a name is clicked off the list. If I click a name, it just goes to a list with the one name on it, no more info is displayed. I’m using this on the Directory’s initial page:

Remove the template=names from the shortcode. Instead do this…

• Activate the Names template under the All template type on the Connections : Templates admin page.
• Go to the Connections : Settings admin page.
• Click the Display tab.
• Enable the Single Entry template option.
• Go back to the Connections : Template admin page.
• Click the Individual template type (upper left).
• Active the Card Bio template.
• Do the same for the Organization template type.

Now the initial results list will use the Names template and when you click on the name it’ll take you to the profile page and display it using the Card Bio template.

re: The text formatting on the Names template is screwed up.

Without a link to the page with the display issue, the best I can say it sounds like a CSS conflict with the theme or another plugin.

re: However, after creating the new folders and -custom.css files, nothing changes in either template

Did you look at the page source to make sure the files are being loaded. The most common issue when they are not is the file paths are incorrect see Connections does not “see” them to load them.

re: I’d like to completely get rid of the “Last Updated x weeks ago” text. I tried putting … into Edit CSS and into card-bio-custom.css to no effect.

The like reason is the the Connections CSS is loaded after the CSS from the “Edit CSS” so it is getting overridden. Try this instead:

.cn-last-updated {
  display: none !important;
}

Add the !important flag will ensure that is can not (easily) be overridden.

Hope that helps, please let me know.

[Joe]

Thanks for your help, I’ve made some good progress. Switching between the templates now works like a charm, and the code to remove the Last Updated worked too.

Still struggling with the card-bio-custom.css to reformat the template. I have the file at this path:

/public_html/wp-content/themes/hueman/connections-templates/card-bio/card-bio-custom.css

and to test it out, I moved the .cn-last-updated code from Edit CSS (where it was working) to the card-bio-custom.css (where it no longer works). I tried putting it here too:

/public_html/wp-content/uploads/connections-templates/card-bio/

and still nothing. I’m sure there’s some silly easy thing I’m overlooking. Do I have to put some special code at the top of the CSS doc before selectors? Does it matter that the .css doc began life as a .rtf doc from TextEdit?

---

Working with the weirdness in the column layout – I found that the number of columns is variable from 1-4 based on the screen size. I used this in Edit CSS to force one-col for all screen sizes:


.cn-names {
-webkit-column-count: 1 !important; /* Chrome, Safari, Opera /
-moz-column-count: 1 !important; / Firefox */
column-count: 1 !important;
}

.cn-list-body {
-webkit-column-count: 1 !important; /* Chrome, Safari, Opera /
-moz-column-count: 1 !important; / Firefox */
column-count: 1 !important;
}


When I did this it fixed the weird text justification problem. Another prob in multi-col layouts was that it was splitting entries between columns – I thought I could implement a “break-inside” somewhere but couldn’t figure out where/how. But I think I’m good with the one-col look for now. I’m learning, slowly but surely =)

Now that I have the column and text formatting in good shape, I’m wondering if there’s a shortcode or other way to move the “Submit New Entry” link to another page.

Thanks again for your help – your plugin was exactly what I needed for this project and I’m very nearly done!

[Steven Zahm]

@ Joe

re: custom css file

Since the Bio Card template does not have a “core” CSS file, the card-bio-custom.css will not be loaded because they can only be loaded as a dependency of the template’s “core” CSS file.

If you change the name to card-bio.css it will load just fine.

re: Now that I have the column and text formatting in good shape, I’m wondering if there’s a shortcode or other way to move the “Submit New Entry” link to another page.

Sorry, no, there is not a way to move this link. I get many requests for this so I will be adding other ways to create this link in future versions. ETS is unknown at this point.

Hope that helps!

[Author]

Posts