I am trying to find a way how i could get information from browser what is users selected color theme in google account (or maybe any other social network that user is connected to) and set the same theme for my website.
Or at least get browser appearance theme and set color theme of my website accordingly.
Unfortunately no one gave any suggestions,
But thanks to Steve Griffith - Prof3ssorSt3v3 i have found some solution:
Prof3ssorSt3v3 have YouTube channel and posts there great videos so i recommend that channel to everyone who is learning JavaScript or PHP.
And the answer is...
According browser color-scheme it is possible to select dark or light color scheme for your webpage.
In CSS file set supported color schemes as below:
:root {
color-scheme: light dark;
}
or in HTML head set:
<meta name="color-scheme" content="light dark" />
next create different CSS for both color schemes separated like this:
#media screen and (prefers-color-scheme: dark) {
.someClass {
// some CSS
}
}
#media screen and (prefers-color-scheme: light) {
.someClass {
// some CSS
}
}
Related
I am building an application where people can create banners and I have a list of fonts. This list contains web-safe fonts, custom fonts and google fonts.
For each text element the user can choose a font.
For each of this selected fonts I need to append to head either link referring to google fonts or add a style tag with font-face referring to the custom font that is being hosted by us. Overall the list is more than 1000 fonts long.
So for custom font I want to add
<style>
#font-face {
font-family: "somefamily";
font-style: normal;
font-weight: 400;
src: url("https:someurl.ttf")
}
</style>
and for each google font
<link href="https://fonts.googleapis.com/css?family=somefamily:400,600,700,800" rel="stylesheet" type="text/css">
I tried to make it work with React helmet but I don't think it is the way to go or at least I didn't manage to make it dynamic so it only shows the link or style tag for the selected font.
I also tried webfontloader but that one is piling the fonts on top of each other.
Same goes for creating the tags in JS and then appending it to the head
let url = "https://fonts.googleapis.com/css?family=";
url += font.name.replace(" ", "+");
url += ":" + font.weights.join(",");
url.replace("regular", "400");
let link = document.createElement('link')
link.href = url;
link.rel = "stylesheet";
link.type = "text/css";
document.head.appendChild(link);
In this codesandbox https://codesandbox.io/s/billowing-river-khqob?file=/src/App.js I made a small example with googlefonts that are piled up every time user chooses new one.
Is there a way how to dynamically get the fonts that user selected without keeping the previous ones?
Is it possible to somehow add it as css instead with packages like fex. emotion?
Thank you for your help
In the end I solved it using
https://github.com/planttheidea/react-style-tag
and
https://github.com/jakewtaylor/react-google-font-loader
My company is running Wagtail as a headless API, using it more as a way to store bits of content rather than entire pages. As such there's the occasional feature that doesn't make sense for us. In this case it's the "internal link" feature. Since we don't manage "pages" per se I'd like to remove this option from the chooser found on the rich text field, as seen below.
I've identified several admin templates which could be overridden to remove this functionality, but I wanted to first see if there's something which can simply disable this "internal link" option so that it just doesn't even show up.
The _link_types.html template would allow me to remove Internal Link as a choice, but it appears Wagtail defaults to Internal Link which means that even if the option is gone, the Internal Link chooser still shows up. Barring a simple option that can be toggled off, where should I be looking to default selection to External Link?
Below is an approach, it kind of feels a bit hacky and it would be great if there was a more natural way to do this but hopefully this helps.
See the documentation for an explanation of the Wagtail Hooks.
Step 1 - hide the internal link option
Use the hook insert_editor_css to inject some css to 'hide' the first link.
This achieves the same goal as the _link_types template override you have attempted but 'scopes' this to the editor modal only.
This is important as you want to avoid breaking the 'move page' and scenarios where the page chooser will be shown. The css feels a bit hacky but hopefully gets the job done.
Step 2 - override the internal link option to external link for modals
Use the hook insert_editor_js to override the window.chooserUrls.pageChooser value, this will again be on the editor page only & for the modals only.
Set this value to the new 'default' you want, in the code below we have set this to the external link option.
You can see how these values are set globally in the editor_js.html template.
Code
# file: wagtail_hooks.py
from django.contrib.staticfiles.templatetags.staticfiles import static
from django.utils.html import format_html
from django.urls import reverse
from wagtail.core import hooks
#hooks.register('insert_editor_css')
def editor_css():
"""Add /static/css/admin.css to the admin."""
return format_html(
'<link rel="stylesheet" href="{}">',
static("css/admin.css")
)
#hooks.register('insert_editor_js')
def editor_js():
return format_html(
"""
<script>
window.chooserUrls.pageChooser = '{}';
</script>
""",
reverse('wagtailadmin_choose_page_external_link')
)
/* file: static/css/admin.css */
.modal-content .link-types :first-child {
/* hide the 'internal' link option from the page chooser */
display: none;
}
.modal-content .link-types {
/* ensure the 'before' element can be positioned absolute */
position: relative;
}
.modal-content .link-types::before {
/* hide the left '|' bar */
background: white;
bottom: 0;
content: '';
left: 0;
position: absolute;
top: 0;
width: 5px;
}
I have implemented a popup that automatically comes up on home page.
This works fine on desktop.
But it doesn't come up on mobile browser.
Is there any specific technique of doing this?
Thanks
How do you detect that the homepage window is active? I'm assuming your are using something like:
if (window.location.href.match('homepage.html') != null){
your code;
}
The answer to this question should be helpful to you:
Popup to display if viewed on mobile
You should implement the logic in css / JavaScript and reference your div (popupWindow element):
/* hidden on default */
div#popup { display: none; }
/* use a media query to filter small devices */
#media only screen and (max-device-width:480px) {
/* show the popup */
div#popup { display: block; }
}
If you're talking about a pop-up window, the browser on your mobile device may block those by default. In that case, it won't work on the desktop either unless the browser is configured to allow pop-ups.
Is there a script i can use to disable my entire website (in joomla) ,from being viewed on mobile devices? I haven't used any code yet. but I do use a script to disable right clicking but it's not for the mobile version. I don't want mobile viewing at all.
But of an odd one but you could do it using a CSS3 media query like so:
#media only screen (max-device-width : 768px) {
html,body { display: none; }
}
This will result in a completely blank screen for devices that are 768px and below. You would simply need to apply to above code to your template css file.
You could maybe also use Javascript like so:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
getElementById('body').style.display = 'none';
}
I haven't tested this on every mobile device out there but it will work on most
I have two themes: regular (1st) & mobile (2nd). Mobile theme binded with subdomain m.mysite.com.
I can't show my mobile node teaser in mobile theme.
I've created that teaser for mobile theme in Display Suite. Next I need to show this one in mobile theme taxonomy tag page. But I can't define theme in DS. When I use [taxonomy-term.tpl] in mobile theme to define mobile teaser, but vars doesn't works: changing $view_mode has no result (type machine name on mobile teaser), $content array is empty.
I tryed to use Views, but in displays there is no options to define a theme.
What can I do?
Thnx
Problem solves by the following:
1. Created DS template for default teaser in 2nd theme: ds-2col--node-article-teaser.tpl.php
2. Place into it code to define my new node_teaser_mobile to show: print render(node_view($node, $view_mode = 'node_teaser_mobile', $langcode = NULL));