Background
We currently have large client site in Optimizely (ASP.NET MVC) which hosts many, smaller sites, for their regional markets and large, important customers.
Currently, there are various themes that are built by our front end guys (SASS -> CSS) and a dropdown per site in Optimizely that allows us to set the theme - it simply renders this value in the master layout and thus the page requests the corresponding style sheet.
Due to the time it takes to develop these themes for the whole site, the client has requested that for newer sites, we have the ability to set a few basic colours (primary, secondary and tertiary) that can be set, per site, in Optimizely.
So for their customers that want a completely branded site, they can pay and have a custom theme (colours and structure).
The rest will use a generic theme (structure) with the colours taken from Optimizely.
The question
Is there a simple way of getting colours defined server side into the transpiled CSS. Adding the colours to the page is not a problem if required but I see no way to get CSS to pick this up. (I tried adding a colour variable defined in the SASS to the master layout but the CSS didn't pick it up as expected).
Possibilities
Obviously, I could render the specific CSS classes to the page with the colour property set and marked with !important to override colours set in SASS.
But, we obviously use variables in SASS so colours do not have to be defined (or overriden) in a thousand places.
We could modify the CSS at runtime when colours change in the CMS (alas, CDN). Or use Javascript to change the colours after the page has loaded (meaning original colours would be visible until the JS kicks in). Both these methods I could do but they seem clunky.
This seems to be something that "should" be simple but I've not found anything online that helps.
Is this something anyone has had to deal with? Any clever solutions I've not thought of?
Cheers
We ended up resolving this with CSS variables as suggested by #Pete.
We allowed a hex ref to be entered into the CMS for a colour, converted that to a .net Color, and created an extension method to allow us to extract the individual H, S and L components. These were added as the values of CSS variables in the view, and the SCSS used these variables to either define a colour or manipulate it first.
Related
I have set up two different websites on one Umbraco instance, but I want them to use slightly different stylesheets. I found this blog post:
http://www.spacebetween.co.uk/blog/2016-10-27-journal-of-a-junior-multisite which attempts to demonstrate how this can be achieved.
However, there are two bits of code given without any direction as to where to place them. I've tried a couple of different places but with no success. I'm hoping someone who knows more about Umbraco and MVC than I do will look this over and explain how it should work because I'm at a bit of a loss.
You can achieve this in a lot of different ways, depending on your needs
Easiest way would be defining a new dropdownlist property on root node level where the content editor can select the stylesheet (or theme) and let the master page retrieve this property and match the path to the stylesheet directory.
If you need more than just stylesheet changes, you can consider defining different templates for the sites. You can select multiple templates for your documenttypes.
The most advanced way would be creating a new ViewEngine that changes the entire theme of the different websites (master pages, views and partials). But this would some work.
We're starting a website project and came accross the paid Rio theme.
What we're wondering is how far can we go in customisation without having to touch the theme's CSS, and if buying the layout and theme is worth in our case at all.
Rio is not specifically the only option we want, we just want to be able to do the following:
We'd like to change the look of the website depending on the logged in user.
Theme customisation:
The .ui-panel-titlebar ("Downloads" example in Rio's Dashboard page) seem
to be hardcoded to be purple #5C6BC0. Is there any chance to change
that background by adding or changing a class? The important part is
that we don't change the core CSS files of the theme and preferably
don't create additional CSS classes nor make use of precompiling
frameworks.
Can we edit the logo on top left only to make the menu move slightly to the bottom? I tried with a bigger image through Chrome's
DevTools but the image overlays to the bottom.
Is is a good practice to think this way: We're thinking to have a WebpageThemeController with methods that would return the correct
class strings depending on the user, to put in the different parts of
the website.
Is considering Primefaces' layout+themes good in this case? If not, how should we proceed?
Thanks
Next version of RİO will have less integration to easily customize colors, fonts ...
You can even use multiple layouts per user by the way, here is a tutorial;
https://youtu.be/jbNdtndIsqk
I was wondering if you can give me any pointers on how to write a firefox plugin/add-on, that would change the layout of the page one is on, based on a pre- written CSS file.
It's meant as a prototype and what I want to be able to do initially is to make my browser automatically change the background color of certain div's, when I navigate to the chosen page. I'm only trying to make it work for a couple of sites.
I speak python, javascript/jquery, css, html ..
You may be able to accomplish your goal using the Stylish addon without writing your own. This basically allow you to attach custom CSS overrides based on a URL pattern.
If you want to do this and write your own extension, you could use the addon-sdk and make use of page-mod. Here is a tutorial that will help you with running the script only on the URL's you specify. As of FireFox 34 you should be able to attach actual CSS files instead of having to rely on JavaScript. Learning the addon-sdk it a lot less intimidating than making an old style / low-level extension and should be sufficient for your needs.
There are a few different ways to accomplish similar things, so you will need to experiment based on your needs.
We all know that we're supposed to combine our CSS into one file, but per site or per page? I've found pro's and cons to both.
Here's the scenario:
Large site
CSS files broken out into one file for global styles and many for modules
Solution A: Combine ALL the CSS files for the whole site into one file:
Best part is that the one file would be cached on every page after the initial hit! The downside is that naming convention for your selectors (classes and id's) becomes more important as the chance for a namespace collision increases. You also need a system for styling the same module differently on separate pages. This leads to extra selectors in your CSS which is more work for the browser. This can cause problems on mobile devices like the iPad that don't have as much memory and processing power. If you're using media queries for responsive design, you're troubles compound even further as you add in the extra styles.
Solution B: Combine one CSS file per page template:
(By page template I mean one layout, but many different pages, like an article page)
In this scenario, you lose most of the issues with selecting described above, but you also lose some of the cache advantages. The worst part of this technique is that if you have the same styles on 2 different page templates then they'll be download twice, once for each page! For instance, this would happen with all your global files. :(
Summary:
So, as is common in programming, neither solution is perfect, but if anyone has run into this and found an answer I'd love to hear it! Especially, if you know of any techniques that help with the selector issue of Solution A.
Of course, combine and minify all the global styles, like your site template, typography, forms, etc. I would also consider combining the most important and most frequently used module styles into the global stylesheet, certainly the ones that you plan to use on the home page or entry point.
Solution B isn't a good one: the user ends up downloading the same content for each unique layout/page when you could have just loaded parts of it from the last page's cache. There is no advantage whatsoever to this method.
For the rest, I would leave them separate (and minified) and just load them individually as needed. You can use any of the preloading techniques described on the Yahoo! Developer network's "Best Practices for Speeding Up Your Web Site" guide to load the user's cache beforehand:
Preload Components
By preloading components you can take advantage
of the time the browser is idle and request components (like images,
styles and scripts) you'll need in the future. This way when the user
visits the next page, you could have most of the components already in
the cache and your page will load much faster for the user. There are actually several types of preloading:
Unconditional preload - as soon as onload fires, you go ahead and fetch some extra components. Check google.com for an example of how a
sprite image is requested onload. This sprite image is not needed on
the google.com homepage, but it is needed on the consecutive search
result page.
Conditional preload - based on a user action you make an educated guess where the user is headed next and preload accordingly. On
search.yahoo.com you can see how some extra components are requested
after you start typing in the input box.
As far as the conflicting selectors go: combining all the files and doing it any other way should not make a difference, this is a problem with your design. If possible, have all modules "namespaced" somehow, perhaps by using a common prefix for classes specific to the module, like blog-header or storefront-title. There is a concept called "Object-oriented CSS" that might reduce the need for lots of redundant CSS and module-specific class names, but this is normally done during the design phase, not something you can "tack on" to an existing project.
Less HTTP requests is better, but you have to take file size into consideration as well as user behavior and activity. The initial download time of the entry page is the most important thing, so you don't want to bog it down with stuff you won't use until later. If you really want to crunch the numbers, try a few different things and profile your site with Firebug or Chrome's developer tools.
i think you can make global.css that store style that need every template.
And you could make css in each template.
Or simply use css framework like lescss
What is the best approach to have a different CSS dependent if the person is disabled?
For example larger text, different colours etc.?
Check out the Canadian National Institute for the Blind site: http://www.cnib.ca/en/
They have implemented some good features, such as
changing contrast
changing text size
skip to content
tables for tabular data only
For the most part, this is just switching out stylesheets as needed.
If you do this, you should probably use cookies to maintain preferences across the site.
Importantly, you should place the links for these options are the top of the page, where they will be easily accessible, both to view and through the tab structure.
There's a jQuery styleswitcher with cookies to keep the users' preferences here: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/ and a method for implementing one in an accessible way here: http://www.alistapart.com/d/bodyswitchers/iotbs.html
However, you should be making sure that your standard site colours, font size, etc are meeting a basic level of accessibility to begin with. WCAG2 Level A at a minimum, and high-contrast/text-size etc as an optional extra. If users are having trouble perceiving your site to begin with, finding and using the styleswitcher is just another difficult task for them before they can get to your content.