CoursePro pages and shortcodes not styling properly

This was a previous ticket that seems to have gotten ignored. Really need it fixed so created a new ticket.

All pages and shortcode renderings of CoursePro are not being styled correctly. The spacing and layout are smashed together and misaligned.

I have already tried disabling all plugins and created pages with shortcodes, tried using default settings - tried various settings to see if it would fix... no luck.

Best,
Aaron

Can you help?

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hi there, Aaron!

    CoursePress and Upfront take a little work to make them work together. Here's some CSS which should help out.

    For your Course List page:

    //align title and sign-up button correctly
    h3.course-title.course.title {
    padding-top: 10%;
    }
    
    //give lines some breathing room
    .course-list {
    line-height: 1.9em;
    }

    For the cart page:

    //a little space around cart items
    #mp_cart_form {
    line-height: 1.9em;
    }
    
    //push button into place
    .mp_cart_direct_checkout {
    padding-top: 5%;
    padding-bottom: 4%;
    }

    You'll need to add this to the custom CSS tool in the upfront editor, chose the option to edit CSS and Anchor properties in the edit box that appears when you click the green gear attached to each element.

    Hope this helps! I'll close your other thread, since we're working here now.

  • Aaron
    • Site Builder, Child of Zeus

    Hello,

    Thanks for the CSS styling. ... But I could not get it to stick anywhere except on the main Theme settings under custome css rules. The other sections that I created with shortcodes will not save or alow edits in for custom CSS style.

    The Enroll page that has the emrollment proccess shortcodes shows the content on UpFront instead of just the shortcode.... this one says no elements are avaialble in the edit css box. The others that have the shortcode offer a text element and paragraph element. Neither will let any CSS changes or a new css style to be saved. ???

    Style still not fixed.

  • Predrag Dubajic
    • Support

    Hi Aaron,

    To followup on your new thread here:
    https://premium.wpmudev.org/forums/topic/coursepro-pages-not-styling-properly-or-accepting-css-changes

    Shortcodes will not show html structure in upfront editor as it is not HTML or CSS added by Upfront itself, but rather related to plugin.

    Would you mind allowing support access so we can check why the CSS changes are not being applied to that specific page?
    Also, could you please provide link to page in question.
    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Predrag

  • Aaron
    • Site Builder, Child of Zeus

    Hello,

    I have granted access. The page URL's in question are:

    http://fremontmakerspace.com/classes-and-events/

    <a target="_blank" href="http://fremontmakerspace.com/student-settings/
    http://fremontmakerspace.com/student-settings/
    ">http://fremontmakerspace.com/student-settings/

    http://fremontmakerspace.com/account/ (Logged in and Logged Out pages have issues)

    http://fremontmakerspace.com/student-dashboard/

    http://fremontmakerspace.com/enroll/

    http://fremontmakerspace.com/student-login/

    Thanks a lot for the help.

    Aaron

  • Predrag Dubajic
    • Support

    Hi Aaron,

    Thanks for granting access, I have tested your site and it looks like CSS changes are saving normally, I have left an example on your page from first link where I changed the titles to black color and below is the screenshot of how to make changes.

    You need to click on setting for that particular element (little gear icon) and then add new styles where you can paste the code and save it.

    Please try making changes that way and let me know if it's working for you.

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Could you check if it's caching issue, open incognito window by hitting CMD+SHIFT+N on Mac or CTRL+SHIFT+N on Windows and see if it's working then.

    Also, one more thing when adding CSS changes this way, there is Save button in bottom right corner which you need to click and save changes before clicking Save in sidebar settings.

    Best regards,
    Predrag

  • Aaron
    • Site Builder, Child of Zeus

    Hello,

    I got it to take the CSS and was able to make a few smal changes. However the biggest issues are still present.

    1. The title of the classes is lining up with the button from the previous class.
    2. The course list does not show a separating line for the first class in the list
    3. The buttons are not styled

    THe other pages mentioned in my previous post are still looking bad too. Is there any way to get the theme styling to apply so everything matches?

    Best,
    Aaron

  • Aaron
    • Site Builder, Child of Zeus

    Hello,

    The shopping cart and the other pages that cannot be edited via Upfront also have styling and spacing issues - but no place to easily edit the CSS as in the other pages I created using the shortcodes.

    Is there a solution to these tyling issues? Greawt plugin - but difficult to style right.

    Best,
    Aaron

  • Aaron
    • Site Builder, Child of Zeus

    I never got a response. For anyone else looking for a solution.

    1. In the code given above there is no closing // for the comments close or omit notes latogether
    2. Here is the coreect CSS modifications to make the style correct. I added my own custom color on the last line. You can change to your own

    .upfront-output-object h3 {
    font-family: Lato, sans-serif;
    font-weight: inherit;
    font-style: inherit;
    font-size: 24px;
    line-height: 2em;
    color: rgba(0,165,113,1);
    }

    Closing this out and hoping for better response in the future.

    Best,
    Aaron

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.