Project

General

Profile

Feature #5411

Child theme for the MALS program

Added by Matt Gold almost 3 years ago. Updated almost 3 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
WordPress Themes
Target version:
Start date:
2016-04-05
Due date:
% Done:

0%

Estimated time:

Description

Hi Dan,

I'd like to ask for your help in creating a child theme for the MALS program, which has create a site for its alumni - http://malsalumni.commons.gc.cuny.edu/

We would like to shrink the header on this theme a bit, and I think that a child theme might be necessary

I've made Elizabeth Macaulay-Lewis and Maria Rhodes, who are working on this project, watchers on this ticket. Maria and Elizabeth, can you please update this ticket with any more specifics?

Thanks, Dan, in advance for your work on this

History

#1 Updated by Maria Rhodes almost 3 years ago

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

#2 Updated by Boone Gorges almost 3 years ago

  • Target version set to 1.10

Hi all - I'm putting this into the 2.0 milestone just to give it a home, but we can and should deploy it whenever it's ready.

#3 Updated by Matt Gold almost 3 years ago

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

#4 Updated by Daniel Jones almost 3 years ago

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?

#5 Updated by Maria Rhodes almost 3 years ago

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

#6 Updated by Matt Gold almost 3 years ago

Hi Dan,

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

#7 Updated by Daniel Jones almost 3 years ago

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!

#8 Updated by Matt Gold almost 3 years ago

Thanks, Dan!

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

#9 Updated by Daniel Jones almost 3 years ago

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!

#10 Updated by Matt Gold almost 3 years ago

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

#11 Updated by Daniel Jones almost 3 years ago

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!

#12 Updated by Matt Gold almost 3 years ago

  • Status changed from Assigned to Resolved

Aha! That did the trick. Thanks so much, Daniel.

Also available in: Atom PDF