CUNY Academic Commons

The website seems to be dominated by the header image instead of the actual content. If we could shorten this header image, we could make the main content the focus instead of the revolving image at the top.

In addition to making the header smaller, I am also having problems with the text being cut off mid word with a dash inserted into it. It looks like I can also use a child theme to fix this. Is this something that can be fixed with this plug in? It looks like it may be possible. If not I can research for some more solutions.

Thanks,
Maria Rhodes

Thanks, Boone. Dan, you do you have any time to work on this in the coming week or should we reassign?

Yes absolutely! I wasn't totally clear on where we landed in terms of development and review process though. Should I just work on it locally and share screenshots?

Also - one thing I was wondering is if we might want to try a custom CSS plugin first instead of a whole child theme, since I'd bet we could solve both of these issues without touching the markup itself, just messing with the CSS instead. Are any of those active on the Commons?

Hi Dan,

I am not super familiar with CSS. I thought that using CSS might be better, but I am a little lost. We have the Custom User CSS box that I am sure I should use. Is that the plug-in that you think we should use? I will be available all day today if you have any questions.

Maria

Hi Dan,

As we discussed during our dev call, if you could give a CSS fix a try, I'd appreciate it. Thanks!

Yes!

Maria: if you copy these CSS rules into the custom CSS box, it should both reduce the height of the header image and also change the line-breaking behavior so that you don't get hyphens in the middle of words:

#site-header {
max-height: 150px; /* or whatever you want it to be */
overflow-y: hidden;
}

.entry-content, .entry-summary, .page-content {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-wrap: normal;
}

Note that how this changes the height of the header image means that the bottom of the image, beyond 150px or however low you set it, will be hidden, just showing the top of it which might not have the most important parts of the image. You might want to think about cropping images to the specified height before you upload them, so that they'll look how you expect them too.

Please let me know if you run into any trouble with this!

Thanks, Dan!

Maria -- the Custom CSS menu is under Appearances > Custom CSS

Hi Maria -

I just wanted to check to make sure you were able to add in this bit of CSS, and that everything was working as you'd hoped. Let me know!

Hi Dan --

Thanks so much for this. Maria added the CSS and it is working well.

One quick question -- I'm trying to make the site title ("M.A. Program in Liberal Studies," which appears in blue on the left side of the nav bar) appear white instead of blue. I tried the following CSS, but it did not work. Do you have any suggestions?

h1.site-title {
    color: #FFFFFF;
}

Thanks,

Matt

Looks like a specificity issue - the rule that makes it blue uses the selector ".site-title a". If you make your CSS:

.site-title a {
    color: #FFFFFF;
}

It ought to work. Let me know if it doesn't though!