1

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.

gal
  • 759
  • 1
  • 12
  • 26
  • you can rename the id or put a class name for the css – airi Apr 10 '14 at 09:09
  • could you explain a little more please because it sounds like you need to add ids and classes – Mudassir Apr 10 '14 at 09:09
  • You can wrap specific html elements like: `
    YOUR HTML ELEMENTS
    ` and then prepend all the style sheet elements to be used in that div with `.wrapper`. So it will look something like this: `.wrapper .class1{` etc. then these styles will only be applied to the elements within the `.wrapper` div.     – Think Different Apr 10 '14 at 09:09
  • the css came together with jsonform, and it overriding some of my older css styles, is there a way to apply the whole css only to a specific class ? – gal Apr 10 '14 at 09:10
  • you just rename the class or id that using css for example
    or
    .. change the
    or
    – airi Apr 10 '14 at 09:12
  • So, was any of the answers helpfull? Did you manage to solve this issue? Please update this SO item; maybe you can check 1 of the answers as 'correct'... – Reinder Wit May 26 '14 at 13:08

5 Answers5

0

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...

Reinder Wit
  • 6,490
  • 1
  • 25
  • 36
0

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.

Community
  • 1
  • 1
mpcabd
  • 1,813
  • 15
  • 20
0

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=

Mudassir
  • 1,136
  • 1
  • 11
  • 29
0

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 ;-)

Giorgio
  • 38
  • 3
  • Yes, i know css element can be applied only to a specific class or id, but i dont want edit this css file, its a pretty big file, so i want to target it only to a specific class, possible ? – gal Apr 10 '14 at 09:24
  • Try to add an ID to the elements you want to target in your html doc and add the ID in your css styles before the class you need to target. – Giorgio Apr 10 '14 at 09:33
0

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.

Community
  • 1
  • 1
yetti
  • 141
  • 1
  • 4