Forum Discussion
Can I add an image or color to the top of the page in Rise?
Does anyone know if it is possible to add an image or change the color of the top section of Rise where it shows the section title?
- EmilyHacklCommunity Member
- NishaMakanCommunity Member
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
- AliciaMylesCommunity Member
That's good - Thanks Nisha! Does anyone out here know how to do this??
- MalaSrinivasanCommunity Member
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
- AliciaMylesCommunity Member
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??
- TonyaSmith1Community Member
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 :)
- MichelleLeve047Community Member
Does this work for SCORM packages as well?
- SibaPrasadPadhiCommunity Member
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! :)
- SibaPrasadPadhiCommunity Member
This is only applied to course heading page not the lesson page.
Can this be updated soon.
Best regards,
SibaThis 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.
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.
- HowiePearsonCommunity Member
Has this feature been added yet?
- BeckyRichardsCommunity Member
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! :)
- hazelBStaff
Thanks for sharing this workaround, Becky!
- NagaSudheerS907Community Member
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!
- BeckyRichardsCommunity Member
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;
}