Forum Discussion

AliciaMyles's avatar
AliciaMyles
Community Member
7 years ago

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?

 

  • EmilyHackl's avatar
    EmilyHackl
    Community Member

    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!

    • AliciaMyles's avatar
      AliciaMyles
      Community Member

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

  • 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 

  • AliciaMyles's avatar
    AliciaMyles
    Community 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??

  • TonyaSmith1's avatar
    TonyaSmith1
    Community 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 :)

  • 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.

    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff

      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! :)

      • SibaPrasadPadhi's avatar
        SibaPrasadPadhi
        Community Member

        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.

  • 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. 

    • hazelB's avatar
      hazelB
      Staff

      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!

  • BeckyRichards's avatar
    BeckyRichards
    Community 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! :) 

     

    • hazelB's avatar
      hazelB
      Staff

      Thanks for sharing this workaround, Becky!

    • NagaSudheerS907's avatar
      NagaSudheerS907
      Community 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! 

      • BeckyRichards's avatar
        BeckyRichards
        Community 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;
        }