ThemeRoller Mobile - Add bottom border to header

Question

I am trying to add a 4 pixel bottom border to the header of a ThemeRoller Mobile template. I see the option for setting a border color but it just applies the border all around. Is there a way inside of ThemeRoller to set it to bottom only and set the width, or can anybody provide the proper place inside the css file to adjust this? Thanks in advance!

Edit: I tried changing the .ui-bar-a class in the css file from border: to border-bottom: and chaing the pixel width, but the changes do not show up when the file is rendered in chrome. But if I change it in the web inspector, the changes do work and I can get a 4 pixel bottom border on that element.

Answer 1

Try this:

ui-header {
     border-bottom:4px solid #000;
}

You can put this in your own css file to keep thing clean and organized. But remember, when defining all your css files in your head section. Make sure to FIRST load the jquerymobile css file and after that your css file. This is because now your css declarations will overwrite the jquerymobile declarations.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" /> 
<link rel="stylesheet" href="your-css-file.css" /> 

Answer 2

Try this

$(".ui-header").css("border-bottom", "4px solid #000000");

just put it on the page you want the border changed, or js file that contains it