Seeking help with the design

First topic message reminder :

Hi guys,

I have recently created my new forum called Azure Fellows. It is a fully private forum so in the following screen shots, you'll see only login section.

I would like some help with using CSS stylesheet via Admin Panel > Display > Pictures & Colours > Colours > CSS Stylesheet.

So far, I have entered the following lines to ensure that the header bar is white -

.headerbar {background-color: #ffffff}

I had to enter the above line since configuring Header Background Colour under Background Colours via Admin Panel > Display > Pictures & Colours > Colours > Colours only fails to reflect the changes on the actual website.

Now, please consider two images in attachment as I need to be able to edit a few other aspects.

The website appears when you are at the top of the scroll -


The website appears when you scroll to the bottom of the page -


As you can see, I am not happy with the arrangement in regards to
a) the positioning of the navigation bar
b) the footer design including background and text colours
c) scrolling transition that makes the forum logo ('Azure Fellows' with grey dove) disappear right away

After doing some research on this help forum, I still have difficulties finding solutions.

I seek the following reconfigurations -

a) I want the navigation bar to appear below the header bar. Instead of making the navigation bar appear only when you scroll down, I want the navigation bar to appear beforehand and stay fixed whilst scrolling down.
b) I want to change the footer background colour for both parts (darker and lighter grey) to the specific grey colour I desire to achieve (I know the code for the colour) and alter the text and link colours to the desirable colour.
c) I want the forum logo to stay fixed without disappearing right away as soon as you scroll from the top of the page.

I hope to get favourable help,

Thanks

skouliki wrote:yes ! thank you

I'm sincerely grateful for your help so far!

I still am trying to work out how to make the hover colours work plus I've a few more design queries but that will be another topic - for now, I shall let you go.

Thank you so much overall (and to SLGray and Draxion too!)

thanks for the cooperation also

i will leave open the topic if someone can help you change the hover color on navbar icons

skouliki wrote:thanks for the cooperation also

i will leave open the topic if someone can help you change the hover color on navbar icons

Yes, please keep the case open, thx.

Edit:

Hi, I'm having trouble fixing the site description from disappearing the moment one scrolls.

See my CSS below -

Code:


---------
/* Header */
.headerbar {background-color: #ffffff;}
.is-sticky#headerbar-top {background-color: #ffffff; box-shadow: 0 0 0px rgba(0, 0, 0, 0); position: absolute !important;}
.is-sticky #logo {display: initial; opacity: 1;}
#site-desc {
 clear: both;
 text-align: center;
 position: initial;
 top: 50%;
  }
#site-desc p {
 color: #404040;
 font-size: 16px;
 font-weight: 300;
 line-height: 30;
 margin: 0;
  }
.is-sticky #site-desc {
   display: initial;
   opacity: 1;
 }
