Seeking help with the design

by Guest November 17th 2019, 6:56 am

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 -

44749e - Seeking help with the design From_t10

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

44749e - Seeking help with the design 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

by **SLGray** November 17th 2019, 7:00 am

I believe you are getting the 2 different navbars mixed up. There should be one that appears under the logo/banner and one under the toolbar when you scroll down the page. From your screenshots, I can not tell if you have the toolbar activated.

by Guest November 17th 2019, 7:02 am

SLGray wrote:I believe you are getting the 2 different navbars messed up. There should be one that appears under the logo/banner and one under the toolbar when you scroll down the page. From your screenshots, I can not tell if you have the toolbar activated.

Hi,

I am well aware of the two different navbars. I have already disabled toolbar via Admin Panel > Modules so I only use the navigation bar that is blue in colour as you can see on the screenshot provided.

by **SLGray** November 17th 2019, 7:04 am

So what is wrong with the navbar?

by Guest November 17th 2019, 7:05 am

SLGray wrote:So what is wrong with the navbar?

I have explained my issues with the navbar in OP. Let me copy and paste -

a) I want the navigation bar to appear below the header bar. Plus, 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.

There you go. Please also note my issues lettered b and c.

by **SLGray** November 17th 2019, 7:08 am

What? The navbar should be there not matter what? What do you exactly mean by it appears when you scrolled down the page?

Ok. We need the link to your forum.

by Guest November 17th 2019, 7:10 am

SLGray wrote:What? The navbar should be there not matter what? What do you exactly mean by it appears when you scrolled down the page?

Ok. We need the link to your forum.

No, I still want to retain the navbar. I just don't want it to appear on the top of the page as you can see in the screenshot. Instead, I want it to appear below the header bar which is white and contains the central forum logo.

By 'appearing when you scroll down the page', I mean I don't want it to be absent until one scrolls down as you can see in the screenshot. I want it to appear already upon loading the website, i.e. below the header bar, without having to scroll down.

The forum is

https://azurefellows.forumotion.com/

There you go.

by **SLGray** November 17th 2019, 7:14 am

So you want the menu (navbar) that appears when you scroll down the page when you have the toolbar activated?

by **SLGray** November 17th 2019, 7:15 am

Wait a minute! Is that toolbar at the top of your forum the default one?

by Guest November 17th 2019, 7:19 am

SLGray wrote:So you want the menu (navbar) that appears when you scroll down the page when you have the toolbar activated?

I'm not sure if you've got me correctly.

I am saying that the toolbar is not activated as I do not want that module in place.

So what I'm left with is the other navigation bar that I'm referring to in the screenshot. I am not saying that I want it to appear when one scrolls down. I am saying that this is already the given condition. I only want the bar to appear already when the website loads without needing to scroll down.

As for whether this toolbar is the default one, I guess so.

by **SLGray** November 17th 2019, 7:21 am

But you are not understanding that what I see is the menu from the toolbar. I do not see the normal navbar that should be at the top under the banner/logo.

by Guest November 17th 2019, 7:22 am

SLGray wrote:But you are not understanding that what I see is the menu from the toolbar. I do not see the normal navbar that should be at the top under the banner/logo.

So my request is that I want the navbar to appear below the headerbar/logo.

Since I've already deactivated the toolbar module via Admin > Modules, I'm confused if that's the kind of toolbar you're referring to.

by **SLGray** November 17th 2019, 7:25 am

Is this a customized theme, or did you install it from Hitskin?

by Guest November 17th 2019, 7:28 am

SLGray wrote:Is this a customized theme, or did you install it from Hitskin?

I'm using the given Hitskin called ModernBB but with some colour alterations as you can see in the screenshots.

by Guest November 17th 2019, 7:30 am

Just a quick headsup,

I'm going for a run IRL so I'll be back in a couple of hours or so.

by **SLGray** November 17th 2019, 7:36 am

If this is the default theme, you must have customized a lot more because that is not what the default version looks like.

by Guest November 17th 2019, 8:20 am

I'm back.

Outside is rainy and a bit of a thunderstorm.

I have altered the colours mostly, that's all.

Okay, SLGray, now, can we resolve my issues please?

-----

Now, when I blindfoldedly hovered along something between the logo and the first top category, suddenly, the navlinks appear.

Now, I realise that the navbar still exists in addition to the top toolbar. How do I change the standard colour of the nav buttons/links from white to a different colour to avoid camouflage using CSS style editor?

And now that I've found this navbar, I want to get rid of the top toolbar - how do I do that?

Also, please help me to make the forum logo scroll down when one scrolls down the forum rather than letting it disappear away the moment one scrolls down.

P.S., now I realise that the hidden navbar occurs because, inspired by reading another thread, i.e. Logo Banner Disappears When You Scroll Down, I added to the line -

