Seeking help with the design
5 posters
Page 3 of 3
Page 3 of 3 • 1, 2, 3
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
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
Guest- Guest
Re: Seeking help with the design
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!)
Guest- Guest
Re: Seeking help with the design
thanks for the cooperation also
i will leave open the topic if someone can help you change the hover color on navbar icons
i will leave open the topic if someone can help you change the hover color on navbar icons
Re: Seeking help with the design
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.
Guest- Guest
Re: Seeking help with the design
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.
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.
Guest- Guest
Re: Seeking help with the design
CSS for each version is different. Some Invision CSS and JavaScript will not work for ModernBB.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Seeking help with the design
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
Guest- Guest
Re: Seeking help with the design
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
Re: Seeking help with the design
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.
Guest- Guest
Re: Seeking help with the design
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");
});
});
Re: Seeking help with the design
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.
Guest- Guest
Re: Seeking help with the design
Please copy and paste me your template overall_footer_end.
ACP(Admin Control Panel) > Display > Templates > General > overall_footer_end
Thanks
ACP(Admin Control Panel) > Display > Templates > General > overall_footer_end
Thanks
Re: Seeking help with the design
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.
Guest- Guest
Re: Seeking help with the design
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
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
Re: Seeking help with the design
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>
Re: Seeking help with the design
Make sure to save the change and publish the modified template.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Seeking help with the design
since the member has deleted his/her account topic moved to the garbage.
Page 3 of 3 • 1, 2, 3
Similar topics
» Seeking advice about a litigation.
» RPG Lovers - Seeking team
» Seeking a way to compare posts-per-day with transparency
» I want to design the design of the BBcodes.
» Who is this design???
» RPG Lovers - Seeking team
» Seeking a way to compare posts-per-day with transparency
» I want to design the design of the BBcodes.
» Who is this design???
Page 3 of 3
Permissions in this forum:
You cannot reply to topics in this forum