[Jon C]

Hi Steven,

Thanks for the great plug-in! I’m currently building a site that requires 50+ categories in the dropdown. I’m hoping there is a way to bold the parent categories (or differentiate them in some other way) in the dropdown menu. Is there a way to change the font size of the dropdown in general as well?

My other question is how to make “Title” and “Organization” appear in the expanded entry. In other words “Title” and “Organization” appears when I make a new entry in the back-end but does not appear on the site.

Lastly a very small issue: the e-mail field in the expanded view is on the same line as the title i.e
E-mail: johndoe@gmail.com
but the Home title appears on 2 different lines. i.e
Home
New York, NY
is there a way to force it to appear on one line?

Thanks!

[Steven Zahm]

@ Jon

There’s not really any way to highlight parent level categories, sorry.

The font size can be adjusted. Here’s the CSS you can use to change it:

#cn-slim-plus .chzn-container ul.chzn-results {
	font-size: 20px;
}

The easiest way to add the titles to the Title and Organization fields is to use CSS.

#cn-slim-plus .title,
#cn-slim-plus .organization-name, 
#cn-slim-plus .organization-unit {
	margin-bottom: 6px;
}

#cn-slim-plus .title:before {
	content: "Title: ";
	font-weight: bold;
}

#cn-slim-plus .organization-name:before {
	content: "Orgnaization: ";
	font-weight: bold;
}

#cn-slim-plus .organization-unit:before {
	content: "Department: ";
	font-weight: bold;
}

Likewise, CSS can be used to change the address layout:

#cn-slim-plus span.adr span.address-name,
#cn-slim-plus span.adr span.street-address {
	display: inline;
}

Hope that helps!

[Jon C]

Hi Steven,

Thanks for the tips on Questions 2 and 3!

I’m still stuck on question 1.

Is there really no access point to change the style of the parent vs. child vs. sub-children categories? I’ll go to any length as long as you can walk me through the steps.

I notice that the parent elements get 7px of left padding, the children 31px and the sub-children 43px. Is there any way to alter the padding values? Ideally I’d love to have the fonts get smaller from parent to child but altering the padding would be a second-best option.

Thanks for your time!

[Steven Zahm]

@ Jon

If your parent categories are empty, may you could use the option grouping feature. This would make the root parent categories non-selectable and visually different.

You would have to edit the slim-plus.php file found here:
../wp-content/plugins/connections-slim-plus/

Look for this:

$atts = array(
	'default'    => self::$atts['str_select'] ,
	'select_all' => self::$atts['str_select_all'],
	'type'       => self::$atts['enable_category_multi_select'] ? 'multiselect' : 'select',
	'group'      => self::$atts['enable_category_group_by_parent'],
	'show_count' => self::$atts['show_category_count'],
	'show_empty' => self::$atts['show_empty_categories'],
	'parent_id'  => self::$atts['enable_category_by_root_parent'] ? self::$atts['category'] : array(),
	'exclude'    => self::$atts['exclude_category'],
	);

And change it to this:

$atts = array(
	'default'    => self::$atts['str_select'] ,
	'select_all' => self::$atts['str_select_all'],
	'type'       => self::$atts['enable_category_multi_select'] ? 'multiselect' : 'select',
	'group'      => self::$atts['enable_category_group_by_parent'],
	'show_count' => self::$atts['show_category_count'],
	'show_empty' => self::$atts['show_empty_categories'],
	'parent_id'  => self::$atts['enable_category_by_root_parent'] ? self::$atts['category'] : array(),
	'exclude'    => self::$atts['exclude_category'],
	'group'      => TRUE,
	);

If that is not an option, then you have to edit the class.template-parts.php file found here:
../wp-content/plugins/connections/includes/template/

Look for this function. You have to apply an inline style or maybe add a class that you can use CSS to select and style to the option value when $level is equal to 1. Adding to the inline style will probably be a little easier because there would be less code to modify.

Hope that points you in the right direction.

[Jon C]

Thanks! The parent categories were indeed empty so I was able to apply the formatting changes using the PHP changes and get the result I wanted.

If I wanted to create a class (so I could style using css) for the second and third level categories, respectively, would that be possible via the PHP in the class.template-parts? Can you walk me through that? Sorry to be such a newb with PHP… Thanks again for your help.

[Steven Zahm]

@ Jon

Yes, you should be able to add classes based on $level. The $level variable increments by 1 for each level. So, the second level the value of $level would be 2 and for the third $level the value would be 3 and so on.Something like this may work:

$class = 'class="cn-cat-level-' . $level . '"'; 

Then you would have to update lines 1010 and 1014 to add the $class.

Updated Line 1010:

$out .= sprintf('<option %4$s style="padding-left: %1$dpx !important" value="%2$s"%3$s>' . /*$pad .*/ $category->name . $count . '</option>' , $pad , $category->term_id , $strSelected , $class );

Updated Line 1014:

$out .= sprintf('<option %4$s style="padding-left: %1$dpx !important" value="%2$s"%3$s>' . /*$pad .*/ $category->name . $count . '</option>' , $pad , $category->term_id , $strSelected , $class );

That should do it.

I just added the same classes to the dev version of Connections so if you make these changes, they will be forward compatible; meaning, your CSS will not break.

PS: If you have a moment, I would truly appreciate a review as they really do make a difference. Many thanks in advance.
http://wordpress.org/support/view/plugin-reviews/connections

[Jon C]

Hi,

Sorry, I still need additional clarification.

Would be correct css to style level 2?

#cn-slim-plus div.cn-cat-level-2 {
color: red;
}

As for the class.template-parts changes, I might need a little more assistance…

I changed lines 1010 and 1014. Does it matter where I post the code $class = ‘class=”cn-cat-level-‘ . $level . ‘”‘; ? I put it in line 980.

Was I supposed to just copy the previous code or input different levels (i.e $class = ‘class=”cn-cat-level-2’ .level2 . ‘”‘;)

Thanks for the help! I submitted a review.

[Steven Zahm]

@ Jon

No the correct CSS should be:

#cn-slim-plus .cn-cat-level-2 {
    color: red !important;
}

Yes, just copy the code. Putting the $class on line 980 is fine. I made the change like this.

[Author]

Posts