Seeking help with the design

Page 3 of 3 Previous  1, 2, 3

Go down

In progress Seeking help with the design

Post by Guest on November 17th 2019, 6:56 am

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 -
Seeking help with the design - Page 3 From_t10

The website appears when you scroll to the bottom of the page -
Seeking help with the design - Page 3 From_b10

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
avatar
Guest
Guest


Back to top Go down


In progress Re: Seeking help with the design

Post by Guest on November 18th 2019, 11:35 am

@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!)
avatar
Guest
Guest


Back to top Go down

In progress Re: Seeking help with the design

Post by skouliki on November 18th 2019, 11:43 am

thanks for the cooperation also

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

Female Posts : 7316
Reputation : 1029
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

In progress Re: Seeking help with the design

Post by Guest on November 18th 2019, 11:44 am

@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.
avatar
Guest
Guest


Back to top Go down

In progress Re: Seeking help with the design

Post by Guest on November 21st 2019, 11:21 am

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.
avatar
Guest
Guest


Back to top Go down

In progress Re: Seeking help with the design

Post by skouliki on November 21st 2019, 1:09 pm

hello

can you enable the description
skouliki
skouliki
Manager
Manager

Female Posts : 7316
Reputation : 1029
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

In progress Re: Seeking help with the design

Post by SLGray on November 21st 2019, 7:52 pm

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


Seeking help with the design - Page 3 Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 46780
Reputation : 3278
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Seeking help with the design

Post by Guest on November 22nd 2019, 9:00 am

@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);
});
-------------


Last edited by Harshavardhan on November 22nd 2019, 11:20 am; edited 1 time in total
avatar
Guest
Guest


Back to top Go down

In progress Re: Seeking help with the design

Post by SarkZKalie on November 22nd 2019, 11:07 am

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 Sad


Seeking help with the design - Page 3 Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1110
Reputation : 179
Language : English

https://www.rotavn.xyz/

Back to top Go down

In progress Re: Seeking help with the design

Post by Guest on November 22nd 2019, 11:21 am

@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 Sad

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.
avatar
Guest
Guest


Back to top Go down

In progress Re: Seeking help with the design

Post by Draxion on November 22nd 2019, 1:31 pm

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");
  });
});


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as Seeking help with the design - Page 3 Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

Seeking help with the design - Page 3 Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2408
Reputation : 305
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Seeking help with the design

Post by Guest on November 23rd 2019, 12:30 am

@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.
avatar
Guest
Guest


Back to top Go down

In progress Re: Seeking help with the design

Post by Draxion on November 23rd 2019, 6:14 am

Please copy and paste me your template overall_footer_end.

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

Thanks


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as Seeking help with the design - Page 3 Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

Seeking help with the design - Page 3 Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2408
Reputation : 305
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Seeking help with the design

Post by Guest on November 23rd 2019, 6:52 am

@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.
avatar
Guest
Guest


Back to top Go down

In progress Re: Seeking help with the design

Post by skouliki on November 23rd 2019, 7:20 am

to remove them you must buy an  Seeking help with the design - Page 3 857436672 or  Seeking help with the design - Page 3 312592876 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
skouliki
skouliki
Manager
Manager

Female Posts : 7316
Reputation : 1029
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

In progress Re: Seeking help with the design

Post by Draxion on November 23rd 2019, 7:45 am

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>


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as Seeking help with the design - Page 3 Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

Seeking help with the design - Page 3 Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2408
Reputation : 305
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Seeking help with the design

Post by SLGray on November 23rd 2019, 7:59 pm

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


Seeking help with the design - Page 3 Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 46780
Reputation : 3278
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Seeking help with the design

Post by skouliki on December 3rd 2019, 10:15 am

since the member has deleted his/her account topic moved to the garbage.

skouliki
skouliki
Manager
Manager

Female Posts : 7316
Reputation : 1029
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Page 3 of 3 Previous  1, 2, 3

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum