Latest topics
» Dark Theme Help
by Haggis Today at 01:01

» Forumactif Edge - Greek Translation
by Bigtuber Yesterday at 21:02

» [GAME] Count to One Million!
by Van-Helsing Yesterday at 19:53

» Forumactif Edge Web Page - Translations
by Ange Tuteur Yesterday at 18:06

» Quick Reply Bug
by Ange Tuteur Yesterday at 17:44

» Forumactif Edge - Portuguese Translation (Brazilian)
by Ange Tuteur Yesterday at 17:40

» Happy Birthday Thread
by Ange Tuteur Yesterday at 17:34

» Adding text to reputation counter
by Ange Tuteur Thu 23 Mar 2017, 17:19

» Forumactif Edge - Spanish Translation
by Ange Tuteur Thu 23 Mar 2017, 16:24

» How do I add hover examine feature?
by dr.kran Thu 23 Mar 2017, 06:18

» [THEME] Cosmic Sleek RED v1.1 - Phpbb3
by King Tue 21 Mar 2017, 12:39

» Forumactif Edge - Translations
by Ange Tuteur Mon 20 Mar 2017, 20:03

» [GAME] Post a random picture
by Ange Tuteur Mon 20 Mar 2017, 19:18

» IconSkouliki
by skouliki Mon 20 Mar 2017, 15:47

» Personal Rank Titles
by Harleen Mon 20 Mar 2017, 12:38

Recent Tutorials
Who is online?
In total there are 3 users online :: 1 Registered, 0 Hidden and 2 Guests :: 1 Bot

Haggis

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

[SUGGESTION] Shadowed edges for the side menus & icons

View previous topic View next topic Go down

avatar
Guest
Guest
View all awards

PostGuest on Thu 18 Aug 2016, 05:23

I've got a small suggestion for the next theme update: Shadowed edges for the side menus & Widget menu toggler + Quick navigation toggler icons.


Looking at for instance the Windows 10 start menu, it casts a small (3 - 5 px.) almost transparent grey-ish shadow, making it look like it's being lifted from the pages.




avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4387
Points : 9037
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 18 Aug 2016, 11:36

Shadow-wise I'd like to refrain from using them too much, because they can be a bit heavy -- especially on objects that are constantly visible like the side menus. A border on the other hand might be a better choice.. Think

These are some sample snippets.

Shadow :
Code:
.module_column, .widget_menu {
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.176);
}
Adds a shadow to both the buttons and column.


Border :
Code:
.module_column {
  border-right:1px solid rgba(255, 255, 255, 0.1);
}
Adds a border to just the column. ( I might use a different method than this )


I'll probably go with the border, as to add some separation between the navbar and footer.
avatar
Guest
Guest
View all awards

PostGuest on Thu 18 Aug 2016, 11:38

Alright. So, you like the suggestion (not in full, but just another method)?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4387
Points : 9037
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 18 Aug 2016, 11:46

Yeah, I agree that some separation is needed between the content and side panels. What do you think of this ?

It adds a subtle border on the column.

CSS would be :
Code:
.module_column:after {
  content:"";
  background:rgba(0, 0, 0, 0.25);
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
}

.module_column.column_left:after { right:0; }
.module_column.column_right:after { left:0; }
avatar
Guest
Guest
View all awards

PostGuest on Thu 18 Aug 2016, 11:47

Perhaps you should go with a light grey-ish color and a bit more of a border... Could you give me another example?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4387
Points : 9037
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 18 Aug 2016, 11:52

A lighter variant would be rgba(255, 255, 255, 0.1) :
avatar
Guest
Guest
View all awards

PostGuest on Thu 18 Aug 2016, 11:54

Looks better now. But... it only shows at the footer. Is it me or did you only cover the footer in that story? It's hard to see any of a border next to the rest of the menu on the right.
avatar
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3507
Points : 4315
Reputation : 301
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Thu 18 Aug 2016, 11:58

Since the color of the body of the forum is light the lighter border won't really show..
Since the borders on the widget's title are dark maybe the whole thing should stay dark?


PS. Is there supposed to be a left border for the title..?

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4387
Points : 9037
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 18 Aug 2016, 11:58

Well that's because the panel already has a great deal of separation between the forum body. ( i.e. the body is white and the panel is a dark blue ) You'll only notice the difference on the header and footer, because the colors are much more similar. Now I wonder if it's even necessary for such a small portion.. Think
avatar
Guest
Guest
View all awards

PostGuest on Thu 18 Aug 2016, 12:00

I don't know. Just have another look at the original suggestion / request. That's where the border should be visible. Any of color. And not that narrow I've to go find it with a looking glass.

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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