Site logo

Archived topic

Night Mode Back to top position

20 replies · Started by Mr McMarry on November 4, 2018

Viewing posts 1–15 of 21

Hey GP Developers:

I recent tested generate press with a dark mode plugin Dark Mode so the issue is that when i log in to my site as a visitor with Mozilla Firefox so the Back to top button get misplaced itself, there no code to overwrite the back-top top button CSS or anything but still it is causing it.

Hope you can figure it out whats the issue.

Thank You

Regards.

Weird, it seems to be setting a height to the html element.

Try adding this:

html {
    height: auto !important;
}

Now it's in the footer area and not coming up when we scroll a bit down its stuck in footer

That's super strange - I can't find a reason for that.

It may be worth asking the Dark Mode plugin authors if something in the plugin would conflict with a fixed element on the page.

Emailed them lets see :)

Hes not answering I really want a dark mode. When I enable it, it just blew everything the fixed sticky widget. Every browser has its own issue. DAMN

Can you just help me to set up a dark mode with CSS I will put all the CSS for every page and give an update just help to set it up I mean when switched so dark mode CSS enabled and yes don't forget cookie to remember dark mode settings.

and the new button above the back to top its also getting bugged

Is it possible ?

Would you recommend me to work with this Plugin it does what I ask from you but the problem is it good with GP I don't want any trouble or speed issue or issue with the upcoming feature with GP? I mean it don't intercept with GP CSS because it's going to over-right the CSS so!

Last plugin was based on filter invert
and this one on css

It has Cookie Remeber feature too.
idk about work good with phone or tablet.

Want some suggestions.

It looks like it should work with GP - worth a shot.

I don't believe there's an easy solution I can provide in the forum here - finding a plugin or hiring a developer to build something is likely the route to take.

So why don't you make a Dark Mode Plugin for GP? Like WP Show Post and Social Plugin?
Because today's developers will request this type of feature because of Google and other tech giant adopting it that's why and idk after having a dark mode this will be the first theme which has a dark mode feature.

I dont think so plugin code is that big is it ?

Will give it a shot and will update you if something goes Wrong

It's definitely something we can look into :)

Thank You for giving some hope and yes can I know whats the priority you have given to this suggestion?

I know you got a lot of stuff to do. New plugin means new bugs, issue, requests, more problems but it worth a shot lets see if GP users like it or not.

It's not something that will be in the next version, that's for sure. We'd need to look into how it would be done, and how much demand there would be for such a thing.

What is sfHover its messing things around here where i am working with the Dark mode the one on the left enable it and when you click the main menu with expand and when its active its changing color

the problem is sfHover i dont know what the problem heres the code i am using

/*Search Field Main Navigation*/
body.wp-night-mode-on .main-navigation .navigation-search input[type="search"], 
.main-navigation .navigation-search input[type="search"]:active {
	background-color: #181B1C;
	color: #888888;
}

/*Secondary Navigation (Top Menu)*/
body.wp-night-mode-on .secondary-navigation {
	background-color: #232323;
	border-bottom: 4px solid #353535;
	transition: none;
}
/*Main-Navigation*/
body.wp-night-mode-on .main-navigation {
	background-color: #232323;
	transition: none;
}
/*Secondary Navigation (Top Menu) Hover and Active*/
body.wp-night-mode-on .secondary-navigation .main-nav ul li[class*=current-menu-]>a, .secondary-navigation .main-nav ul li[class*=current-menu-]>a:hover, .secondary-navigation .main-nav ul li[class*=current-menu-].sfHover>a{
	background-color: #181B1C;
	color: #a7a7a7;
	transition: none;
}
body.wp-night-mode-on .secondary-navigation .main-nav ul li:hover>a, .secondary-navigation .main-nav ul li:focus>a, .secondary-navigation .main-nav ul li.sfHover>a {
	background-color: #181B1C;
	color: #888888;
	transition: none;
}
body.wp-night-mode-on .main-navigation .main-nav ul li[class*=current-menu-]>a {
	background-color: #181B1C;
	color: #a7a7a7;
}
body.wp-night-mode-on .main-navigation .main-nav ul li:hover>a, .main-navigation .main-nav ul li:focus>a, .main-navigation .main-nav ul li.sfHover>a{
	background-color: #181B1C;
	color: #888888;
	transition: none;
}
body.wp-night-mode-on .main-navigation ul ul {
	background-color: #181B1C;
}
body.wp-night-mode-on .main-navigation .main-nav ul ul li:hover>a, .main-navigation .main-nav ul ul li:focus>a, .main-navigation .main-nav ul ul li.sfHover>a{
	background-color: #222222;
}

and is there any page in generatepress site where all site color is defined like this for menus.

sfHover is a class added to menu items when they come into focus. It mainly exists for accessibility reasons, so people can tab through the menu items with their keyboard.

What's the issue exactly? Your code seems to be targeting sfHover correctly.

This archived topic is closed to new replies.