Layout


 






Edit Banners and Logos for a Theme

Who can use this feature?

System_Admin.png

 

Overview 

This article will show you how to change Banner and/or Logo options in a theme.

Important Note

  • The banner images are pulled from a unique location (Banner Images folder). Therefore, they are not located in the Image Repository. You will need to upload banner images here.

Instructions

  1. Navigate to the Homepage
    homepage.png
  2. Turn on Live Edit
    live_edit_on.png
  3. Select the Layout tab
    layout_tab.png
  4. Select Edit Banners for this Theme
    edit_banners_for_this_theme.png

    • Note: If the Edit Banners for this Theme button is not present, please contact Support.
  5. Select the background image that appears
    select_bannar.png
    • Note: To edit Logo options, click on the desired Logo.
      Edit_Logo.png
  6. A small window will appear with your banner/logo options to modify the existing images
    banner_options.png
    • Banner OptionsChoose the theme that you would like to edit the banners for
    • Name: Name the banner
    • Default: Will allow the banner to be the default for this theme
    • Mode
      • Static: Will keep the single image visible
        static_banner.png
        • Scale to fit: Will scale images to fit the banner
        • Image Alignment: Allows you to choose the alignment
          • Note: This is not available if the Scale to Fit option is chosen.
        • Scroll: Will allow the image to scroll with the site content
      • Refreshing: Will filter through the images upon page refresh
        refreshing_banner.png
        • Scale to fit: Will scale images to fit the banner
        • Image Alignment: Allows you to choose the alignment
          • Note: This is not available if the Scale to Fit option is chosen.
        • Scroll: Will allow the image to scroll with the site content
        • Show Slideshow Controls: Allows you to show controls for the slideshow
      • Slideshow: Will show the active images through a slideshow
        slideshow_banner.png
        • Slideshow Slide Timing: Allows you to set the number of seconds each slide shows
        • Slideshow Transition: Allows you to choose the type of transition between images
        • Scale to fit: Will scale images to fit the banner
        • Image Alignment: Allows you to choose the alignment
          • Note: This is not available if the Scale to Fit option is chosen.
        • Scroll: Will allow the image to scroll with the site content
        • Show Slideshow Controls: Allows you to show controls for the slideshow
        • Control Color: Allows you to choose the controls shade for visibility
      • Video: Allows you to upload a video
        video_banner.png
        • Note: Video Banners must be enabled by Support. Contact Us to turn this feature on.
        • Video Source: Allows you to upload or link to the video
          • Note: Links to videos must be a link to the raw video file. So for example, you can upload a video to the Document Center and copy then paste the link to that Document into the Link field. That will work (except in Internet Explorer) because the link goes to the file, not to a page where the video is being rendered. Other file-hosting places may work as well. Just ensure that the link points directly to the video file, and not to a page that renders the video.
          • Note: For file size restrictions, please visit our File Size Limit for Uploads article.
        • Mute Sound: Allows you to mute the video sound
      • Select X to navigate away from the options box
        x_to_close_options_box.png
      • Select Save Theme
        save_theme.png
  7. Add and/or delete images from the banner/logo
    Add_Delete_Banner_Options.png
    • Note: The Preview option will be unavailable for Slideshow and Video modes. You can still view the active slideshow and video in the background, without having to save your theme.
  8. Click Save Theme at the top of the page to save any banner options changes
    save_theme.png



I'd Like to Request an Enhancement

0 out of 1 found this helpful

Updated:
Follow

Article Feedback

  • Avatar
    Chelsey McGhee

    What type of links are compatible? I'm trying to link a YouTube video and it says it cannot verify the link. Can you provide acceptable links?

  • Avatar
    Jackson Wright

    Hi Chelsey,

    The video link must link to the raw video file. So for example, you can upload a video to the Document Center (https://www.civicengage.civicplus.help/hc/en-us/articles/115004761634-Add-a-Document-to-My-Site) and copy then paste the link (https://www.civicengage.civicplus.help/hc/en-us/articles/115004761814-Copy-a-Document-Link) to that Document into the Link field. That will work (except in Internet Explorer) because the link goes to the file, not to a page where the video is being rendered.

    Other file-hosting places may work as well. Just ensure that the link points directly to the video file, and not to a page that renders the video.

    Thank you,
    Your Help Center Team

  • Avatar
    Genevieve Tollaksen

    Why is "Preview" always greyed out? I want to see how my image looks as a banner before I publish it.

  • Avatar
    Jackson Wright

    Hi Genevieve,

    The "Preview" button is greyed out in Slideshow mode due to the rotating nature of the Slideshow. If you wait a little bit, you should still be able to view how the images display in the background, without having to Save. The "Preview" button will work, and will not be greyed out, for the Static and Refreshing modes.

    Hope that helps!

    Thank you,
    Your Help Center Team