I can apply a CSS style to an html link using
<link href="css/style.css" rel="stylesheet" type="text/css" />
Login
Is it possible to apply the same CSS style id loginCSS to the following control?
<div class="buttonCSS">
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/Admin/Default.aspx" >Login as Admin</asp:HyperLink>
</div>
I've tried the following
<asp:HyperLink ID="loginCss" runat="server"
NavigateUrl="~/Members/Default.aspx" >Login as Member</asp:HyperLink>
which gives error 'loginCSS' is not a valid identifier.
In your css, I'm guessing you have a style based on control names:
#loginCss{
//Your styles here
}
If you change it to be based on class name:
.NewLoginCss{
//Your styles here
}
You can reference it in multiple places using the .NET CssClass and HTML class attributes:
Login
<asp:HyperLink ID="loginCss" runat="server"
NavigateUrl="~/Members/Default.aspx"
CssClass="NewLoginCss">Login as Member</asp:HyperLink>
You probably want to avoid using IDs when dealing with .NET web controls as the IDs end up looking something like: ct100_blahblah_controlName_blahblah
So just use the CssClass attribute in the Hyperlink Control:
<asp:Hyperlink ID="hyp1" CssClass="className" />
And your CSS would be:
.className { color: FFF; }
I believe ID's are pretty reserved in the older versions of .NET which is why many backend devs prefer their front-end buddies to use css classes instead.
You can look up how to apply those on your elements, but I believe its CssClass="classname"
<asp:HyperLink ID="" CssClass="loginCss" runat="server"
NavigateUrl="~/Members/Default.aspx" >Login as Member</asp:HyperLink>
when you add "runat='server'"
all ids will be prepended with ContentPlaceHolder_
so if ur id before server side was "bla"
it will be "ContentPlaceHolder_bla"
and thats the name u should use for selectors on client side.
from server side the elements will still be available by old name.
You cannot have same ID of two ASP.Net controls. There are other ways to achieve your goal. A better approach is to use CssClass attribute.
Related
I am using jsonform (https://github.com/joshfire/jsonform) in order to generate forms from json schema, and the jsonform requires his own css for the form, but i am using another css for my site's template.
Is there a way to apply a css only on a specific tag ? for example only to the html inside ?
I am using rails, so the head is not changing from page to page.
thanks.
If you're using a CSS preprocessor (i.e. SASS, LESS, SCSS, etc.) then it might be an easy job to just indent your custom css under one class/id/tag. You can check this SO question: apply CSS style to particular elements dynamically.
Try this>>>
<link rel="stylesheet" type="text/css" href="theme1.css">
<link rel="stylesheet" type="text/css" href="theme2.css">
Inside theme 1 you would link to certain classes and in theme2 you would link to other classes. Please comment back if you need more help or this is not ideal
for example html
<div id="test" class="testing"></div>
the css would be
#test{color:red;}/*for ids*/
.testing{color:red}/*for classes*/
the styling in the curly brackets can be changed to what you want and the classes and ids can be in any external css if you link your page to it using link rel=
Yes you can. You need to give an ID to the body of your HTML doc if you want to target only that page, or give an ID or class to the element you need to.
<!-- HTML -->
<div class="your-class">
Your content
In the CSS:
.your-class {
your: style;
}
or
<!-- HTML -->
<body id="your-id-name">
<div class="generic-class">
Your content
/* using CSS */
body#your-id-name {
your: style;
}
body#your-id-name .generic-class {
your: style;
}
Hope it helps ;-)
Yes, offcourse there is, that's what CSS is all about.
If you add an ID or a class to the containing element that holds the form, you can add that ID or class to all the CSS selectors in the JSONform css.
for instance:
<div class="jsonform">
{json form goes here}
</div>
and then in your jsonform css, prepend '.jsonform' to all the necessary selectors:
.jsonform input.text {border:none...}
.jsonform input.submit {background-color:...}
I had a look at that jsonform css. I'm amazed that it just uses the complete Twitter bootstrap CSS, there's quite a lot of styling in there that will definitely override your own CSS. I would try to strip out anything that's not directly needed for the form, like body, img, p and h1 declarations.
Maybe the form works fine without the extra styling; you can then apply your own CSS to the form elements...
The CSS included with jsonform is Bootstrap, but the README.md in the /deps directory states that usage of this file is optional. As long as you don't include bootstrap.css in your HTML, you can style the form controls however you'd like/avoid Bootstrap overriding your own styles.
If you want to keep using Bootstrap for jsonform ONLY, you can try "namespacing" the Bootstrap styles using LESS or SASS. Have a look at the first two answers to 'How to namespace Twitter Bootstrap so styles don't conflict' for an idea how to do that with LESS.
I was just thinking of giving the users the feature to chose fonts from google and take the url, to use it in the template.
Is it possible to place a stylesheet link directly to a div?
Any help will be greatly appreciated!
Eg:
<div id="post" href='http://fonts.googleapis.com/css?family=Share+Tech' rel='stylesheet' type='text/css'>
</div>
Thanks in advance
No, you cannot add a separate stylesheet to an element.
You can use inline styling via the style attribute.
<div style="font-family:arial;"></div>
http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.2
Better yet, dynamically add a specific class based on the user input and style it in the global stylesheet.
This sounds very backwards, but I want to take existing CSS classes and make them inline in the element itself (The css styles and the html elements are in the same file). There is a reason for this, for which I will not go into detail.
Example:
<html>
<style type="text/css">
.p1 { height: 10px; }
</style>
<body>
<p class="p1">...</p> <!-- Remove class="p1" and replace with style="height: 10px;" -->
<p class="p1">...</p>
<p class="p1">...</p>
</body>
</html>
Keep in mind there can be many CSS classes, and many can belong to a single element.
Edit: The reason I'm doing this is because (based on our client) we want to generate PDF documents from an HTML template. The PDF tool we use does not work well with external CSS classes.
You are looking for Premailer (The source available as well) - it is a Ruby library that does just that (inlines CSS for HTML email - but the output isn't specific to HTML email - it should work just fine with your PDF document generator as well).
There is also lamson.html.HtmlMail if you are using Python and there are a variety of Node.js libraries available to do the same thing.
MailChimp has a page for this in their labs, the CSS Inliner -
http://beaker.mailchimp.com/inline-css
It does leave the class, however.
Is there a way to do something like this?
<input value="<span style='font-size:10px'>small text</span>
<span style='font-size:20px'>BIG TEXT</span>"
type="text" />
This code doesn't work. But can I mimic this?
Mixing styles within a textbox is not possible with pure HTML and CSS. What you'll need to look for is a third-party control for richtextbox. Just Google your platform (PHP or ASP.NET) to find one to your liking.
I have been looking at a couple html/css form frameworks like Uni-Form and Formy. They provide easier management of html forms. I was wondering if anyone knows similar ones. I am not looking for css grid frameworks nor Yahoo's YUI.
blueprintCSS has a form plugin (I don't know if it can be used alone, I haven't tried to do that). http://www.blueprintcss.org/
http://www.blueprintcss.org/tests/parts/forms.html
Baseline CSS also has a form system. I haven't personally used it.
just tried formy and uniform..
i want something styled a bit simpler, just to look clean so i can do the rest..
Formalize is another one, quite simple, worth a look.. looked at uniform and jformer and they're both too comprehensive, if that could be used as a reason to ignore them
Formalize
Uniform (different from Uni-Form)
There is also Tacit.
It's a "class-less" CSS framework were you only need a single <link> statement in your HTML and the web page will have a complete look. In particular, for forms, you get a more finished appearance out of the box, just by including the CSS file, and you don't need to attribute specific classes to your form elements. It also guarantees your form will work visually fine both in Desktop and in Mobile.
You can get an overall idea from the demo page.
Here are also a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/,
I think uniform is the best solution for forms.
Html is good and understandable, it has a bunch of tricky form examples solved very nicely ad it pays attention to usability much more than other frameworks.
Other seem to insist more on a vertical typographic rythm than common sense and usability. :)
There is also: Formy http://code.google.com/p/formy-css-framework/
I have developer a single class CSS framework just for forms. The class "form" can be added to any form input to style it properly. You can see the examples on the documentation: https://form.js.org
Here an example of mailing list form:
form {
margin: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/#codolog/form#1.0.0/dist/form.min.css" rel="stylesheet"/>
<form>
<div>
<div>
<input type="email" class="form" placeholder="Enter your email">
</div>
<div>
<button type="button" class="form full">Subscribe</button>
</div>
</div>
<form>