CODEWITHSUNDEEP
jqueryhtmlcss
GeekedOut
GeekedOut

Reputation: 17185

How to change css styles of a jQuery plugin?

I have this test page: http://www.problemio.com/problems/problem.php?problem_id=305

I am trying to make the form towards the middle of the page look nicer. When I look at it in FireBug, there is a lot of padding space on the sides of that tabs from this div: 

<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

How can I change the space padding on the sides of the divs to be less pixels? Also, is there a way to make the black strip across the tabs all black?

Thanks!

Upvotes: 0

Views: 286

Answers (3)

Ryan
Ryan

Reputation: 2503

It looks like the padding is getting added because each form element is wrapped inside a paragraph <p> tag. The style is applied to just the p element in your stylesheet, so you can overwrite it with the following: #add_suggested_solution p {margin:0 0 0 0} . Note, replace the 0's with whatever your desired margin is.

What is the black stripe that you are referring to?

Upvotes: 1

Luc CR
Luc CR

Reputation: 1126

The lazy way would be to set important property in your css.

#tabs-1{padding-left: some lesser value !important}

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69915

You can override the css defined by jQuery UI css in your application css file or on the page. You can set the padding as below and override all the required styles in the same way.

.ui-tabs-panel{
   padding: 0px !important;//define the style as per your need
}

Upvotes: 2

Related Questions