Can I add an image or color to the top of the page in Rise?

I'm not sure how to do it inside of Rise but I have seen it done before here: https://slidesugar-dogcarebasics.s3-us-west-1.amazonaws.com/content/index.html#/?_k=avs3q2

That's good - Thanks Nisha!  Does anyone out here know how to do this??

Hi Alicia - Through the Settings of your course you can add a Cover Photo. It looks like for the link above they uploaded the dogs with a blue background as a .gif file. I've attached images of how to get to the Cover Photo option. Hope this is what you were looking for!

Thanks Emily!  I was hoping to find a way to add images to the top of each section throughout my presentation.  Right now, it's just the title with a white background.  I would like to add color or an image to the top of each of the sections,

It seems like others have done it, but I can't figure out how.   Anybody have any recommendations??

In the dog example, it looks like they "hid" the title section and uploaded an image block to represent the title instead. I'd love to know how this was done too!

Hi Alicia and Tonya,

I tracked down this user example and here's what Sarah had to share about it:

I found this video on YouTube showing how to remove the lesson headers. I used a different text editor tool, but the process is the same. https://www.youtube.com/watch?v=wFRc7q7_Dxc

Here is the example and the conversation.

Hope that helps :)

Any idea, when the top page header customization will be added to Rise. This is long requested feature pending. otherwise at least this should be removed.

Hi SibaPrasad,

Thanks for reaching out! Can you tell me a little more about what exactly you're wanting to customize? You can already customize the header image or background color.

Let me know and we'll go from there! :)

This is only applied to course heading page not the lesson page.

Can this be updated soon.

Best regards,
Siba

This e-mail may contain trade secrets or privileged, undisclosed, or otherwise confidential information. If you have
received this e-mail in error, you are hereby notified that any review, copying, or distribution of it is strictly prohibited.
Please inform us immediately and destroy the original transmittal. Thank you for your cooperation.

Hi SibaPrasad,

I believe I responded to that request over here. Let me know if you have any other questions. :)

Hi all,

Thanks for the great leads on the lesson header. I would like to add that  this is an issue that is not just plaguing developers, but  the learner experience. 

Some of the big bugbears for learners about Rise based courses:

- Why am I scrolling through half a web page that is just the lesson title? 

- Why does one Rise course look exactly like the other? Did I just complete Compliance 1 or Compliance 2? 

I have heard this feedback so often when I put out Rise based courses. 

Better customisation and developer control for lesson headers should really be  the Articulate development team's top agenda item. 

Regards

Mala 

We really appreciate you sharing that learner feedback, Mala! We'll keep these ideas in mind as we plan for new features and enhancements in the future. 

Has this feature been added yet?

Thanks for your interest in this feature. This isn't in our roadmap right now but we'll update this thread once we make changes that will help!

Not sure if anyone is still after the fix?

I was able to accomplish this by adding to my main CSS file to the .page_header element

note: the name of my image is called BannerEDfaded

pop the image in the same folder as the css file. 

.page__header{ background:url('BannerEDfaded.png');

zip it back up and you're ready to go! :) 

Thanks for sharing this workaround, Becky!

Could you please share a sample css file. I am not quite sure where to include the page header element. In fact, there are multiple page headers. Please refer to the attached css file. Thanks! 

Does this work for SCORM packages as well? 

Hope this helps... Search your document for "page__header" you insert your code in the first result.

.page__header {
background: url('BannerEDfaded.png');
padding-top: 5rem;
position: relative;
z-index: 2;
}