/* Menu */
.navbar img {-webkit-filter: opacity(.5); drop-shadow(0 0 0 #404040);}
.navbar a {background-color: #ffffff; border-radius: unset;}

----------

I tried to imitate the CSS codes from logo for site description but still I'm hopeless.

Anyone help please?

Edit 2:

I think, I'll remove site description until anyone is ready to help me fix the site description from disappearing on scroll. I don't want to leave it to look horrible and disappear as such otherwise. When anyone is ready, let me know and we'll go from there. I also want to enable hover colour for nav icons.

Bump...

Please check my last post if you're willing to help.

I've temporarily switched to Invision from ModernBB due to some issues with search box appearing above the navbar and site description not showing as desired.

But will revert to ModernBB (I've saved all CSS and Javascripts for the record).

Meanwhile, experimenting on AwesomeBB (beta means it's risky and I'm too weary but I'll give it a go).

Edit: AwesomeBB turns out to be somewhat undesirable interface-wise so I'm resorting to modernBB.

hello

can you enable the description

CSS for each version is different.  Some Invision CSS and JavaScript will not work for ModernBB.

skouliki wrote:hello

can you enable the description

Let me make enable the site description for you to troubleshoot in terms of scrolling issues.

Now can you help me fix it please?

FYI, the CSS and JavaScript Codes are -

(CSS)

Code:


-------------
/* Header */
.headerbar {background-color: #ffffff;}
.is-sticky#headerbar-top {background-color: #ffffff; box-shadow: 0 0 0px rgba(0, 0, 0, 0); position: absolute !important;}
.is-sticky #logo {display: initial; opacity: 1;}
#site-desc {
clear: both;
text-align: center;
position: initial;
top: 50%;
}
#site-desc p {
display: block;
font-size: 16px;
font-weight: 300;
line-height: 30;
margin: 0;
}

/* Menu */
.navbar img {-webkit-filter: opacity(.5); drop-shadow(0 0 0 #404040);}
.navbar a {background-color: #ffffff; border-radius: unset;}
-------------


JavaScript Codes

Code:


-------------
$(document).ready(function() {
 var navbar = $("#headerbar-top > div > ul"),
   navbar_btns = $(".navbar li"),
   header = $(".headerbar");
 navbar.insertAfter(header);
});
-------------


Please put your code in a code tag next time, by the way I can't help if you don't show me a site's URL

SarkZKalie wrote:Please put your code in a code tag next time, by the way I can't help if you don't show me a site's URL

The URL is https://azurefellows.forumotion.com/

It's a completely private forum so you only see login. But scroll down a bit and you'll see my issue with site description - it disappears and I don't want it to disappear but stay.

That script I gave you, replace with this. This will allow the description to stay after someone scrolls.

Code:

$(document).ready(function() {
  var navbar = $("#headerbar-top > div > ul"),
    navbar_btns = $(".navbar li"),
    header = $(".headerbar");
  navbar.insertAfter(header);
  navbar_btns.css("background-color", "#44749e");
  $(window).scroll(function() {
    $(".is-sticky").removeClass("is-sticky");
  });
});

Draxion wrote:That script I gave you, replace with this. This will allow the description to stay after someone scrolls.

Code:

$(document).ready(function() {
  var navbar = $("#headerbar-top > div > ul"),
    navbar_btns = $(".navbar li"),
    header = $(".headerbar");
  navbar.insertAfter(header);
  navbar_btns.css("background-color", "#44749e");
  $(window).scroll(function() {
    $(".is-sticky").removeClass("is-sticky");
  });
});

This doesn't work. The site description still vanishes.

Please copy and paste me your template overall_footer_end.

ACP(Admin Control Panel) > Display > Templates > General > overall_footer_end

Thanks

Draxion wrote:Please copy and paste me your template overall_footer_end.

ACP(Admin Control Panel) > Display > Templates > General > overall_footer_end

Thanks

The script is extremely long. I'll insert in codes and hopefully it doesn't disrupt this help forum's performance.

Code:


<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
   <div>
        <ul>
            <li>
<!-- END html_validation -->
            </li>
        </ul>
        <!-- BEGIN switch_footer_links -->
      <ul class="footerbar-user">
         <li><i class="ion-clock"></i>{CURRENT_TIME}</li>
            <!-- BEGIN footer_link -->
            <li class="rightside">
               <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">
                  {switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}
               </a>
            </li>
            <!-- END footer_link -->
        </ul>
        <!-- END switch_footer_links -->
    </div>
   <div class="copyright">
      <div class="wrap">
         <div class="copyright-body">
            {ADMIN_LINK}
            </div>
        </div>
    </div>
</div>
{PROTECT_FOOTER}

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   $(window).scroll(function() {
      var header_top = $('#headerbar-top');

      if (header_top.hasClass('w-toolbar')) {
         if ($(window).scrollTop() >= 42) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      } else {
         if ($(window).scrollTop() >= 1) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      }
   });
});
//]]>
</script>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    $(document).ready( function() {
        $('div.fb-login-button, span.fb-login-button').attr({
            "data-scope": "{switch_facebook_login.FB_SCOPE}",
            "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
            "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
            "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
            "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
        });
        $('div.fb-login-button, span.fb-login-button').each(function() {
            if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
                $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
            }
            if($(this).html() == '') {
                $(this).html('{switch_facebook_login.FB_LABEL}');
            }
        });
       
        FB.init({
            "appId"  : "{switch_facebook_login.FB_APP_ID}",
            "cookie"  : {switch_facebook_login.FB_COOKIE},
            "xfbml"  : {switch_facebook_login.FB_XFBML},
            "oauth"  : {switch_facebook_login.FB_OAUTH},
            "version" : "{switch_facebook_login.FB_VERSION}"
        });
       
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
    function onLoginFB() {
        window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
    }
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
    $(document).ready( function() {
        $('div.ti-connect, span.ti-connect').attr({
            "data-loc": "{switch_topicit_connect.TOPICIT_URL}",
            "data-login": "{switch_topicit_connect.BOARD_LOGIN}",
            "data-version": "{switch_topicit_connect.TOPICIT_VERSION}",
            "data-lang": "{switch_topicit_connect.BOARD_LANG}"
        });

        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'topicit-connect'));
    });
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>


BTW, the forum is completely private and only shows login. Supposedly ads appear only to guests and NOT to logged in users. Since today, when I log in, I see ad coming up on the top. Why is this happening? I was hoping for a completely ads-free forum to logged-in users on a free plan.

to remove them you must buy an   or   package 

details here : https://help.forumotion.com/t155627-forumotion-packages?highlight=packages and https://help.forumotion.com/t155623-disabling-ads-on-your-forum

please if you have any more questions that is not related to this thread you must open a new thread

Replace that template with this and see if that works.

Code:

<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
  <div>
        <ul>
            <li>
<!-- END html_validation -->
            </li>
        </ul>
        <!-- BEGIN switch_footer_links -->
      <ul class="footerbar-user">
        <li><i class="ion-clock"></i>{CURRENT_TIME}</li>
            <!-- BEGIN footer_link -->
            <li class="rightside">
              <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">
                  {switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}
              </a>
            </li>
            <!-- END footer_link -->
        </ul>
        <!-- END switch_footer_links -->
    </div>
  <div class="copyright">
      <div class="wrap">
        <div class="copyright-body">
            {ADMIN_LINK}
            </div>
        </div>
    </div>
</div>
{PROTECT_FOOTER}
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    $(document).ready( function() {
        $('div.fb-login-button, span.fb-login-button').attr({
            "data-scope": "{switch_facebook_login.FB_SCOPE}",
            "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
            "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
            "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
            "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
        });
        $('div.fb-login-button, span.fb-login-button').each(function() {
            if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
                $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
            }
            if($(this).html() == '') {
                $(this).html('{switch_facebook_login.FB_LABEL}');
            }
        });
     
        FB.init({
            "appId"  : "{switch_facebook_login.FB_APP_ID}",
            "cookie"  : {switch_facebook_login.FB_COOKIE},
            "xfbml"  : {switch_facebook_login.FB_XFBML},
            "oauth"  : {switch_facebook_login.FB_OAUTH},
            "version" : "{switch_facebook_login.FB_VERSION}"
        });
     
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
    function onLoginFB() {
        window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
    }
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
    $(document).ready( function() {
        $('div.ti-connect, span.ti-connect').attr({
            "data-loc": "{switch_topicit_connect.TOPICIT_URL}",
            "data-login": "{switch_topicit_connect.BOARD_LOGIN}",
            "data-version": "{switch_topicit_connect.TOPICIT_VERSION}",
            "data-lang": "{switch_topicit_connect.BOARD_LANG}"
        });

        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'topicit-connect'));
    });
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
  fa_endpage();
//]]>
</script>
</body>
</html>

Make sure to save the change and publish the modified template.