Refining the Virtually Connecting Site

The small project started by Maha Bali and Rebecca Hogue is growing as more people get involved with bridging educational conferences with people who cannot attend in person.

We have an active Slack (funny words together), and plans in motion for at least 5 upcoming conferences. Heck, there might be a manifesto too. Woot! We had a great round of ideas and prototypes leading to the creation of a new logo created by Capitol University team Autumm Caines and student Esra Malkoc:

We were working with standard globe time imagery until this idea emerged to bring in the faces, and a play on the negative space concept shown in Rubin’s vase.

Rebecca asked if I could get the logo and colors changed on the web site. The site uses the MH Magazine Lite theme the colors of the menus, borders, links are all red. This should be easy, it’s usually setting in the Customizer. Nope, the only option is to change the background color:

So we have to go in manual. I copied the CSS from the theme to find every line that hard coded the red color (#e64946). Fortunately the theme has a custom CSS editor, so I could just mod all those classes to use the teal color (#50bab8) in the new logo, e.g.

.main-nav {
  border-bottom: 5px solid #50bab8;
}

It took a bit longer because I missed 5 of them the first time.

Not the greatest theme design to hard code colors. Cough.

Next was looking at the header- the way it was before put the site title and tagline as text:

Inspecting the element in Chrome, I could see the area for the header was 980px x 100px (for some reason the theme wants to put just a 300px x 100px there, leaving tons of white space.

I asked Esra to create a new version where the text was big next to the logo, and she did that like within hours of asking. It still left white space on the side, so I thought about using photos of people from our events. but rather than the square box of photos, I thought it look good to crop out the background. Then, if we had a few, we could have the built in featured image of wordpress set to show a random one on each load.

This I put together these, some what I could to get the people look like they were jumping out of the bottom of the frame.

It’s a bit tricky getting the right kind of picture- it needs to be a wide one of people (the hangout screenshots are not wide enough), and many have people truncated in the picture frame.

In the WordPress Customizer, part of every theme now, and directly pinned to the admin bar, you can upload the images in the Header Image panel (although it wants to crop each to 300×100, you can manually set the crop to full width.).

Then you simply click the Randomize Uploaded Headers button at the bottom of your stack.

This has been built into WordPress since like the TwentyTen theme days.

It was not quite right, since the CSS puts white space padding around the div that holds the logo:

This is where learning to use the Chrome (also in other browsers with development tools turned on) feature to Inspect Element. I do this a ton these days to adjust CSS. It’s easier to try changes in the inspector then editing CSS, uploading, and reloading. The theme’s CSS has padding (actually redundant double padding?):

.logo-wrap { 
   padding: 10px; padding: 0.625rem; overflow: hidden; 
}

I can diffle in the inspector to test out what happens with an override, just insert a new class for

.logo-wrap {padding:0;}

and boom. So I add that to the theme’s Custom CSS, and we have the logo nicely tucked on top of the site.

Hopefully at future events, those in person can try to get more shots like this one that is our favorite, Maha, Rebecca, and Double Martins (Weller and Hawksey) at ALT-C.

Then we can add more to the site

This was a fun bit of tweaking w/o doing any theme hacking.

---

Top / Featured Image Credits. Made by my MacBook Pro- screenshot of http://virtuallyconnecting.org/