Project

General

Profile

Support #10657

child theme problems

Added by Marilyn Weber 8 months ago. Updated 8 months ago.

Status:
Reporter Feedback
Priority name:
Normal
Assignee:
-
Category name:
-
Target version:
Start date:
2018-11-03
Due date:
% Done:

0%

Estimated time:

Description

Alison Slon, Adjunct Assistant Professor of Media Arts and Technology at BMCC, has written to Zendesk with the following questions:

I am working with Gina Cherry and Jean Amaral to build out the BMCC OER website on the Creative Commons platform:
https://bmccoer.commons.gc.cuny.edu/
We are almost ready to launch this site (Nov. 15 is our goal) and I would really appreciate your help in clearing up a few issues I'm having before we do.

The Wordpress theme is customizr.
The main problem is that I am unable to attach a child theme and so all my CSS is in the Simple CSS file. For most things i need this is working ok but for other design changes I try - and that look ok in Chrome/ devTools - just do not work.

Here are issues I am trying to solve:

Mobile Nav - (see attached pdf of snapshots)

The logo is a graphic image. In mobile layout it is too small to read.

IN Chrome/ DeveloperTools:

set width of screen to mobile 425x

Nav bar css:

.mobile-navbar__wrapper .navbar-brand-sitelogo img {

  • max-height: 36px!important;
  • transition: all .35s ease-in-out;

}

Changed 36px to 70px

Logo resized ok - but when copy CSS into Simple CSS in customizr theme it does not work.

More CSS Issues

Simple CSS in the theme Customizr will not change styles that are clearly changeable in Chrome Dev/Tools:

Remove copyright statement in footer

.footer__credits {

color: #777;

vertical-align: middle;

display: none; /*this works in Chrome DevTools*/

line-height: 1.6em;

Other non-CSS issues:

Embed Video from Vimeo into Post

Unable to embed video into a post.

https://bmccoer.commons.gc.cuny.edu/oer-resources/oer-resources/

SEE:

Why Education Matters

I tried to use the embedly plugin but it would not allow me to sign in without a subscription.

I’ve never had any issues with using a simple embed link from Vimeo or YouTube into the html of a Wordpress post before.

Google search SEO

Would like advice on how to improve this.

Remove Commons bar at top

Can we request this?

Archive Category page

https://bmccoer.commons.gc.cuny.edu/category/academic-subjects/

We'd like to insert headers into this category page to separate the four sub-categories:

Humanities, Social Sciences, STEM, Professional Studies.

I've included a sidebar and a dropdown on the main menu but we'd like to know if it's possible to break a category page into sections with headers.

I believe this would have to be done in the php file - which I don't have access to.

Thank you in advance for any help or advice you can give. I've tried to solve these on my own - but without access to php files and a child theme with a true Appearance/Editor - I'm stuck, or maybe I just can't figure it out.

Screenshot_2018-11-05_12-58-36.png (18.7 KB) Screenshot_2018-11-05_12-58-36.png Boone Gorges, 2018-11-05 02:22 PM

History

#1 Updated by Boone Gorges 8 months ago

Thanks, Marilyn. Some responses below. Please let Alison know that she's welcome to participate directly here on Redmine if she'd like; Matt or I would need to create an account first.

The CSS problems are due to some syntax errors in the CSS. The block of CSS entered at https://bmccoer.commons.gc.cuny.edu/wp-admin/themes.php?page=simple-css was missing a close bracket (at the end of the .gfield_radio block). And the syntax for media queries was incorrect. Instead of:

@media (min-width: 576px)
.tc-singular-thumbnail-wrapper .entry-media__wrapper {
    max-height: 40px;
    height: 20px;
}

you must wrap the entire media query in brackets:

@media (min-width: 576px) {
    .tc-singular-thumbnail-wrapper .entry-media__wrapper {
        max-height: 40px;
        height: 20px;
    }
}

I might have chosen the scope of these queries incorrectly, so Alison should go back and check again. (Indentation helps to visualize.)

In addition, the max-height declaration for the logo wasn't working because the stylesheet's declaration used !important; the only way to override is to use !important as well.

In all these cases, the invalid CSS caused the browser to ignore inline CSS after the syntax error. This is unfortunately how browsers handle CSS, and there's no easy workaround for it. The syntax highlighter in the Simple CSS panel should give you a sense of when something is amiss. When in doubt, you may want to leverage a third-party CSS linter like http://csslint.net/

Regarding the Vimeo videos: I assume the problem here is that you're trying to use the embed code from Vimeo, which we don't allow for security reasons. Instead, you can simply put the Vimeo URL on its own line in the post content, and WordPress will automatically embed. See screenshot.

Remove Commons bar at top

We generally encourage against this - removing it reduces the network effects of hosting your site on the Commons - but if you must get rid of it, you can do it with CSS.

We'd like to insert headers into this category page to separate the four sub-categories:

Yes, it appears that likely isn't possible using the current markup structure. We do offer support for custom child themes on the Commons, with the warning that we only suggest it in cases where the office/organization will have ongoing resources to support the theme. See the 'Custom themes and plugins' section of https://dev.commons.gc.cuny.edu/hosting-partner-handbook/ for more details.

Google search SEO

We offer the popular WordPress SEO (Yoast) plugin on the Commons. It has many features that help you to improve your search engine placement. Have a look at https://help.commons.gc.cuny.edu/yoast-wordpress-seo/ for some tips on getting started.

#2 Updated by Marilyn Weber 8 months ago

She would like to be added to Redmine. I let Matt know on the ZD ticket, and here's her contact info in case you'd like it:

#3 Updated by Boone Gorges 8 months ago

Thanks, Marilyn. I've created her account and added her as a watcher here.

Also available in: Atom PDF