I want to apply custom css to my calendar control. I have applied the same at corresponding locations for e.g.
e.Cell.CssClass = "highlight";
clndrEvt.TodayDayStyle.CssClass = "currentDay";
clndrEvt.OtherMonthDayStyle.CssClass = "OOB";
clndrEvt.NextPrevStyle.CssClass = "dayTitle";
However when i render the control, my styles are not reflected.
When i check 'View Source' it applies my classes (italic) and ALSO applies in-line styles (underlined) along with it, which overwrites my styles. For example,
class="highlight" align="center" style="color:White;background-color:Silver;width:14%"
Can anyone help me out with this? To be very specific how to remove those in-line styles (by using which properties) from the HTML by settings properties of calendar control.
I have tried few, but that did not work.
e.Cell.Attributes.CssStyle.Clear();
e.Cell.Attributes.Add("Style", string.Empty);
clndrEvt.Style.Clear(); // clndrEvt is my calendar control
I had a similar issue recently with a project I had inherited. I worked out that the styling was being added via the Master.skin in app_themes. Might be worth a check there.
Related
I'm working on a project for school where one is able to create HTML elements by using Selection.js (visual selection turns into an HTML element). Currently, the user is able to write CSS in a CodeMirror editor. After the user applies the CSS by clicking a button, the styling is directly inserted onto the created React component trough props.
My main goal is to allow the user to create multiple elements with multiple styling rules, to then (in the end) export the created elements along with their styling.
I've imported JSS, because of the createStyleSheet function that generates styling based up on a JavaScript CSS object (which comes from the CodeMirror input) and because of the fact that the directly injected style trough props is not reusable (because it doesn't contain classes, just properties). The problem with JSS is that it generates styling in the form of .mySpecialClass-0-1 {...}
This is the code that I'm using when the user applies the style (on click).
onStyleInput(e) {
e.preventDefault();
try {
let style= cssToObject(this.codeMirror.getValue(), {camelCase: true});
this.styleSheet = jss.createStyleSheet(style, {link: true}).attach();
console.log(this.styleSheet);
}
catch (exception) {
// console.log("Something went wrong, check your css syntax");
console.log(exception);
}
}
The result I expected from JSS was styling in the form of .mySpecialClass {...}, without the unique id's.
I've been looking trough the JSS API, but there doesn't seem to be an available boolean to toggle the unique id generation.
Is there a better way of achieving my goal?
Thanks in advance!
The easiest way to have JSS classes without ID is, make it as "Global" styles. It is mean, we have global CSS styles which not attached individually to the elements. Rather than just put/set HTML className without really utilizing JSS result. They call it "Global selectors" at "plugin" section at their documentation pages.
You can find documentation here: https://cssinjs.org/jss-plugin-global?v=v10.0.0-alpha.7
I have problem with client side in Task list in Sharepoint 2013. I need to distinguish maintask (set the background color for example). I tried to change styles ".ms-listviewtable .ms-itmhover" and ".ms-alternating" in core15v.css, but did not get the expected result. How i can solve this problem?
It's best to leave core15 as is OOTB and add a new stylesheet with your overwrites. Make sure this new stylesheet is called after core15 in the masterpage and use the inspector in your browser to make sure you're getting the entire selector. If you write new properties for .ms-listviewtable but core15 uses #s4-workspace .ms-listviewtable, the one defined in core15 will take precedence as a more specific selector.
Is there a way to set this kind of properties in css?
So I can use the same calendar and be more organized with my code
<asp:Calendar ID="Calendar1" runat="server" Height="189px" CssClass="Calendar"
ondayrender="CalendarRender" TitleStyle-BackColor="#00718F" TitleStyle-ForeColor="White" ShowGridLines="true" TitleStyle-BorderStyle="Solid" TitleStyle-BorderWidth="1px" TitleStyle-BorderColor="Black" SelectedDayStyle-ForeColor="#281dc9" SelectedDayStyle-Font-Bold="true" DayHeaderStyle-BorderColor="Black" DayHeaderStyle-BorderWidth="1px" DayHeaderStyle-BorderStyle="Solid"
onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
Assuming you're talking about properties such as:
TitleStyle-BackColor="#00718F" TitleStyle-ForeColor="White"
... etc..
Your best bet would be to render the calendar to a page, check its source and see what style it adds. You can then extract this out for use in CSS.
UPDATE
This page has some of the selector names for you, along with what they control ASP.Net Calendar Control Custom Theme Format using CSS
If you want to be more organized, and don't want your project to become like 'spaghetti' in future, use CSS file for css properties. Do not embed this properties in headers, unless this is the only way to solve current issue. This is bad for you, and for all who will work with your project.
I've met lot of legacy projects, wasting too much time to find why some dom element's behaviours differs from what I need.
Just specify CssStyle property in your aspx markup, and it will be mapped to real css class.
And add description for this class in css file.
I'm customizing a NewForm.aspx page and I've created a few new SharePoint:FormFields in the form of textboxes. I'm looking to customize the height of these boxes on a case-by-case basis, but I can't figure it out.
I've looked into DisplaySize, but that only controls the width of a specific textboxe, and I've seen adding in:
style> .ms-long{width:100px;} </style>
but that changes every SharePoint:FormField size, not just one.
Any help would be great! Thanks!
I've done this before using jQuery. With jQuery you can query dom elements (ie. fields) by an attribute of your choice (e.g. the attribute title) and the manipulate it. See Jan Tielens Series about integrating SharePoint and jQuery. http://weblogs.asp.net/jan/archive/2008/11/20/sharepoint-2007-and-jquery-1.aspx
Or just google sharepoint + jquery.
Telerik RadControls have builtin support for skinning and uses CSS to style all their controls. However, when plugging these controls into an existing website, what is the best way to merge the styles of the existing site with RadControls own styles?
Update: Given the following options (thanks to Zhaph):
Add the RadControl's CSS to my site
Make the RadControls look more like my site
Add my sites CSS selections to the RadControl style lists
What would be the best option?
Option 2 would require that I maintain two sets of styles going forward.
So preferably option 1. That would enable reuse of the RadControls style system across the site, e.g. have buttons and simple controls look the same.
Update 2 (moved from my answer):
I ended up doing a combination. Using the FormDecorator enables reuse of the RadControls styles on my own buttons and inputs. Also, copying the skins provided by Telerik into my ASP.Net theme enabled customizing the skins.
I have to admit, I've not used the RadControls for some time - we used the CMS RadEditor on a few CMS sites, and that could automatically pick up your style sheets, and add the classes to its list, or you could add some manually.
Looking that the documentation, some bits might help:
RadEditor CSS Classes and Their Use - Although usually these are added automatically by the controls I thought?
The link for 1. also tells you how to do this
A couple of options
External CSS Files, which states "By default RadEditor for ASP.NET AJAX uses the CSS classes available in the current page", but also shows how to load other style sheets.
Using the ToolsFile.xml - Scroll down to the <class> element.
I just wanted to add; the FormDecorator only applies css to certain types of controls. If you have a control that isn't styled you can access the Telerik resources like this:
.cs File - have a public property like follows:
public string HeaderDivBackgroundURL
{
get
{
{
string backgroundURL = string.Empty;
string skin = ((MainMaster)Page.Master).AppSkin;
backgroundURL = Page.ClientScript.GetWebResourceUrl(typeof(RadSplitter), "Telerik.Web.UI.Skins." + skin + ".Splitter.slideTitleContainerBgr.gif");
return backgroundURL;
}
}
}
In the aspx page (in a RadCodeBlock), just have an internal style sheet to read from that property:
<tel:RadCodeBlock runat="server">
<style type="text/css">
.telerikBackgroundMock
{
background: url('<%= HeaderDivBackgroundURL %>') repeat-x;
}
</style>
</tel:RadCodeBlock>
I found this very useful for applying Telerik skins to non-Telerik control in a way that would still be dynamic and change with any skin changes.
As an update to this thread, there is now an online "Style Builder" for the Telerik AJAX and MVC tools that enables visual configuration/customization of the built-in skins:
http://stylebuilder.telerik.com/
This tool eliminates the need to understand CSS class definitions for each control and lets you easily customize one of the built-in themes to better match your site.