Best way to style a page based on user details?

Question

User-1759548294 posted

I'm very new to using MVC and Web Applications so I'm attempting to try out a few things and learn as I go. 

I am creating a football web application and I want the CSS for pages to be specific for the users in the way that if they were to choose a specific team that they support then the pages would be styled in that team's colors for example if I set my account as being an Arsenal fan then I would like to have the color scheme as Red and White, Manchester City as Blue and White, Aston Villa as Claret and Blue, etc. I imagine that it would be possible to make different style sheets for each team but feel as though that would be inefficient. any ideas as to how i could tackle this would be great, Thanks.

Answer 1

User-474980206 posted

you are on the correct track, by creating themes. typically, you would do a base css, and then a theme (override) css for each team. using a CSS processor like less or ssas make this easier. this would allow defining just defining a variable file for each team. 

 

Answer 2

User1520731567 posted

Hi MBoz96,

Install bootstrap through visual studio Manage Nugget Packages and you can utilize free themes available.

Lot of free themes are available in https://bootswatch.com/.

Download a CSS from the mentioned link and replace the one in your bootstrap CSS folder. 

Or you could also write your own CSS style file based on different football teams..

Then you could invoke these CSS files in different Layout.cshtml and judge them in _ViewStart,csthml.

Current theme in MVC is decided by the styles specified in _Layout.cshtml file.

Usually this file lies inside Views\Shared path. The _ViewStart.cshtml which lies directly under Views folder decides which layout should the view use.

For example:

(here I use diferent Layouts on different actions,you can modify it into your judgment statement)

In _ViewStart:

@{
    //Layout = "~/Views/Shared/_Layout.cshtml";

    var action= HttpContext.Current.Request.RequestContext.RouteData.Values["Action"].ToString();
    if (action== "Contact")
    {
        Layout = "~/Views/Shared/_Layout2.cshtml";
    }
    else if (controller == "About")
    {
        Layout = "~/Views/Shared/_Layout3.cshtml";
    }
    else
    {
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

}

How it works:

Best Regards.

Yuki Tao