Header Image Course Page

[bam3473]

Interested in adding a header image to the Full screen course status page template.  Here's what I would like to do.  When an instructor creates a course, they choose a main course image to represent the course.  That image shows up in search results, on the course description page, and other places. When a student STARTS a course, and they transition to the full-page Course Status Template based course work, with the units and quizzes, they no longer see the main course image.  In the top left corner, there is the title of the course, and a flat color background.  I would like to make that flat color background into the main course image, with a box shadow on top of it because we are using light color text, and if there is no box shadow, students may have difficulty reading the text.  This is an example of the CSS we could use to achieve our goal.  We'd like each course to automatically pull the main course image, and add it to the background of the top left header area of the full page Course Status page template based courses, with the menu on the left.  How can we do this?  Can we add something to customizer?  Is there an option for this in the panel somewhere?

 .course_action_points {

background: #000000;
background-image: url(http://themes.vibethemes.com/wplms/skins/demo7/wp-content/uploads/2014/02/c8.jpg);  ****This needs to be the main course image****
/* background-color: white; */
background-size: cover;
box-shadow: inset 0 0 0 2000px #000000c4;
}

[Anshuman Sahu]

Hi, Please paste your css code in wp-admin>apperance>customizer>custom css    and check your aim is achieved or not. share your site url if problem is not resolves.  

[bam3473]

This reply has been marked as private.

[Diana]

This reply has been marked as private.

[bam3473]

This reply has been marked as private.

[bam3473]

https://wpbeaches.com/add-background-image-widget-customizer-wordpress/   https://wordpress.stackexchange.com/questions/127850/wp-filter-to-alter-admin-css-styles   Seem to be two places that have almost solved this issue.  They are using a CSS hook to insert code related to a background image.  My issue is, I need to identify course pages specific to a singular course via CSS, and I need to find out how to grab the main course image via PHP or some function to insert it into the WP hook.

[Diana]

@bam3473, There is a hook bp_before_course_header which you can find in wplms > course > course_header.php.  This hook display before the course header.

[bam3473]

Perfect!  Thats a step in the right direction!  Thank you.  But now, how do I reliably identify the main course image, so I can insert that into the background area?  Is there a way to "grab" that image?  Any code snippets I can get that will help me find that image so I can insert it?

[Diana]

@bam3473, I don't understand why do you want to insert the image in background through hooks when that option is already available in WPLMS. When you edit your course there is a option present to set title background image where you can upload image which will set as background image of your course and you can set different background image for different courses which will be visible on single course page. You can also set that main course image as a title background image through this option.

[indiamahesh]

Hello, I am trying to create a new course on my site and the background image repeated twice one at the header and another at the beginning of course description. Can you let me know how to fix it? https://prnt.sc/mkx42m

[logan]

Hello, Welcome to WPLMS forums. Please create your own topic , it is considered impolite when you start replying on other's support topic. if we need to check site we can ask you credentials. if i ask you credentials on someone's topic and if you share your credentials , they will get an email with your credentials. it is not good for security reason. Thanks

[Author]

Posts