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

Harshavardhan wrote:
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.

we are not magicians
we are trying to find a solution by testing many things

one code is added which make your bar sticky
that code is usually in :
css / if your css sheet is empty that means no codes ar added so its ok
java
templates

we are just volunteers that trying to help you , we have many threads per day so please be patient
if you think Draxion's solution is solved your issue then mark your thread as solved

skouliki wrote:we are not magicians
we are trying to find a solution by testing many things

one code is added which make your bar sticky
that code is usually in :
css / if your css sheet is empty that means no codes ar added so its ok
java
templates

we are just volunteers that trying to help you , we have many threads per day so please be patient
if you think Draxion's solution is solved your issue then mark your thread as solved

My issue is not fully resolved yet, just partly.

I've reverted your suggestion in terms of disabling javascript.

I did indicate that I've added my own codes to the blank CSS as mentioned a few posts earlier - let me reiterate below -

.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;}

What remains an issue is that the fine blue line still appears sticky the moment you scroll down as SLGray showed in their latest reply to this thread.

And I also want the header banner/logo NOT to disappear away the moment one scrolls down.

Once that is all resolved, then I'd like some more assistance to edit the navbar - change its background colour from blue to white and the non-active nav-links/buttons from white to grey (plus make them blue when one hovers along these). Plus I've some more queries to ask but I want to focus on the above issues first and get them resolved fully.

Yes, I'll be patient. I'm already grateful for all the support and help so far and I highly commend your volunteered efforts.

And I'm curious to ask - you mentioned to delete the existing headerbar-top code part of CSS - how can I locate this on Admin Panel and edit/override/delete it?

As for pondering on the code added to CSS that makes the bar sticky, I didn't add or create this - it's probably inbuilt with skin version ModernBB which I'm using.

can you add this to your css sheet and save please

Code:


.is-sticky#headerbar-top { 
    position: absolute !important;   
}



skouliki wrote:can you add this to your css sheet and save please

Code:


.is-sticky#headerbar-top {  
    position: absolute !important;    
}



Now that works. Again, a tinier bit of problem persists. When you scroll to the top, the same blue line flashes for a few seconds. How to get rid of that too?

Plus, how to stop the header banner/logo from disappearing the moment you scroll down?

Edit: actually, I've fixed that tiny bit on my own by inserting in your suggested line as follows.

.is-sticky#headerbar-top {background-color: #ffffff; box-shadow: 0 0 0px rgba(0, 0, 0, 0); position: absolute !important;}

Note 'background-colour' + box-shadow thing.

Edit 2: now I'm investigating for nav-bar and header banner/logo on the forum's basic CSS (obtained and reading on notepad) so I can copy and paste parts into CSS stylesheet with editions -

1) To explore display property along -

.is-sticky #logo {
 display: none;
 height: 0;
 margin: 0;
 opacity: 0;
 transform: translateY(-200px);
 width: 0;
  }

AND/OR

#logo {
 display: inline-block;
 float: none;
margin-top: 13px;
  }

AND/OR wherever the lines are relevant

So that the logo doesn't disappear right away but stay the moment you scroll down - in the same way as the navbar.

2) To investigate the colour for navlink buttons so that the bar is background white but the buttons are grey when not hovered on and blue when hovered on.

Edit 3: now I've managed to fix the logo from disappearing because I've modified these lines!

.is-sticky #logo {display: initial; height: 0; margin: 0; opacity: 1; transform: translateY(-200px); width: 0;}

I've changed display from none to initial and opacity from 0 to 1!

now, what's left is the navbar colours!

edit 4: still, after changing the backgroundcolour plus box-shadow for headerbar-top, there's a slight, white implicit bump you see when you scroll back to the top, making the header banner/logo shake for a few seconds. I'm trying to tackle this though whilst working on navbar colours.

edit 5: I'm still stuck on removing the slight 'bump' that happens to the header banner/logo when you scroll to the top and changing the colours of navbar. Anyone who can help me out on that would be appreciated.

Redacted - accidental double posting.

to that code i gave you add this display:none;

so the code will be like this

Code:

.is-sticky#headerbar-top { 
    position: absolute !important;
    display: none;
}


skouliki wrote:to that code i gave you add this display:none;

so the code will be like this

Code:

.is-sticky#headerbar-top {  
    position: absolute !important;
    display: none;
}


I did try this already before you said here but it only makes the header banner/logo disappear (the moment you scroll down), returning to the same old problem.

this is not about the logo this code is about the navbar

lets try to fix one thing at a time

if you keep adding things then the elements i investigate changes all the time and i keep getting different results

is the navbar completed?

skouliki wrote:this is not about the logo this code is about the navbar

lets try to fix one thing at a time

if you keep adding things then the elements i investigate changes all the time and i keep getting different results

is the navbar completed?

The navbar is not done yet in terms of changing its colours - I'm still stuck on it, trying to figure it out.

