DotNetNuke uses quite a few preset classes like .Normal, .Head, .SubHead, etc. in spans inside other classless spans etc. that I find really annoying and rather than figuring out how to work with them I'm considering overriding them by having them all inherit their styles from their parent, but I'm curious if others have already given this a try and have stories to tell of success or fallen foul of something on the module / admin end that makes this a fruitless task?
Thanks,
Steve
This really depends on your project. If you're developing a commercial product, my recommendation is to learn how to work with the styles so that you have high compatibility with the DotNetNuke core as well as third party extensions (skins & modules).
I would say if you have complete control over the site it may well be worth it to you to follow your own conventions and bypass the DNN selectors altogether.
That approach would be to create skins and containers that define regions with specific class names. You could then define styles for elements within those regions based on what the element actually is rather than what class is applied to it.
You will probably want to clean up or remove the contents of the default.css file as well (\portals_default\default.css).
I would add another stylesheet that appends or overrides the default styles. This way, you can recast the default styles without editing the default stylesheet.
Use the cascading nature of CSS to your favor!
In cases where styles are new, make sure to namespace them with an outside container.
Related
Bootstrap 3 CSS is typically used site-wide or application-wide. Knowing this, I designed a tool that HAPPENS to use Bootstrap in a sample application. This is after going through requirements processes. The explicit design was "It happens to use Bootstrap in this example, but the target user would likely provide their own styling rules."
However, the results looked great and the powers that be have asked, "can this tool be included on any arbitrary page and still look like this?"
The short answer of course is "no". Bootstrap's styles do all kinds of things like using border-sizing: border-box on a wildcard (*) selector. This is going to mess with people's existing CSS if it's not already built on Bootstrap.
Is there a way to encapsulate Bootstrap styles so that they're restricted only within that particular tool/widget? So in the div <div class="bootstrappy">, everything is affected by Bootstrap classes and outside of there, nothing is? The goal is to be able to include my Bootstrap-styled widget on a page that didn't previously include Bootstrap, without modifying what was there previously.
It's OK if I have to do this as part of a build process (I am using Grunt right now, so that'd be the best option for me); what I'm looking to avoid is manually combing through Bootstrap in order to cull or modify element-level rules so that they don't stomp over a whole page.
I have already built a site using CSS. Now looking back I regret not taking the chance of using Bootstrap. My website is already built and styled. My questions is, is it possible to use bootstrap even though you already have styled you website without having to remove all the CSS?
Bootstrap uses a set of pre-configured classes to implement it's styling rules..
So unless you somehow incorporated the same class names in your site and intended the same styling as was intended by the Bootstrap developers, you are going to have to make the necessary changes on your own.
That said, if your project is intended to be extended in the future, it may still be a good idea do re-work what you did up until now with Bootstrap, in order to save time in the future (I am assuming that the project is not very large in scope).
There are few things you need to know:
Bootstrap uses box-sizing: content-box so if you are not, it will probably impact all your padding/border stuff.
Bootstrap comes with a reset and few helpers with generic names that can interfere with your own style.
That said it's totally ok to add bootstrap to your project and it should be smooth.
Our development team recently took on the task of refactoring our enormous CSS file so that it will be more manageable in the future. I came up with a small list of subtasks, one of which is:
Remove the styles that aren't in use.
The problem is, I don't know how to identify which styles are being used. Some styles don't appear to be coded anywhere, such as those found in third party controls. A solution-wide search does not find these third party styles (like the default styles that come with Telerik controls). We appear to have overridden some of these third party styles.
Short of deleting stuff and then checking every page to make sure that it looks identical, I do not know what to do. Is there a solid method for determining when a CSS class is in use?
In addition to the other online services, for local or privately stored projects you might find Helium.js useful.
I imagine changing the styling is a common requirement. Say a user wishes to change the background colour and the font style. I'm looking for a component fit into any flex application and edit the style sheets.
I know I can build one from scratch using the (get/set)Style methods and using the StyleManager class, however I didn't want to "reinvent the wheel." I assume there is a component that someone has already written - google hasn't thrown up a suitable candidate.
There's no such base component. Setting styles is very personal, so there's no common solution.
BTW, look up here
Since Themes in ASP.NET are used to style elements of your site, I was just wondering why would you use Themes rather than CSS, or is it common practice to use both? If so, when would you opt for one versus the other and why?
Just seems to me like Themes are kind of unnecessary, so I am just looking on clarification if there really is a good reason to use them, or it's just a part of the framework as an alternative(unnecessary) step to styling your site.
Imagine you have a site that, for whatever reason, uses dozens of asp:Calendar controls.
To style them with CSS alone, you'll have to set loads of properties on each one: DayStyle and TitleStyle and NextPrevStyle and on and on...
Using a theme will allow you to set all of those properties just once, and have it apply to every asp:Calendar on the site. The theme would contain the same CSS, but also the declaration of how to apply that CSS to server controls, which is something you can't easily do otherwise.
Of course, as Brian Hasden already said, you'll probably need some "global" CSS that lives outside of the theme (particularly if your site has multiple themes).
Themes have the benefit of being tightly integrated into the whole .NET environment so that things get themed without needing to specify their styles. It happen automagically like lots of other things in .NET. Based on that I can see the appeal for some people.
That being said, I personally never use the whole themes deal because I feel like it requires you to maintain two different sets of styles. One that's part of the theme and then others that are inevitably needed outside of the whole theming deal.
Maybe I'm just a control freak or dislike themes due to bad usage on previous projects.