Seeking help with the design
5 posters
Page 2 of 3
Page 2 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
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
Re: Seeking help with the design
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.
Guest- Guest
Re: Seeking help with the design
can you add this to your css sheet and save please
- Code:
.is-sticky#headerbar-top {
position: absolute !important;
}
Re: Seeking help with the design
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.
Last edited by Harshavardhan on November 18th 2019, 9:34 am; edited 8 times in total
Guest- Guest
Re: Seeking help with the design
to that code i gave you add this display:none;
so the code will be like this
so the code will be like this
- Code:
.is-sticky#headerbar-top {
position: absolute !important;
display: none;
}
Re: Seeking help with the design
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.
Guest- Guest
Re: Seeking help with the design
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?
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?
Re: Seeking help with the design
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.
Last edited by Harshavardhan on November 18th 2019, 9:56 am; edited 1 time in total
Guest- Guest
Re: Seeking help with the design
this code is about making the navbar grey
- Code:
.navbar a {
background-color: grey;
}
Re: Seeking help with the design
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.
Last edited by Harshavardhan on November 18th 2019, 10:03 am; edited 1 time in total
Guest- Guest
Re: Seeking help with the design
wait
Re: Seeking help with the design
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.
Guest- Guest
Re: Seeking help with the design
- Code:
.navbar img {
filter: invert(0%); }
.navbar a {
background-color: white;
}
try this and delete the previous grey code
Re: Seeking help with the design
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?
Guest- Guest
Re: Seeking help with the design
skouliki wrote:the icons to change when hovering or the background?
Just the icons.
Guest- Guest
Re: Seeking help with the design
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);
});
Re: Seeking help with the design
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...
Guest- Guest
Re: Seeking help with the design
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
Re: Seeking help with the design
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?
Guest- Guest
Re: Seeking help with the design
i cant see this using chrome
The tiny problem still persists - when you scroll back to the top, the logo/banner shakes a bit for a few seconds.
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
Re: Seeking help with the design
skouliki wrote:i cant see this using chrome
The tiny problem still persists - when you scroll back to the top, the logo/banner shakes a bit for a few seconds.
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.
Guest- Guest
Re: Seeking help with the design
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.
Guest- Guest
Re: Seeking help with the design
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
if i found the solution later i will post
Re: Seeking help with the design
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.
Guest- Guest
Page 2 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.
» Design Help
» RPG Lovers - Seeking team
» Seeking a way to compare posts-per-day with transparency
» I want to design the design of the BBcodes.
» Design Help
Page 2 of 3
Permissions in this forum:
You cannot reply to topics in this forum