.headerbar {background-color: #ffffff}

With this -

'overflow: visible'

So the line is -

.headerbar {background-color: #ffffff; overflow: visible}

Now, when you are at the top of the page, the hidden bar remains but when you scroll down, you cannot hover over this bar as it technically ceases to exist, followed by the top navbar appearing in place.

Edit: After tireless research on your help forum, now I've found the right word to describe - 'sticky'.

In short, how do I make the nav-bar non-sticky?

Edit 2: At least, I cannot obtain the skin's existing CSS so I can tweak it the way I want. How do I do that? (the CSS stylesheet started blank as soon as I activated modernBB in the first place so I've no idea where to override and edit plus downloading the file doesn't work when I click on 'See your forum's basic CSS' option)

P.S., Just now, I am finally able to obtain forum's basic CSS (I was using MS Edge and download didn't work until I checked via Google Chrome)! So I'm reading through and will see what I can do to adapt and tweak.

by Guest November 17th 2019, 9:43 am

redacted (due to double posting)

by **skouliki** November 17th 2019, 11:42 am

Please don't double post. Your posts need to be separated by 24 hours before bumping. Please use the edit button, instead!

Please read our forum rules: ESF General Rules

by **brandon_g** November 17th 2019, 2:21 pm

You could also use the inspector element to get the class or id of a specific element as well. That's what I do if I need to make changes.

by **SLGray** November 17th 2019, 10:30 pm

See if you have the navbar (navigation menu) under the banner/logo, the one at the top must be the one connected to the toolbar, or you added some coding for it. If it is the toolbar's men, you must be using some coding to hide the toolbar itself which is against the Terms of Service.

by Guest November 17th 2019, 11:59 pm

SLGray wrote:See if you have the navbar (navigation menu) under the banner/logo, the one at the top must be the one connected to the toolbar, or you added some coding for it. If it is the toolbar's men, you must be using some coding to hide the toolbar itself which is against the Terms of Service.

I've said several times that the toolbar is already deactivated via Admin > Modules so the navbar you see is the normal one/navigation menu. And being on free plan, I cannot modify copyrights and am not that expert to even remove it on my own. (and of course, I didn't add coding for it! And what do you mean by toolbar's men?)

To prove that the navbar I'm referring to is NOT the toolbar which contains copyrights, let me temporarily activate the toolbar module and attach the image -

44749e - Seeking help with the design With_t10

I'm asking again, how do I bring down the navigation menu (blue one) from the top to under the banner?

Wait, I didn't use coding to hide the toolbar. I thought it's a legitimate option under Admin > Modules -

44749e - Seeking help with the design Module10

Are you seriously saying that choosing 'no' to the option 'activate the toolbar' goes against terms of service? Then why is this option even available in the first place to free plan users like me?

by **SLGray** November 18th 2019, 2:41 am

by Draxion November 18th 2019, 2:43 am

Try this by adding this script.

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

by **skouliki** November 18th 2019, 6:02 am

hello

you have this code

Code:: .is-sticky#headerbar-top { background-color: #44749e; box-shadow: 0 0 3px rgba(0,0,0,0.9); height: auto; left: 0; padding: 6px 0; position: fixed; right: 0; top: 0; z-index: 1000!important; }

delete it

by Guest November 18th 2019, 7:35 am

skouliki wrote:hello

you have this code
Code:
.is-sticky#headerbar-top { background-color: #44749e; box-shadow: 0 0 3px rgba(0,0,0,0.9); height: auto; left: 0; padding: 6px 0; position: fixed; right: 0; top: 0; z-index: 1000!important; }

delete it

Hi, I do not have this in CSS so how do I force-delete it?

This is what I currently have -

.headerbar {background-color: #ffffff;}
.statistics {background-color: #ffffff; color: #404040;}
#page-footer {background-color: #ffffff;}
.footerbar-system {color: #404040}
.footerbar-system a {color: #404040}
.copyright a {color: #404040;}
.copyright-body {border-color: #404040;}

Before I used CSS stylesheet first time on my current forum, the CSS was already blank so can you tell me how do I edit the existing CSS?

by **skouliki** November 18th 2019, 8:01 am

maybe it is a java
try to disable your javascript to see if the issue will be resolved
if yes then a javascript is the issue you must find which one by manually disabling one by one

by Guest November 18th 2019, 8:03 am

skouliki wrote:maybe it is a java
try to disable your javascript to see if the issue will be resolved
if yes then a javascript is the issue you must find which one by manually disabling one by one

Where do I find javascript so as to be able to disable it? Is it on admin panel or what?

I'm already using JavaScript Code suggested by Draxion above - is that this module you're referring to?

by **skouliki** November 18th 2019, 8:05 am

no not that

44749e - Seeking help with the design Scre1554

by Guest November 18th 2019, 8:08 am

skouliki wrote:no not that

Ok, just now I did that and guess what happened?

The navbar returns to the top and the problem comes back. This defeats Draxion's solution which was helping until now. Plus, when checking CSS stylesheet, still it's blank except with my additional codes on.

Do I need to keep like this? This is not helping.

Seeking help with the design

Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design

Re: Seeking help with the design