Background image and text color in course header

[pablocanedoq]

Hi, I need some code to change de background image in the course header and another to change de text color in the same area. See the screenshot please: https://prnt.sc/li8pv2 IMPORTANT: I need that the code to work for ALL COURSES LAYOUTS. I need that when I change the layout in the customizer, the style changes in the header of the courses remain visible and working correctly. Thanks in advance.

[pablocanedoq]

also a code to change the background color of the header, IN GENERAL (not only for course header). In summary, I need code to:

1. Change text color in course header (text from: categories, students, reviews).

2. Change course header background image (change to another image or solid color).

3. Change header background color for the whole site in general.

https://prnt.sc/li8pv2 That the changes you make through these codes are maintained, even if you change layouts or skin in the customizer. Thank you.

[logan]

hey, for Issue 1 & 2, Please goto wp-admin > appearance > customize > custom css > paste this code in the editor. .single.single-course section#title .course_header div#item-header-content ul.breadcrumbs li a, .single.single-course section#title .course_header div#item-header-content{color: #ff000e !important;} Refer: http://prntscr.com/limiz3 #ffoooe is hex color value. change accordingly. Issue 3: **To change the header styles you need to select the transparent header style first. goto wp-admin -> Appearance -> Customize -> Header -> Header style -> transparent. Now you'll get an option in the courses to choose the title background image, so you can add different background images for different courses. 1) Goto wp-admin-> lms -> all courses -> edit course > title background image > set the image. Refer: https://prnt.sc/k1jith 2)Please goto wp-admin-> wplms-> header-> upload title background image, and it will change default title background image on your all pages. Refer: http://prntscr.com/ldfa9c hope this helps

[pablocanedoq]

Thank you! It helps a lot, but I need to change the slash and, independently, change the name of the instructor. See the image please: https://prnt.sc/lj5fo6 I also have one more problem in this same area (course header): The "Reviews" and "Students" sections are superimposed. I need a code that allows me to do two things:

1. Expand the space between both sections.

2. Vary the text size when necessary, independently for both sections.

Please, see the image: https://prnt.sc/lj4nmf NOTE: It is important that the code applies to all layouts and skins, and that it does not affect the responsiveness (which fits and looks good on all devices). Thanks in advance!

[Diana]

@pablocanedoq We don't have your site URL. Can you please share your site URL so I can share the fix

[pablocanedoq]

Dear Diana, Why do you answer me with a question? A lot of time is lost. I think the message is very clear and I have passed 2 screenshots to illustrate these issues. The other guy passed me the codes without asking me for the URL. I have no problem in passing all the data, but do not waste time please: https://www.edukably.com https://www.edukably.com/course/software-training/ My site has a "Coming Soon Page" (plugin) activated, so that the page is not visible to the public. Do I need to deactivate this mode so you can see the site? I await your response as soon as possible. Thank you.

[Diana]

@pablocanedoq The above fix given by @logan is actually a direct fix so he shared the custom css with you. But in the next reply of yours this is something which is different than my test setup. That's why I asked for the site URL. I don't want to waste your time. But if I will share the custom code to fix the issue according to my setup then it will not work. This will waste your time more. Refer: http://prntscr.com/lkd4y0 This is how it actually looks on my setup. The custom css for breadcrumbs #title.light h1, #title.light h5, #title.light a:not(.button), #title.light, #title.light #item-admins h3, #item-header.light #item-header-content .breadcrumbs li+li:before, #item-header.light #item-admins h3, #item-header.light #item-admins h5, #item-header.light #item-admins h3 a, #item-header.light #item-admins h5 a, #title.light .breadcrumbs li+li:before, .group_header.light div#item-header-content, .group_header.light #item-header-content h3 a, .bbpress.light .bbp-breadcrumb .bbp-breadcrumb-sep:after, #item-header.light #item-header-content a, #item-header.light #item-header-content{ color: #fff;}  

[pablocanedoq]

This reply has been marked as private.

[Ava]

Hi pablocanedoq Issues : Color of the slash and the separation between reviews and student section. Change the color of instructor name. Please paste this custom CSS  code to WP Admin – Appearance – customize - custom css - publish #item-header-content .breadcrumbs li+li:before { color: #000 !important; } #item-header-content #item-admins h5, #item-admins h5 a { color: inherit; } #item-header-content .single-course #item-meta { grid-template-columns: 80px 185px 1fr; }  

[EdgarKho]

Hello, I want to change the picture in the home page of demo 10. I don't have any experience with CSS / HTML although I understand fairly how it works... So how can I Change the picture of the home page in demo 10 (3 girls laughing) ? Moreover, When I scroll down on demo 10, the menu is following me with WPLMS huge Logo. I want to change the WPLMS logo for mine in the following menu on demo 10. Thank you so much for your answer ! Keep the great work.

[Diana]

@EdgarKho, Please do not post on others topic. @logan Already replied on your topic: https://wplms.io/support/forums/topic/demo-10-customizing-issues/

[pablocanedoq]

Hi @Ava Thanks for the code. Everything has worked, except the issue of the separation between "Reviews" and "Students" I will explain it again in the following screenshot: https://prnt.sc/lkos8i Here, too, a clue as to what needs to be changed: https://prnt.sc/lkosps I await your comments. Thanks in advance.

[Ava]

Hi Please add the custom Css code to WP Admin – Appearance – customize - custom css - publish   .single-course #item-meta { grid-template-columns: 80px 165px 1fr; } @media screen and (max-width: 375px){ .single-course #item-meta { display:block; } .single-course #item-meta .students{ padding-bottom:10px; } .single-course .course-star-rating { display: block; } }  

[pablocanedoq]

I'm sorry, it does't work. It doesn't change anything. Could you check it, please? Thank you.

[pablocanedoq]

I see that @Diana just made a modification. Now it works perfectly. Thank you so much @Eva and @Diana!

[Author]

Posts