Icon layout on IT home page

[bohrj]

Is it still going to be possible to organize the home page icons into a 2-column layout? If so, what is the best way to achieve that?

Is it as simple as plugging it into a table (which, if I recall, is in the works already), or does something else need to be done?

[jacoboyen]

We are wrapping this up as part of your plugin. You can see it on the test site: http://wptest.central.edu.

We set it up to use CSS classes so that it can be responsive for mobile devices.

[bohrj]

I have a feeling that the layout won't still work if we put widgets on the right rather than empty space, because it would be too cramped... Is that correct?

[jacoboyen]

That is probably true. We can give it a try though and see what you think.

You could also consider changing the layout of the text and the icons so you have a bit more space. Stacking tends to work better I think since you have more space for text. It could be similar to this:

[bohrj]

I like the idea, and the style. Would you suggest just scrapping the accompanying subtext (the part I highlighted in the image)? Also, are those icons part of a set we could possibly use as well, or are they custom?

[jacoboyen]

I think I would get rid of the bold text below the heading (that is in black). So for Help & Training you would just have the icon, the help & training section name, and the bullets: help desk, training resources, FAQs.

The icons that we have used in the passed are completely custom. My guess is that the WordPress dashicons set probably has enough icons that are usable for your needs: http://melchoyce.github.io/dashicons/. We wouldn't have make any additional changes if you used these icons.

We can also look at adding the Octicons set from GitHub: http://octicons.github.com/ if you think you can find more or better icons in that set.

[bohrj]

@jacoboyen I looked through both sets and they're good, but don't include everything I had in mind. If I were to do custom icons, what size/parameters do you recommend?

[jacoboyen]

Here's an example of the dashicons:

I think some of the icons may be a stretch, but they are the easiest and most workable since they are easily salable to different sizes.

[bohrj]

Fair enough. What is the easiest way to recreate the icons as you have them in the image above? Is that all done with CSS rules, or did you bring them into design software?

[jacoboyen]

I'll wrap up the code on this and deploy it so you can start messing with it.

In WordPress you'll have to switch over to the code view to add the icons. Go to the dashicons site (http://melchoyce.github.io/dashicons/) and click on the icon that you want. It will appear at the top and then you can "Copy the HTML" from the pop up box. Take that code back to WordPress and past it in where you want the icon to appear.

There are some additional styles that will come through when we deploy the plugin as well that will help with alignment. Those will probably need some additional work.

[jacoboyen]

This is deployed and ready to use. Your code block should look like this for each module of the homepage (the second line of this will be the one you want to change for the icons):

<div class="it_block">
<div class="dashicons dashicons-editor-help"></div>
<h3>Help &amp; Training</h3>
<ul>
    <li><a href="/help-desk">Help Desk</a></li>
    <li>Training</li>
    <li>FAQs</li>
</ul>
</div>

You may need to add <div class="clearBoth"></div> after all of your modules if you want to use text lower on the homepage. We may end up having to but it all on a <div> block anyway.

[bohrj]

If I want the dashicon to act as a "button," (in other words, attach a link to it), where would I add that in the code block? I looked around for an answer and found conflicting results.

[GCashMoney]

If you add:

<div class="icon_url">
<a href="http://www.central.edu"><div class="dashicons dashicons-editor-help"></div></a>
</div>

that will make the icon a link. Just make sure to change "http://www.central.edu" to wherever you want it to go. There may be an underline inside the icon, but that is fixed with the "icon_url", your version may not have the style yet.

[bohrj]

Thank you both for the help. Just to make sure, is this what the basic structure of my code blocks should look like?

<div class="it_block">
<div class="icon_url">
<a href="http://departments.central.edu/itservices/new-to-central/"><div class="dashicons dashicons-admin-home"></div></a>
</div>
<h3><a href="http://departments.central.edu/itservices/new-to-central/">New to Central?</a></h3>
insert other code here, blah blah
</div>
<div class="clearBoth"></div>

[GCashMoney]

Yes, that looks right!

On Fri, Jun 20, 2014 at 11:07 AM, Jordan Bohr notifications@github.com wrote:

Thank you both for the help. Just to make sure, is this what the basic structure of my code blocks should look like?

New to Central?

insert other code here, blah blah — Reply to this email directly or view it on GitHub https://github.com/CentralCollege/departments-wordpress-theme/issues/23#issuecomment-46696177 .

[jacoboyen]

@bohrj1 Do you want the layout of your homepage to be 3 icons wide? Or are you going to drop the sidebar menu?

[bohrj]

@jacoboyen If possible, could we keep the sidebar but use it as widget space and make the icon layout 2 wide?