Ok, I'll do what you suggest step-by-step - I'm ready.

Are we together now?

Someone is calling me for dinner right now. Please confirm if you're ready to do this with me right now then I'll go ahead with this and postpone dinner - or confirm if you're not ready then I'll eat dinner now and come back.

this code is about making the navbar grey

Code:


.navbar a {
    background-color: grey;
}


skouliki wrote:this code is about making the navbar grey

Code:


.navbar a {
    background-color: grey;
}


That works. Instead of grey, I want it white which I just did but it leaves the edges of blue colour.

What I want is this -

Navbar a to be white (with no blue edges either), so the symbols are grey. And when you hover on the symbols, they actively become blue until you hover away from them.

Until then, when you hover on them, the background colour is white and symbols black.

if you make the background white the icons that are white will not be visible (they are white before the hover)

wait

skouliki wrote:if you make the background white the icons that are white will not be visible (they are white before the hover)

Yes, so I want to make the icons grey before you hover on them and then they turn blue when you hover on them.

And I want the nav bar background colour white so it's seamless with the overall page of the forum.

Code:

.navbar img {
      filter: invert(0%); }
.navbar a {
    background-color: white;
}


try this and delete the previous grey code

skouliki wrote:

Code:

.navbar img {
      filter: invert(0%); }
.navbar a {
    background-color: white;
}


try this and delete the previous grey code

Now that works. But what is left is the blue edges between each icon. Do you not see the same and how to get rid of those?

Code:


.navbar a {
    border-radius: unset;
)


skouliki wrote:

Code:


.navbar a {
    border-radius: unset;
)


Now that works!

What's left is I want the icons to be grey of this code #404040 instead of black plus when one hovers on them, they turn blue, i.e. #44749e.

Is this possible?

the icons to change when hovering or the background?

skouliki wrote:the icons to change when hovering or the background?

Just the icons.

Because you found a solution to the sticky function, I recommend replacing that script I gave you with this. This will only bring down the navbar below the header.

Code:

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


Draxion wrote:Because you found a solution to the sticky function, I recommend replacing that script I gave you with this. This will only bring down the navbar below the header.

Code:

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


Done that, thx.

The tiny problem still persists - when you scroll back to the top, the logo/banner shakes a bit for a few seconds.

Now, skouliki, looking forward to receiving your further instructions...

skouliki wrote:

Code:

.navbar img {
      filter: invert(0%); }
.navbar a {
    background-color: white;
}


try this and delete the previous grey code

to make the icons to the grey that you want , just change the invert(0%) value from 0 to whatever example 50%
the 100% is total black

skouliki wrote:

skouliki wrote:

Code:

.navbar img {
      filter: invert(0%); }
.navbar a {
    background-color: white;
}


try this and delete the previous grey code

to make the icons to the grey that you want , just change the invert(0%) value from 0 to whatever example 50%
the 100% is total black

I'm not sure if that will work. The grey colour I intend to use, i.e. #404040 is still a colour (RGB is 64, 64, 64) and not a transparent shade of pure black.

So is it possible to change the icons (not background) to this colour and also make them automatically appear blue (#44749e or RGB of 68, 116, 158) when hovered on?

I'm going to eat dinner right now - someone is getting annoyed right now. Will be back in 1/2 hrs or so...

Edit: Dinner is over.

I'm ready to continue using further help - you guys?

The tiny problem still persists - when you scroll back to the top, the logo/banner shakes a bit for a few seconds.

i cant see this using chrome

i dont think you can change them using css cause they are icons (not Font Awesome icons)

the best think i can think is this
replace the code

Code:

.navbar img {
      filter: invert(0%);
}


with this

Code:

.navbar img {
    -webkit-filter: opacity(.5) drop-shadow(0 0 0 #404040);
}

for the hover icon color iam not sure

skouliki wrote:

The tiny problem still persists - when you scroll back to the top, the logo/banner shakes a bit for a few seconds.

i cant see this using chrome

i dont think you can change them using css cause they are icons (not Font Awesome icons)

the best think i can think is this
replace the code

Code:

.navbar img {
      filter: invert(0%);
}


with this

Code:

.navbar img {
    -webkit-filter: opacity(.5) drop-shadow(0 0 0 #404040);

for the hover icon color iam not sure

Alas, the icons turn white with this updated code.

you didnt put the }
at the end of the code

skouliki wrote:you didnt put the }
at the end of the code

No, I did. I understand you erred and omitted that last bit but I consciously put it out of volition because I'm learning that enclosing with '}' is part of the syntax.

Still, the icons are white until you hover on them.

then i dont know..return to the previous situation and maybe another member with more coding skills can help you on this

if i found the solution later i will post

skouliki wrote:then i dont know..return to the previous situation and maybe another member with more coding skills can help you on this

if i found the solution later i will post

Wait, I just fixed it to the desired colour!

I guess you forgot to add ';' between webkit filter and drop shadow.

yes ! thank you