Arena Responsive Page Log

Does anyone have the steps to place a church .jpg or .png logo over the "organizational name" on the home page of the Responsive webpage.  It would be greatly appreciated.  We are giving our leaders access to the Small Group Leader toolbox as we launch about 50 new groups and our Pastors want to see the new logo on the page.

Thanks,

Lisa

  • Lisa,
    The only real solution for that is to rely on an Advanced HTML module to
    1. Display the image
    2. hide the header text to remove the organization name.

    You would use jquery to hide the header element.

    You would add the module to the template so that it would display on each page.

  • As Martin said, you use the Advanced HTML module on the Template, Members Responsive, under the Main Content. Here is our script that does that and updates all the colors to match our colors. I am glad to work with you to accomplish your goals. You will have to edit this to point to your site as well as add your own image. A detail to remember on the Advanced HTML module is to set Enable Editing to false. You do not want to edit from the website side as that will destroy the script. 

    Here is my script as it is on our Members Responsive template:

    <script>
    $(document).ready( function() {
    // Hides the organization name
    $("span[id$=_orgName]").hide();

    // Sets the main page ID for reference
    var frm = document.getElementById("frmMain");

    // Creates the new <a> tag
    var anchor = document.createElement("A");

    // Creates the id name for the new <a> tag
    anchor.setAttribute("id", "fargoHope");

    // Identifies the placement for the <a> tag
    frm.getElementsByClassName("container")[0].prepend(anchor);

    // The <a> tag ID name and redirect page url
    document.getElementById('fargoHope').href = "">https://www.fargohope.org";

    // Creates the space for the logo image
    var logo = document.createElement("IMG");

    // Creates the alternate description for the image
    logo.setAttribute("alt", "FargoHope");

    // Adds the correct image url or location
    logo.setAttribute("src", "">www.fargohope.org/.../Hope-Logo-White-png600px.png");

    // Sets the image height
    logo.setAttribute("height", "80px");
    logo.setAttribute("class", "responsive");

    // Identifies the <a> tag to attach the logo
    document.getElementById('fargoHope').append(logo);
    })
    </script>

    <style>
    /*Hide org name*/
    #ctl05_orgName {
    display: none;
    }

    /*Font color for page body*/
    #arenaBody {
    color: #2d2f36;
    }

    .header {
    background: #e51937;
    padding: 1.0rem 0;
    }

    .responsive {
    width: 100%;
    max-width: 250px;
    height: auto;
    }

    #fargoHope > img {
    display: block;
    margin: 0 auto;
    position: relative;
    bottom: -10px;
    }

    .navbar-default {
    background: rgba(77,79,92,.04);
    border-left: #e7e7e7;
    border-right: #e7e7e7;
    border-top: 0px solid #fcb334;
    }

    /*Font color for header navigation*/
    #frmMain nav div div div.navbar-header a {
    color: #2d2f36;
    }

    /*Font color for buttons*/
    #main-nav div ul li a {
    color: #2d2f36;
    }

    .btn-primary {
    background-color: #e51937;
    border-color: #e51937;
    }

    .btn-primary:hover {
    background-color: #fcb334;
    border-color: #fcb334;
    }

    .btn-primary:active {
    background-color: #4d4f5c;
    border-color: #e7e7e7;
    }

    .btn-primary:focus {
    background-color: #4d4f5c;
    border-color: #e7e7e7;
    }

    .footer {
    background: rgba(77,79,92,.9);
    border-bottom: 1.5px solid #e51937;
    color: #ffffff;
    }
    </style>

  • A detail to remember on the Advanced HTML module is to set Enable Editing to false. You do not want to edit from the website side as that will destroy the script.

    and if you do that, you'll need to set your Pages page to Validate Request = No, or your page editor will squawk and say "dangerous input detected" when you edit HTML with the Page page...

    Would someone confirm that this is correct?

More Content