Web Hosting Forum | Lunarpages


*
Welcome, Guest. Please login or register.
Did you miss your activation email?



Login with username, password and session length
April 16, 2014, 07:50:46 PM

Pages: [1]   Go Down
  Print  
Author Topic: Help with customizing javascript...  (Read 2397 times)
gr8_boi52
Trekkie
**
Offline Offline

Posts: 10


« on: April 05, 2013, 06:37:39 PM »

http://www.mumineen.org/salaat/salaat_table_js_v4.php/orangecounty

this is the javascript i want to customize...when i put it on my website in <script>tags it looks pretty ugly, picture attached

can you help me customize it so it will look pretty.
i can't modify the script because i don't own it. they said you can modify it using css, but how?


* sript.PNG (10.97 KB, 206x396 - viewed 116 times.)
Logged
MrPhil
Senior Moderator
Berserker Poster
*****
Offline Offline

Posts: 5807



« Reply #1 on: April 06, 2013, 08:20:46 AM »

It looks like you're trying to shoehorn this thing into a narrow column -- give it some more room (horizontally) for better appearance. The top item is an <h2>, which by default is a fairly large text size. If you put the whole thing within, say, a <div id="salaatable"> you could specify CSS that would apply to just that section:
Code:
#salaatable h2 { font-size: 14pt; }
#salaatable h3 { font-size: 12pt; }
etc. and would not mess with anything else on your page.

It's expecting you to somewhere define a couple of CSS classes: .salaatype and .salaatime. These are not critical, but picking the right font, text size, margins, and padding for the table cells could help improve the appearance.
Logged

Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-
gr8_boi52
Trekkie
**
Offline Offline

Posts: 10


« Reply #2 on: April 06, 2013, 10:20:26 PM »

It looks like you're trying to shoehorn this thing into a narrow column -- give it some more room (horizontally) for better appearance. The top item is an <h2>, which by default is a fairly large text size. If you put the whole thing within, say, a <div id="salaatable"> you could specify CSS that would apply to just that section:
Code:
#salaatable h2 { font-size: 14pt; }
#salaatable h3 { font-size: 12pt; }
etc. and would not mess with anything else on your page.

It's expecting you to somewhere define a couple of CSS classes: .salaatype and .salaatime. These are not critical, but picking the right font, text size, margins, and padding for the table cells could help improve the appearance.

sorry i am a newbie, i know what divs are but can you tell me how would my code look like?

<div="###">
script="##"
</div>
??
Logged
MrPhil
Senior Moderator
Berserker Poster
*****
Offline Offline

Posts: 5807



« Reply #3 on: April 07, 2013, 05:03:23 AM »

I don't know how you're setting up the rest of your page -- I presume this script is just going to be part of the final page. You have to decide how much space to give this thing and where on the page. Define a block of space of a certain width (and possibly height) with a <div id="salaatable"><script ....></div> and add your settings to your .css file.
Logged

Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-
gr8_boi52
Trekkie
**
Offline Offline

Posts: 10


« Reply #4 on: April 07, 2013, 08:55:27 PM »

I don't know how you're setting up the rest of your page -- I presume this script is just going to be part of the final page. You have to decide how much space to give this thing and where on the page. Define a block of space of a certain width (and possibly height) with a <div id="salaatable"><script ....></div> and add your settings to your .css file.

in css what do i put for class or id, OR should i simply put H1, P ?
e.g

.what class? {
 font-family: blblbla
}
Logged
MrPhil
Senior Moderator
Berserker Poster
*****
Offline Offline

Posts: 5807



« Reply #5 on: April 08, 2013, 05:07:25 AM »

If you just put in H1, P, etc., the properties you give will be applied to all H1's, P's, etc. on the page. If you want to be more selective than that, you can use class names or IDs to restrict the properties to certain things on the page. Since you can't change what's inside this Javascript file, if you want to define some properties to apply just to that H2, you would have to wrap that block of script in a unique label, such as an ID in a DIV, and then write your "selectors" to indicate you want the H2 under (descendant of) the DIV:
Code:
...other HTML on page...
<div id="salaatable">
<script src=...></script>
</div>
...other HTML on page...

