I'm using Telerik RadControls for ASP.NET and wondered if there was any way to turn off/stop the CSS that is automatically downloaded with the controls.
I don't want to remove any of the class names that are applied to the telerik HTML elements, I just want a clean slate so that I can style them exactly how I want.
The reaon I ask is that I'm trying to apply an font enlarger for people with impaired vision to my site. I can overwrite the current styles with something like:
html body .RadInput_Default .riTextBox, div.RadComboBox_Default input.rcbInput {
font-size: 0.9em !important;
height: 1.4em !important;
line-height: 1.3em !important;
width: 6em !important;
}
I have to write !important to overwrite the styles that are coming down with the .axd file taht comes down with the Telerik control. The problem with this though is that if I try and enlarge the font (I'm using javascript to increase the default size of the font in ems) the font-size for the Telerik control always remains at 0.9em.
Any ideas?
Thanks for your time
That each telerik control has:
EnableEmbeddedSkins
EnableEmbeddedBaseStylesheet
Setting both of these to false will disable all of telerik's embedded stylesheets.
A quick warning though - some controls, e.g. the panelbar, won't work without some of the built in CSS (the expanding/collapsing of child elements won't work) unless you add the necessary styles yourself, so tread with care.
More info can be found here:
Disabling embedded resources - especially the part entitled "Disabling embedded skins".
Related
I'm developing a small control which is directly embedded in a parent page (without iFrame).
My control is written using react-bootstrap, so the bootstrap4 css is also embedded along with my control.
While developing my app as standalone, everything was fine.
After embedding it however, it turns out that there are some "global" bootstrap styles, such as the so called "list-styles" that don't get applied only on HTML elements having bootstrap classes, but instead on any matching HTML tag.
This causes the parent page's layout to get scrambled once my control is loaded.
Examples for bootstrap classes that are applied globally and which cause problems for me are styles like these which can be found in the bootstrap4 default css:
dl, ol, ul {
margin-top: 0;
margin-bottom: 1rem;
}
or
label {
display: inline-block;
margin-bottom: .5rem;
}
This is very unfortunate for my use case. Is there a way for getting rid of any styles in bootstrap, which are not linked to any proper css bootstrap class? I don't want any styling of HTML tags that are not explicitly linked to a bootstrap class.
Thanks for your help.
I can think of three options, though I'm not sure they will do for you:
Paste Bootstrap's styles into a local file (instead of getting them from a CDN or something) and delete what you don't want (most of the unwanted styles should be at the top of the file)
Look for another, more minimal version of Bootstrap. I don't know if such versions/customizations exist but they very well might
Don't use Bootstrap. You can just as easily write your own css lines (personally I find that Bootstrap makes you lose control over your styling, but that's my opinion)
I had thought that TinyMCE was supposed to remain untouched by the Diazo theme, however some CSS from somewhere is leaking in and making certain functions harder to use. One such example is below, the line height on all the rows has become super short, making each row hard to select.
In Firebug, I can fix this by adding a min-height value here, a value set in dialog.css:
.radioscrolllist .list {min-height: 2em;}
However, I cannot find where to actually set this and have it stick. I've tried putting it in the Diazo theme style.css, in ploneCustom.css, and customizing both portal_skins/tinymce/themes/advanced/skins/plone/dialog.css and portal_skins/tinymce/plugins/plonebrowser/css/plonebrowser.css — none of these seem to do the trick though.
Any ideas on how/where to make this fix? The problem only shows up on the Diazo version of the site, not from the unthemed version. It looks like the only CSS files that load on the TinyMCE iframe are:
dialog.css
plonebrowser.css
columns.css
This is what I have in my project CSS to deal with a similar issue, though I find different issues on each project depending on what I do with the general CSS & columns in particular:
/* Fix TinyMCE gremlins */
#internallinkcontainer div.row {
/* Image browser was jumbled */
float: none;
}
#content #internallinkcontainer .list.item span,
#content #internallinkcontainer .list.item a {
/* Link browser was packed too much */
position: inherit;
}
#internallinkcontainer input[type="radio"] {
vertical-align: middle;
}
/* #end */
Which get's my Link Browser looking like this again:
Apart from the Diazo-CSS troubles, it sounds like you might be having trouble with
plone.css getting cached. The following is from the developer manual with amendments by myself that have not yet been pulled in.
plone.css
plone.css is automagically generated dynamically based on the full portal_css registry configuration. It is used in e.g. TinyMCE to load all CSS styles into the TinyMCE in a single pass. It is not used on the normal Plone pages.
plone.css generation:
https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/skins/plone_scripts/plone.css.py
Note: plone.css is #import-ed by dialog.css which "hides" it from a browser refresh of a normal Plone page, even when Plone is in development mode. This means you may find you do not see your CSS updates within the TinyMCE plugin (e.g. in the link/image browser) whilst developing your theme. If this is the case, then simply do a hard refresh in your browser directly on: /plone.css to clear the cached version.
I just faced the same issue last week. My workaround was adding this in my theme's CSS (the tinymce dialogs are not part of the iframe that contains the content being edited; they are in the main frame):
#internallinkcontainer.radioscrolllist { line-height: auto !important; }
#internallinkcontainer .list.item span, #internallinkcontainer .list.item a { position: static !important; }
(Clearly we should find a less hacky solution, but I haven't had a chance.)
You almost answered it to yourself: You can customize column.css, that'll work, no important-declarations needed.
Additionally this seems not to be Diazo-related, the ploneCustom.css will also not be delivered to the dialog-window in a non-diazo'ed site, hmm.
Currently I am working on RadCalendar. My requirement is Calendar has to be started from current month and we should have only NEXT navigation button. When user navigates to next month, then the PREV navigation icon had to be displayed along with NEXT navigation icon.
How can I achieve this????
For test purpose I created a TelerikStyle.css and placed the below code:
BODY
{
margin: 0px;
padding-left: 0px;
font-size: 32px;
font-family: Arial;
}
.MyRadCalendar .rcTitlebar a.rcPrev
.MyRadCalendar .rcTitlebar a.rcFastPrev,
.MyRadCalendar .rcTitlebar a.rcNext,
.MyRadCalendar .rcTitlebar a.rcFastNext
{
visibility: hidden;
}
And I am creating this Radcalendar dynamically. So I tried to attach to apply this CSS Styles to Radcalender through below way.
_myCalendar.CssFile = "~/stylesheets/TelerikStyle.css";
_myCalendar.TitleStyle.CssClass = "rcTitlebar";
But my navigation buttons are not hiding. So please tell me how to apply CSS Styles for Radcalender dynamically. And How to achieve my above requirement?
Each of the Telerik Skins actually have a minimum height and width setting for the RadCalendar in order to ensure that the visual styles of the control are not broken.
As you can imagine modifying the width and height to arbitrary settings could skew the look and feel of the control quite a bit.
What you can do, however, is either modify one of the existing skins or create your own.
This section http://www.telerik.com/help/aspnet-ajax/calendar-custom-skin.html in their online documentation covers how to change the appearance, and the specific article covers how to create a custom skin.
Thanks
AB
I have created a UI (for wordpress plugin) in which I give user choice to add text, image, and video in a div ( lets call this div, container).
I have been working on it for a quite sometime. I recently added tinyMCE (WYSIWYG editor) to add text inside container.
Now, I realized that I did a big mistake. The text user writes is being overridden by css rules defined for wp admin panel.
for example,
User enters <h1>Hello</h1> (with the help of tinyMCE), and then I grab that content from tinyMCE and append that in the container.
But here the problem arises, wordpress's admin css can have css rule like this,
h1 {
color : #d6d6d6;
line-height: 40px;
font-size: 30px;
}
So, it looks different in tinyMCE and in my container. (as tinyMCE's code is inside iframe and that remains unaffected by wordpress's css rules, but my container doesnt)
I want something so that any element inside container remains unaffected by wordpress's admin css.
I know a good solution would be putting container inside iframe. But I have written a lot of code without thinking of an iframe and I would need 3-4 days just to adjust everything for iframe. There may be some cross browser issues.
I can reset some wordpress rules, but it will fail sometimes, as user may enter anything. I need something fullproof.
well if you want to undo a specific rule (say the h1 rule you mentioned) you can use css to override it by being more specific.
.container h1 {
color:#000000;
line-height: 24px;
font-size: 24px;
}
This will overwrite the css rule you mentioned with the given values but only when the element is inside the container class, (I'm guessing at the default values you want to use.)
Unfortunately you would have to add in an undo rule for everything that wordpress's admin css changes.
Another possible solution is to edit the page tinyMCE returns in it's frame to add in wordpress's CSS file. This means the end user will see the same formatting when they enter the information as when it gets posted.
Do you have code-level access to the iframe contents tinyMCE creates?
Use !important in your CSS document. This way your CSS will not be overridden as it takes precence over everything, including inline styles.
h1 {
color:#ff0 !important;
}
I have a Sharepoint 2010 intranet and I am designing the current template with my own css file. I have added my custom css file to the style library and have added this piece of code in a masterpage at the end in my tag:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>" runat="server"/>
Now I always need to add the !important tag in my css classess which are also used in the default sharepoint css file. I dont want to have to do that every time. Is there some solution where I can override my own custom css over the default sharepoint css file?
After your page is rendered by SharePoint in the browser, view the source. It is likely that your CSS page is listed before out of the box style sheets like corev4.css.
To rearrange this ordering try:
<SharePoint:CssRegistration
name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>"
after="corev4.css"
runat="server"/>
For more information on the After property, see:
CssRegistration.After Property
SharePoint CSSRegistration or Link?
What is new with the CssRegistration control in SharePoint 2010
This sounds like a CSS specificity problem. This article has lots of helpful explanations of the subject.
If you have written the same rule into your external style sheet
twice, than the lower rule in your style sheet is closer to the
element to be styled, it is deemed to be more specific and therefore
will be applied.
e.g. In the following case, the padding would be set as 10px, not 5px.
#content h1 {
padding: 5px;
}
#content h1 {
padding: 10px;
}
To fix your current problem, either as Dipaks suggested add your css directly in the page (as this would take preference over external css files), or even better, and more simply, just add the reference to your css file after the reference to the Sharepoint css, in which case, if they have equal specificity, your css would be applied.