Seventh-Day Adventist Church

netAdventist web site management software

Menu

Change Theme Header Image

 Change Theme Header Image 

You can download the existing header of netAdventist theme, modify it and upload it back to your netAdventist website. Be sure to rename the title in about.yml (see step C) before you upload it back to your site.

Simple Theme (Most Cases):

A)  Download existing header and modify it.  Watch the screencast or follow the directions below:

  1. Right-click header area of netAdventist site you want to change

  2. Select "View Background Image"

  3. Right-click image that is displayed and select "Save Image As" (save on desktop)

  4. Modify image with your favorite image editor (Photoshop) (Make sure image keeps same aspect ratio: width & height)

Ba) Put image in your custom theme directory

  1. Login to the dashboard of the netAdventist site you want to change

  2. Navigate to  "Settings" > "Themes and templates" > click on "Download Theme"

  3. Save theme to desktop and unzip

  4. Navigate the theme directory to "public" > "assets" > "images"

  5. Your newly modified header that was created in Step A should now overwrite the same image filename found in the theme's images directory

Bb) (Advanced Function) Adding Animated code to header in theme. (Note: This function requires advanced graphics software to complete and the program must be able to open .liquid files. Also, you will need a .swf video file to the the animation to run.)

  1. Login to the dashboard of the netAdventist site you want to change

  2. Navigate to  "Settings" > "Themes and templates" > click on "Download Theme"

  3. Save theme to desktop and unzip

  4. Navigate the theme directory to "Layouts”

  5. Add code to the Layouts .liquid file for each template you what the animation to run on and Save.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="928" height="132" id="mymoviename">

    <param name="movie" value="header.swf" />

    <param name="quality" value="high" />

    <embed src="https://www.netadventist.org//{{ 'header.swf' | theme_image_path }}" alt alt quality="high" bgcolor="#ffffff" width="928" height="132" name="banner" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

    </object>

  1. Adjust the code to your parameters

  2. Change your .swf video file name to “header.swf” and insert it in “public” > “assets” > “images”

C) Rename theme Title

  1. Open file: about.yml

  2. Find the line: "title: [theme title here]"

  3. Rename the line  "title: My Custom Theme Title Here"

  4. Do the same for the description line if there is one.

D) Rename theme file

  1. Find the unzipped theme folder found in step B3

  2. rename this file to match the title in step C3 (Make sure not to use spaces.  Use only letters and numbers and underscores)

E) Zip and upload theme to dashboard

  1. Find newly renamed theme folder and zip it up.  (PC: right click > send to > compressed zip folder | MAC: right click > create archive)

  2. Log in to the dashboard of the site

  3. Navigate to "Settings" > "Themes and templates" > click on "Change Theme"

  4. Click on "Upload" tab, select theme and click on "Upload"

  5. It will say "theme has been successfully uploaded"  Click on "Available themes"

  6. Click on newly uploaded theme and then click on "Choose as theme"

F) To quickly view your site, click on "View site" at top right of dashboard.

Adding Animated code to your header in your Theme

  1. Login to the dashboard of the netAdventist site you want to change

  2. Navigate to  "Settings" > "Themes and templates" > click on "Download Theme"

  3. Save theme to desktop and unzip

  4. Navigate the theme directory to "Layouts”

  5. Your newly modified header that was created in Step A should now overwrite the same image filename found in the theme's images directory