I'm currently using Vue i18n in an application with a bunch of custom messages for localisation. https://vue-i18n.intlify.dev/
Is there any way I can add a wrapper or something to add some custom CSS while in development to show all localised text in red? We're sweeping through an existing application adding localisation.
At the moment it's difficult to identify which parts of the application have been localised and which haven't. If I was able to add a class or something to all areas that use the t() function easily, and colour them all in red and bold or something, that would help identify areas that we've missed in localisation.
Related
I'm the beginner of react-native.
I'm going to provide change global font size function in my app.
User could change the font size in setting page, them the whole app font size will be adjusted.
After doing some research, it seems can't do it. So my idea now is create multiple global style sheet and apply it base on the user setting saved in storage.
But I found that it seems not work, because after create global style sheet, it need to import at the beginning of the app page.
How can I apply change the app global style or font size in react-native?
You might want take a look at useContext hook, it will give you a good way to handle app global style, suck as light or dark theme, your case, font is also not a problem.
Another way is using react-redux, create a global state for your font, and all your component will listen to the font value stored in the store.
Let's keep it abstract. How I would do it: create and assign a theme for your app where you define classes with different font-sizes etc. Save the preferences as classes in the async storage. After loading the up retrieve saved preferences from async storage and set those to your components as classes. Job done.
We have an existing website. We'd like to add Vue to areas of the site. Some areas we'd only need a single Vue app to run like a shopping cart. Other areas we'd have multiple of the same component on the page broken up by non Vue items. We'd also like to use single .vue files for our building. I can't for the life of me figure out the best way to do this.
If we use the CLI to build individual apps, we can of course bring those apps in on the pages and where needed. However on the pages where we have the same component separated by non Vue items, it seems we'd need the exact same app multiple times and compiled this doesn't seem to work.
Whats the best route to do this. I'd like to just add a global wrapper to my site, compile a single APP and then house all logic inside components. This breaks down as it replaces my existing content with the app's content when it's a compiled app. I can on the core layout page just instantiate an app and that works, but then I can't use single file components.
Am I missing something. I'd like to use single file components, have a global wrapper on my site with existing content used and components only where needed, AND not have to import each component file one by one.
We cannot use WC builds either as we can't drop IE 11.
I've started a Microsoft fabric-react, using the Typescript-React-Started provided by Microsoft here.
Although the excellent Fabric-react documentation available here, i wasn't able to find any documentation on how to style the fabric-react components.
For example, the Microsoft documentation for the Commandbar component is available here.
The default theme renders the Commandbar background with a gray color, with blue command buttons.
From what i could understand, Microsoft provides a Themes/Styling system.
Unfortunately, i wasn't able to find any start-to-end example, on how to change the default theme, or create a custom theme.
So, my questions are:
How can i change the default theme, and apply a specific theme on a fabric-react component?
How can i create a custom theme?
Thanks for using Office UI Fabric React! Have you had a chance to read these wiki pages regarding styling and applying a theme to components?
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
https://developer.microsoft.com/en-us/fabric#/components/themes
You can also generate your theme via https://developer.microsoft.com/en-us/fabric#/styles/themegenerator then apply it using the method described in the page(s) above.
This is a copy of Microsoft response on Github, so the merit is not mine :)
Current
Use loadTheme to provide component wide colors and fonts.
Use styles prop for components for one-off tweaks.
If you'd like to provide a standard styles override for a specific component type, you can use Customizer to provide scopedSettings to pipe in standard overrides. (Not this is experimental and will likely change.)
Legacy className / global css support still works, which is to use className to provide your own class overrides, and to reference global class names as needed. Though this is an option, this is is not recommended, as it's very fragile and suffers from numerous issues (selector specificity, no build time validation, easy to break, etc.) We're considering removing the global class names completely in a future major release.
In progress
Our goal is to move all customization into the theme; this lets you rev your design over time. We are tracking a bunch of work here: https://github.com/OfficeDev/office-ui-fabric-react/projects/26
The problems we've recognized
Customizer for providing contextual overrides is too generalized, and doesn't allow us to have theme-specific logic like caching themes.
ITheme should be expanded to allow you to pipe in component-specific overrides, in addition to other site-wide settings like sizing, shadowing, and animations.
Passing in styles is not a good contract; you need to know which component parts to target for the styling (sometimes multiple parts) and sometimes which selectors to override (do i use a pseudo element here? is my selector not specific enough?)
No support for color schemes (think the "dark header", where the Toggle should look different than in the "light content area".
Solutions to shortcomings
Expose a dedicated ThemeProvider component. We will still have loadTheme for providing the default theme, while ThemeProvider can switch out scheme, or even theme in a box.
Add support for color schemes.
Introduce style variables, which abstract the common knobs from full styles definitions. This lets you not worry about parts or selectors, and simply focus abstractly on what the component should look like. We have this experimentally in our Button and Toggle refactors in experiments.
I am currently building a WP site with the Optimizer theme. It's an academy website, using the Sensei plugin. I am having an issue with the wrappers, and although they wrote this article on how to fix it, I can't figure it out.
Hopefully I'm saying this right.
Wordpress hooks are triggers that allows you to manipulate a theme or plugin. You can remove, add or replace code on certain Worpress events/calls, without changing the original code.
There are two kind of hooks. Action hooks to manipulate the Worpdress code. Filter hooks to manipulate the output of Wordpress (text, data, links etc.)
You can use hooks by creating Your own functions in the functions.php file of your theme.
The Sensei article:
Your theme creates a wrapper with html divs around the content. The opening divs are after "getheader();" The closing divs are before "getsidebar();", if there is no sidebar then before "getfooter();"
Sensei puts a wrapper around his content as well. This can mess up your theme wrapper.
To fix this: Sensei has actions hooks to replace the wrapper of Sensei by your own theme wrapper.
My first problem is that I can't even seem to get a full background image to work for individual modules of type "DnnModule DnnModule-DNN_HTML". Of course I could give them all the same background-image by targeting the DNN_HTML class, but I need to be able to use different background-images on different HTML modules (I need a green, a blue, and a tan). So I need a way to target the HTML modules being used individually? Is there a way to do that? (I am a newb, so please go easy)
Then, the ultimate goal is to have the client able to pick and choose which color module they want to use throughout the site.
Of course I could code an HTML module with the different backgrounds in-line, however, there are various other divs that surround that HTML module, and therefore, the background-image I set in the module using the editor is tiny, and does not cover the whole div.
I'm also not sure if its best to make the client a template with different colored backgrounds they can use already layed out in "bucket" containers for them, but I don't think they could switch the order around could they?
Is there any way at all to accomplish this? Any help would be really really appreciated.
This really would normally be handled by the Container system within DNN.
I would create 3 different Containers for the colors in question, and then instruct the customer how to choose the Container in the module settings for each of the modules that they want to change the BG for.