Then in your CSS file,
Code:
#salaatable { properties for DIV, such as width, location on page, etc. }
#salaatable h2 { properties such as font-size for H2 under this one DIV }
#salaatable h3 { properties for H3 under this one DIV }
etc.
.salaatype { properties for this span of text marked class="salaatype" including left and right margins }
.salaatime { properties for this span of text marked class="salaatime" including left and right margins }

If you don't understand that, you will need to get yourself a book or online course on basic CSS.
Logged

Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-
gr8_boi52
Trekkie
**
Offline Offline

Posts: 10


« Reply #6 on: April 08, 2013, 11:26:21 AM »

If you just put in H1, P, etc., the properties you give will be applied to all H1's, P's, etc. on the page. If you want to be more selective than that, you can use class names or IDs to restrict the properties to certain things on the page. Since you can't change what's inside this Javascript file, if you want to define some properties to apply just to that H2, you would have to wrap that block of script in a unique label, such as an ID in a DIV, and then write your "selectors" to indicate you want the H2 under (descendant of) the DIV:
Code:
...other HTML on page...
<div id="salaatable">
<script src=...></script>
</div>
...other HTML on page...

Then in your CSS file,
Code:
#salaatable { properties for DIV, such as width, location on page, etc. }
#salaatable h2 { properties such as font-size for H2 under this one DIV }
#salaatable h3 { properties for H3 under this one DIV }
etc.
.salaatype { properties for this span of text marked class="salaatype" including left and right margins }
.salaatime { properties for this span of text marked class="salaatime" including left and right margins }

If you don't understand that, you will need to get yourself a book or online course on basic CSS.

i understand css  a bit. but i want to do the styling on the same html.
in the <style> tag.

should i do it like this?

<div style="h1:blue h2:11px">
<script src=...></script>
</div>

please explain...
Logged
gr8_boi52
Trekkie
**
Offline Offline

Posts: 10


« Reply #7 on: April 08, 2013, 11:35:28 AM »

If you just put in H1, P, etc., the properties you give will be applied to all H1's, P's, etc. on the page. If you want to be more selective than that, you can use class names or IDs to restrict the properties to certain things on the page. Since you can't change what's inside this Javascript file, if you want to define some properties to apply just to that H2, you would have to wrap that block of script in a unique label, such as an ID in a DIV, and then write your "selectors" to indicate you want the H2 under (descendant of) the DIV:
Code:
...other HTML on page...
<div id="salaatable">
<script src=...></script>
</div>
...other HTML on page...

Then in your CSS file,
Code:
#salaatable { properties for DIV, such as width, location on page, etc. }
#salaatable h2 { properties such as font-size for H2 under this one DIV }
#salaatable h3 { properties for H3 under this one DIV }
etc.
.salaatype { properties for this span of text marked class="salaatype" including left and right margins }
.salaatime { properties for this span of text marked class="salaatime" including left and right margins }

If you don't understand that, you will need to get yourself a book or online course on basic CSS.

never-mind, i did what you said and it worked fine,  thanks for your help
/closed
Logged
MrPhil
Senior Moderator
Berserker Poster
*****
Offline Offline

Posts: 5807



« Reply #8 on: April 08, 2013, 04:20:59 PM »

You can put a <style type="text/css">...</style> set of tags in your page <head> section, and put your CSS there, rather than in a separate .css file. No, what you suggested doing (style="h1: blue;") does not work.
Logged

Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-
gr8_boi52
Trekkie
**
Offline Offline

Posts: 10


« Reply #9 on: April 08, 2013, 06:36:34 PM »

You can put a <style type="text/css">...</style> set of tags in your page <head> section, and put your CSS there, rather than in a separate .css file. No, what you suggested doing (style="h1: blue;") does not work.

it worked, thanks
Logged
Pages: [1]   Go Up
  Print  
 
Jump to: