dynamic stylesheet


/ Published in: PHP
Save to your folder(s)

This is like a cms for a stylesheet - includes all files to make a working xhtml/css demo


Copy this code and paste it in your HTML
  1. values.php
  2.  
  3. <?php
  4. //SITE BACKGROUND
  5. $bg = $_POST['bg'];
  6. //HEADER BORDER
  7. $hdrbdr = $_POST['hdrbdr'];
  8. //HEADER BORDER WIDTH
  9. $hdrbdrwidth = $_POST['hdrbdrwidth'];
  10. //HEADER BACKGROUND
  11. $hdrbg = $_POST['hdrbg'];
  12. //HEADER TITLE
  13. $hdrttl = $_POST['hdrttl'];
  14. //HEADER SLOGAN
  15. $hdrslgn = $_POST['hdrslgn'];
  16. //TOPNAV BORDER
  17. $topnavbdr = $_POST['topnavbdr'];
  18. //TOPNAV BACKGROUND
  19. $topnavbg = $_POST['topnavbg'];
  20. //TOPNAV BACKGROUND HOVER
  21. $topnavbghvr = $_POST['topnavbghvr'];
  22. //TOPNAV TEXT
  23. $topnavtxt = $_POST['topnavtxt'];
  24. //TOPNAV TEXT HOVER
  25. $topnavtxthover = $_POST['topnavtxthover'];
  26. //BODY BORDER
  27. $bodybdr = $_POST['bodybdr'];
  28. //PAGE TITLE BACKGROUND
  29. $pagettlbg = $_POST['pagettlbg'];
  30. //PAGE TITLE TEXT
  31. $pagettltxt = $_POST['pagettltxt'];
  32. //BODY LINK
  33. $bdylk = $_POST['bdylk'];
  34. //BODY LINK HOVER
  35. $bdylkhvr = $_POST['bdylkhvr'];
  36. //SIDE TITLE
  37. $sidebg = $_POST['sidebg'];
  38. //SIDE TITLE
  39. $sidettl = $_POST['sidettl'];
  40. //SIDE TITLE BACKGROUND
  41. $sidettlbg = $_POST['sidettlbg'];
  42. //SIDEMENU1 LIST TEXT
  43. $side1lsttxt = $_POST['sidelsttxt'];
  44. //SIDEMENU1 LIST TEXT HOVER
  45. $side1lsttxthvr = $_POST['sidelsttxthvr'];
  46. //SIDEMENU1 LIST BACKGROUND
  47. $side1lstbg = $_POST['side1lstbg'];
  48. //SIDEMENU1 LIST BACKGROUND HOVER
  49. $side1lstbghvr = $_POST['side1lstbghvr'];
  50. //SIDEMENU1 LIST BORDER
  51. $side1lstbdr = $_POST['side1lstbdr'];
  52. //SIDEMENU1 LIST BORDER HOVER
  53. $side1lstbdrhvr = $_POST['side1lstbdrhvr'];
  54. //SIDEMENU2 LIST TEXT
  55. $side1lsttxt = $_POST['side1lsttxt'];
  56. //SIDEMENU2 LIST TEXT HOVER
  57. $side1lsttxthvr = $_POST['side1lsttxthvr'];
  58. //SIDEMENU2 DOT
  59. $side1lstdot = $_POST['side1lstdot'];
  60. //SIDEMENU2 DOT HOVER
  61. $side1lstdothvr = $_POST['side1lstdothvr'];
  62. //SIDE CONTACT LEGEND
  63. $side1cntleg = $_POST['side1cntleg'];
  64. //SIDE CONTACT TEXT
  65. $side1cnttxt = $_POST['side1cnttxt'];
  66. //SIDE CONTACT BORDERS
  67. $side1cntbdr = $_POST['side1cntbdr'];
  68. //SIDE CONTACT BUTTON BACKGROUND
  69. $side1cntbg = $_POST['side1cntbg'];
  70. //SIDE CONTACT BUTTON BACKGROUND HOVER
  71. $side1cntbghvr = $_POST['side1cntbghvr'];
  72. //SIDE CONTACT BUTTON BORDER
  73. $side1cntbutbdr = $_POST['side1cntbutbdr'];
  74. //SIDE CONTACT BUTTON BORDER HOVER
  75. $side1cntbutbdrhvr = $_POST['side1cntbutbdrhvr'];
  76. //SIDE CONTACT BUTTON TEXT
  77. $side1cntbuttxt = $_POST['side1cntbuttxt'];
  78. //SIDE CONTACT BUTTON TEXT HOVER
  79. $side1cntbuttxthvr = $_POST['side1cntbuttxthvr'];
  80. //CONTENT BACKGROUND
  81. $conbg = $_POST['conbg'];
  82. //CONTENT H1
  83. $conh1 = $_POST['conh1'];
  84. //CONTENT H1 BACKGROUND
  85. $conh1bg = $_POST['conh1bg'];
  86. //CONTENT H2
  87. $conh2 = $_POST['conh2'];
  88. //CONTENT H3
  89. $conh3 = $_POST['conh3'];
  90. //CONTENT H4
  91. $conh4 = $_POST['conh4'];
  92. //CONTENT H5
  93. $conh5 = $_POST['conh5'];
  94. //CONTENT H6
  95. $conh6 = $_POST['conh6'];
  96. //CONTENT P
  97. $conp = $_POST['conp'];
  98. //CONTENT BLOCKQUOTE TEXT
  99. $conbqtxt = $_POST['conbqtxt'];
  100. //CONTENT BLOCKQUOTE BORDER
  101. $conbqbdr = $_POST['conbqbdr'];
  102. //CONTENT BLOCKQUOTE BACKGROUND
  103. $conbqbg = $_POST['conbqbg'];
  104. //CONTENT IMG BORDER
  105. $conimgbdr = $_POST['conimgbdr'];
  106. //CONTENT IMG BORDER A
  107. $conimgbdra = $_POST['conimgbdra'];
  108. //CONTENT IMG BORDER A HOVER
  109. $conimgbdrahvr = $_POST['conimgbdrahvr'];
  110. //TABLE HEADER TEXT
  111. $contblhdrtxt = $_POST['contblhdrtxt'];
  112. //TABLE HEADER BACKGROUND
  113. $contblhdrbg = $_POST['contblhdrbg'];
  114. //TABLE TEXT
  115. $contbltxt = $_POST['contbltxt'];
  116. //TABLE BORDER
  117. $contblbdr = $_POST['contblbdr'];
  118. //FOOTER TEXT
  119. $ftrtxt = $_POST['ftrtxt'];
  120. //FOOTER LINK A
  121. $ftrlnka = $_POST['ftrlnka'];
  122. //FOOTER LINK A HOVER
  123. $ftrlnkahvr = $_POST['ftrlnkahvr'];
  124. //FOOTER BACKGROUND
  125. $ftrbg = $_POST['ftrbg'];
  126.  
  127.  
  128. //HTML CODE - THIS IS THE CODE FOR THE HTML PAGE
  129. $html = file_get_contents("html.txt");
  130.  
  131.  
  132. //IF FORM IS SUBMITED
  133. if($_POST) {
  134. $fp = fopen('bg.txt', 'w+');
  135. fwrite($fp, $bg);
  136. fclose($fp);
  137. $fp = fopen('hdrbdr.txt', 'w+');
  138. fwrite($fp, $hdrbdr);
  139. fclose($fp);
  140. $fp = fopen('hdrbdrwidth.txt', 'w+');
  141. fwrite($fp, $hdrbdrwidth);
  142. fclose($fp);
  143. $fp = fopen('hdrbg.txt', 'w+');
  144. fwrite($fp, $hdrbg);
  145. fclose($fp);
  146. $fp = fopen('hdrttl.txt', 'w+');
  147. fwrite($fp, $hdrttl);
  148. fclose($fp);
  149. $fp = fopen('hdrslgn.txt', 'w+');
  150. fwrite($fp, $hdrslgn);
  151. fclose($fp);
  152. $fp = fopen('topnavbdr.txt', 'w+');
  153. fwrite($fp, $topnavbdr);
  154. fclose($fp);
  155. $fp = fopen('topnavbg.txt', 'w+');
  156. fwrite($fp, $topnavbg);
  157. fclose($fp);
  158. $fp = fopen('topnavbghvr.txt', 'w+');
  159. fwrite($fp, $topnavbghvr);
  160. fclose($fp);
  161. $fp = fopen('topnavtxt.txt', 'w+');
  162. fwrite($fp, $topnavtxt);
  163. fclose($fp);
  164. $fp = fopen('topnavtxthover.txt', 'w+');
  165. fwrite($fp, $topnavtxthover);
  166. fclose($fp);
  167. $fp = fopen('bodybdr.txt', 'w+');
  168. fwrite($fp, $bodybdr);
  169. fclose($fp);
  170. $fp = fopen('pagettlbg.txt', 'w+');
  171. fwrite($fp, $pagettlbg);
  172. fclose($fp);
  173. $fp = fopen('pagettltxt.txt', 'w+');
  174. fwrite($fp, $pagettltxt);
  175. fclose($fp);
  176. $fp = fopen('bdylk.txt', 'w+');
  177. fwrite($fp, $bdylk);
  178. fclose($fp);
  179. $fp = fopen('bdylkhvr.txt', 'w+');
  180. fwrite($fp, $bdylkhvr);
  181. fclose($fp);
  182. $fp = fopen('sidebg.txt', 'w+');
  183. fwrite($fp, $sidebg);
  184. fclose($fp);
  185. $fp = fopen('sidettl.txt', 'w+');
  186. fwrite($fp, $sidettl);
  187. fclose($fp);
  188. $fp = fopen('sidettlbg.txt', 'w+');
  189. fwrite($fp, $sidettlbg);
  190. fclose($fp);
  191. $fp = fopen('sidelsttxt.txt', 'w+');
  192. fwrite($fp, $side1lsttxt);
  193. fclose($fp);
  194. $fp = fopen('sidelsttxthvr.txt', 'w+');
  195. fwrite($fp, $side1lsttxthvr);
  196. fclose($fp);
  197. $fp = fopen('side1lstbg.txt', 'w+');
  198. fwrite($fp, $side1lstbg);
  199. fclose($fp);
  200. $fp = fopen('side1lstbghvr.txt', 'w+');
  201. fwrite($fp, $side1lstbghvr);
  202. fclose($fp);
  203. $fp = fopen('side1lstbdr.txt', 'w+');
  204. fwrite($fp, $side1lstbdr);
  205. fclose($fp);
  206. $fp = fopen('side1lstbdrhvr.txt', 'w+');
  207. fwrite($fp, $side1lstbdrhvr);
  208. fclose($fp);
  209. $fp = fopen('side1lsttxt.txt', 'w+');
  210. fwrite($fp, $side1lsttxt);
  211. fclose($fp);
  212. $fp = fopen('side1lsttxthvr.txt', 'w+');
  213. fwrite($fp, $side1lsttxthvr);
  214. fclose($fp);
  215. $fp = fopen('side1lstdot.txt', 'w+');
  216. fwrite($fp, $side1lstdot);
  217. fclose($fp);
  218. $fp = fopen('side1lstdothvr.txt', 'w+');
  219. fwrite($fp, $side1lstdothvr);
  220. fclose($fp);
  221. $fp = fopen('side1cntleg.txt', 'w+');
  222. fwrite($fp, $side1cntleg);
  223. fclose($fp);
  224. $fp = fopen('side1cnttxt.txt', 'w+');
  225. fwrite($fp, $side1cnttxt);
  226. fclose($fp);
  227. $fp = fopen('side1cntbdr.txt', 'w+');
  228. fwrite($fp, $side1cntbdr);
  229. fclose($fp);
  230. $fp = fopen('side1cntbg.txt', 'w+');
  231. fwrite($fp, $side1cntbg);
  232. fclose($fp);
  233. $fp = fopen('side1cntbghvr.txt', 'w+');
  234. fwrite($fp, $side1cntbghvr);
  235. fclose($fp);
  236. $fp = fopen('side1cntbutbdr.txt', 'w+');
  237. fwrite($fp, $side1cntbutbdr);
  238. fclose($fp);
  239. $fp = fopen('side1cntbutbdrhvr.txt', 'w+');
  240. fwrite($fp, $side1cntbutbdrhvr);
  241. fclose($fp);
  242. $fp = fopen('side1cntbuttxt.txt', 'w+');
  243. fwrite($fp, $side1cntbuttxt);
  244. fclose($fp);
  245. $fp = fopen('side1cntbuttxthvr.txt', 'w+');
  246. fwrite($fp, $side1cntbuttxthvr);
  247. fclose($fp);
  248. $fp = fopen('conbg.txt', 'w+');
  249. fwrite($fp, $conbg);
  250. fclose($fp);
  251. $fp = fopen('conh1.txt', 'w+');
  252. fwrite($fp, $conh1);
  253. fclose($fp);
  254. $fp = fopen('conh1bg.txt', 'w+');
  255. fwrite($fp, $conh1bg);
  256. fclose($fp);
  257. $fp = fopen('conh2.txt', 'w+');
  258. fwrite($fp, $conh2);
  259. fclose($fp);
  260. $fp = fopen('conh3.txt', 'w+');
  261. fwrite($fp, $conh3);
  262. fclose($fp);
  263. $fp = fopen('conh4.txt', 'w+');
  264. fwrite($fp, $conh4);
  265. fclose($fp);
  266. $fp = fopen('conh5.txt', 'w+');
  267. fwrite($fp, $conh5);
  268. fclose($fp);
  269. $fp = fopen('conh6.txt', 'w+');
  270. fwrite($fp, $conh6);
  271. fclose($fp);
  272. $fp = fopen('conp.txt', 'w+');
  273. fwrite($fp, $conp);
  274. fclose($fp);
  275. $fp = fopen('conbqtxt.txt', 'w+');
  276. fwrite($fp, $conbqtxt);
  277. fclose($fp);
  278. $fp = fopen('conbqbdr.txt', 'w+');
  279. fwrite($fp, $conbqbdr);
  280. fclose($fp);
  281. $fp = fopen('conbqbg.txt', 'w+');
  282. fwrite($fp, $conbqbg);
  283. fclose($fp);
  284. $fp = fopen('conimgbdr.txt', 'w+');
  285. fwrite($fp, $conimgbdr);
  286. fclose($fp);
  287. $fp = fopen('conimgbdra.txt', 'w+');
  288. fwrite($fp, $conimgbdra);
  289. fclose($fp);
  290. $fp = fopen('conimgbdrahvr.txt', 'w+');
  291. fwrite($fp, $conimgbdrahvr);
  292. fclose($fp);
  293. $fp = fopen('contblhdrtxt.txt', 'w+');
  294. fwrite($fp, $contblhdrtxt);
  295. fclose($fp);
  296. $fp = fopen('contblhdrbg.txt', 'w+');
  297. fwrite($fp, $contblhdrbg);
  298. fclose($fp);
  299. $fp = fopen('contbltxt.txt', 'w+');
  300. fwrite($fp, $contbltxt);
  301. fclose($fp);
  302. $fp = fopen('contblbdr.txt', 'w+');
  303. fwrite($fp, $contblbdr);
  304. fclose($fp);
  305. $fp = fopen('ftrtxt.txt', 'w+');
  306. fwrite($fp, $ftrtxt);
  307. fclose($fp);
  308. $fp = fopen('ftrlnka.txt', 'w+');
  309. fwrite($fp, $ftrlnka);
  310. fclose($fp);
  311. $fp = fopen('ftrlnkahvr.txt', 'w+');
  312. fwrite($fp, $ftrlnkahvr);
  313. fclose($fp);
  314. $fp = fopen('ftrbg.txt', 'w+');
  315. fwrite($fp, $ftrbg);
  316. fclose($fp);
  317. } else
  318. echo (file_get_contents("html.txt"));
  319. ?>
  320.  
  321. html.txt
  322. <form id="colors" name="colors" method="post" action="">
  323. <p>site background: <input name="bg" type="text" value="<?=$_POST['bg']?>" id="bg" /></p>
  324. <p>header border: <input name="hdrbdr" type ="text" id="hdrbdr" /></p>
  325. <p>header border width: <input name="hdrbdrwidth" type ="text" id="hdrbdrwidth" /></p>
  326. <p>header background: <input name="hdrbg" type ="text" id="hdrbg" /></p>
  327. <p>header title: <input name="hdrttl" type ="text" id="hdrttl" /></p>
  328. <p>header slogan: <input name="hdrslgn" type ="text" id="hdrslgn" /></p>
  329. <p>topnav border: <input name="topnavbdr" type ="text" id="topnavbdr" /></p>
  330. <p>topnav background: <input name="topnavbg" type ="text" id="topnavbg" /></p>
  331. <p>topnav background hover: <input name="topnavbghvr" type ="text" id="topnavbghvr" /></p>
  332. <p>topnav text: <input name="topnavtxt" type ="text" id="topnavtxt" /></p>
  333. <p>topnav text hover: <input name="topnavtxthover" type ="text" id="topnavtxthover" /></p>
  334. <p>body border: <input name="bodybdr" type ="text" id="bodybdr" /></p>
  335. <p>page title background: <input name="pagettlbg" type ="text" id="pagettlbg" /></p>
  336. <p>page title text: <input name="pagettltxt" type ="text" id="pagettltxt" /></p>
  337. <p>body link: <input name="bdylk" type ="text" id="bdylk" /></p>
  338. <p>body link hover: <input name="bdylkhvr" type ="text" id="bdylkhvr" /></p>
  339. <p>side background: <input name="sidebg" type ="text" id="sidebg" /></p>
  340. <p>side title: <input name="sidettl" type ="text" id="sidettl" /></p>
  341. <p>side title background: <input name="sidettlbg" type ="text" id="sidettlbg" /></p>
  342. <p>sidemenu1 list text: <input name="side1lsttxt" type ="text" id="sidelsttxt" /></p>
  343. <p>sidemenu1 list text hover: <input name="side1lsttxthvr" type ="text" id="sidelsttxthvr" /></p>
  344. <p>sidemenu1 list background: <input name="side1lstbg" type ="text" id="side1lstbg" /></p>
  345. <p>sidemenu1 list background hover: <input name="side1lstbghvr" type ="text" id="side1lstbghvr" /></p>
  346. <p>sidemenu1 list border: <input name="side1lstbdr" type ="text" id="side1lstbdr" /></p>
  347. <p>sidemenu1 list border hover: <input name="side1lstbdrhvr" type ="text" id="side1lstbdrhvr" /></p>
  348. <p>sidemenu2 list text: <input name="side1lsttxt" type ="text" id="side1lsttxt" /></p>
  349. <p>sidemenu2 list text hover: <input name="side1lsttxthvr" type ="text" id="side1lsttxthvr" /></p>
  350. <p>sidemenu2 dot: <input name="side1lstdot" type ="text" id="side1lstdot" /></p>
  351. <p>sidemenu2 dot hover: <input name="side1lstdothvr" type ="text" id="side1lstdothvr" /></p>
  352. <p>side contact legend: <input name="side1cntleg" type ="text" id="side1cntleg" /></p>
  353. <p>side contact text: <input name="side1cnttxt" type ="text" id="side1cnttxt" /></p>
  354. <p>side contact borders: <input name="side1cntbdr" type ="text" id="side1cntbdr" /></p>
  355. <p>side contact button background: <input name="side1cntbg" type ="text" id="side1cntbg" /></p>
  356. <p>side contact button background hover: <input name="side1cntbghvr" type ="text" id="side1cntbghvr" /></p>
  357. <p>side contact button border: <input name="side1cntbutbdr" type ="text" id="side1cntbutbdr" /></p>
  358. <p>side contact button border hover: <input name="side1cntbutbdrhvr" type ="text" id="side1cntbutbdrhvr" /></p>
  359. <p>side contact button text: <input name="side1cntbuttxt" type ="text" id="side1cntbuttxt" /></p>
  360. <p>side contact button text hover: <input name="side1cntbuttxthvr" type ="text" id="side1cntbuttxthvr" /></p>
  361. <p>content background: <input name="conbg" type ="text" id="conbg" /></p>
  362. <p>content h1: <input name="conh1" type ="text" id="conh1" /></p>
  363. <p>content h1 background: <input name="conh1bg" type ="text" id="conh1bg" /></p>
  364. <p>content h2: <input name="conh2" type ="text" id="conh2" /></p>
  365. <p>content h3: <input name="conh3" type ="text" id="conh3" /></p>
  366. <p>content h4: <input name="conh4" type ="text" id="conh4" /></p>
  367. <p>content h5: <input name="conh5" type ="text" id="conh5" /></p>
  368. <p>content h6: <input name="conh6" type ="text" id="conh6" /></p>
  369. <p>content p: <input name="conp" type ="text" id="conp" /></p>
  370. <p>content blockquote text: <input name="conbqtxt" type ="text" id="conbqtxt" /></p>
  371. <p>content blockquote border: <input name="conbqbdr" type ="text" id="conbqbdr" /></p>
  372. <p>content blockquote background: <input name="conbqbg" type ="text" id="conbqbg" /></p>
  373. <p>content img border: <input name="conimgbdr" type ="text" id="conimgbdr" /></p>
  374. <p>content img border a: <input name="conimgbdra" type ="text" id="conimgbdra" /></p>
  375. <p>content img border a hover: <input name="conimgbdrahvr" type ="text" id="conimgbdrahvr" /></p>
  376. <p>table header text: <input name="contblhdrtxt" type ="text" id="contblhdrtxt" /></p>
  377. <p>table header background: <input name="contblhdrbg" type ="text" id="contblhdrbg" /></p>
  378. <p>table text: <input name="contbltxt" type ="text" id="contbltxt" /></p>
  379. <p>table border: <input name="contblbdr" type ="text" id="contblbdr" /></p>
  380. <p>footer text: <input name="ftrtxt" type ="text" id="ftrtxt" /></p>
  381. <p>footer link a: <input name="ftrlnka" type ="text" id="ftrlnka" /></p>
  382. <p>footer link a hover: <input name="ftrlnkahvr" type ="text" id="ftrlnkahvr" /></p>
  383. <p>footer background: <input name="ftrbg" type ="text" id="ftrbg" /></p>
  384. <p><input type="submit" name="Submit" value="Submit" /></p>
  385. </form>
  386.  
  387. index.php
  388. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  389. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  390.  
  391.  
  392. <!-- Version: Multiflex-5.4 / Overview -->
  393. <!-- Type: Design with sidebar -->
  394. <!-- Date: March 13, 2008 -->
  395. <!-- Design: www.1234.info -->
  396. <!-- License: Fully open source without restrictions. -->
  397. <!-- Please keep footer credits with the words -->
  398. <!-- "Design by 1234.info". Thank you! -->
  399.  
  400. <head>
  401. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  402. <meta http-equiv="cache-control" content="no-cache" />
  403. <meta name="robots" content="index,follow" />
  404. <meta name="author" content="Designed by www.1234.info / Modified: Your Name" />
  405. <meta name="description" content="Your container description here" />
  406. <meta name="keywords" content="Your keywords, keywords, keywords, here" />
  407. <link rel="stylesheet" type="text/css" media="screen,projection,print" href="mf54_reset.php" />
  408. <link rel="stylesheet" type="text/css" media="screen,projection,print" href="mf54_grid.php" />
  409. <link rel="stylesheet" type="text/css" media="screen,projection,print" href="mf54_content.php" />
  410. <link rel="icon" type="image/x-icon" href="./img/favicon.ico" />
  411. <title>Your business website</title>
  412. </head>
  413.  
  414. <!-- Global IE fix to avoid layout crash when single word size wider than column width -->
  415. <!-- Following line MUST remain as a comment to have the proper effect -->
  416. <!--[if IE]><style type="text/css"> body {word-wrap: break-word;}</style><![endif]-->
  417.  
  418. <body>
  419. <!-- CONTAINER FOR ENTIRE PAGE -->
  420. <div class="container">
  421.  
  422. <!-- A. HEADER -->
  423.  
  424. <div class="header">
  425.  
  426. <!-- A.1 SITENAME -->
  427. <a class="sitelogo" href="index.html" title="Home"></a>
  428. <div class="sitename">
  429. <h1><a href="index.html" title="Home">Your Business Name</a></h1>
  430. <h2>Welcome to ColourFlex</h2>
  431. </div>
  432.  
  433. <!-- A.2 BUTTON NAVIGATION -->
  434. <div class="navbutton">
  435. <ul>
  436. <li><a href="#" title="RSS"><img src="./img/icon_rss.gif" alt="RSS-Button" /></a></li>
  437. </ul>
  438. </div>
  439.  
  440. </div>
  441.  
  442.  
  443. <!-- B. NAVIGATION BAR -->
  444.  
  445. <div class="navbar">
  446.  
  447. <ul>
  448. <li><a href="index.html">Home</a></li>
  449. </ul>
  450. <ul>
  451. <li><a href="mf54_tutorial.html">Specials</a></li>
  452. </ul>
  453. <ul>
  454. <li><a href="mf54_tutorial.html">Beef</a></li>
  455. </ul>
  456. <ul>
  457. <li><a href="mf54_tutorial.html">Chicken</a></li>
  458. </ul>
  459. <ul>
  460. <li><a href="mf54_tutorial.html">Contact</a></li>
  461. </ul>
  462. </div>
  463.  
  464. <!-- C. MAIN SECTION -->
  465. <div class="main">
  466. <h1 class="pagetitle">Content Toolbox (With sidebar)</h1>
  467.  
  468. <!-- C.1 CONTENT -->
  469. <div class="content">
  470.  
  471. <!-- CONTENT CELL -->
  472.  
  473. <div class="content-1col-nobox">
  474. <h1>Available Content Styles</h1>
  475. <!-- Subcell LEFT-->
  476. <div class="content-2col-nobox-leftcolumn">
  477. <h2>Content (1-Column / No box)</h2>
  478. <ul>
  479. <li>1-01 / <a href="#anchor-heading-1">Heading (with icon)</a></li>
  480. <li>1-02 / <a href="#anchor-heading-noicon-1">Heading (no icon)</a></li>
  481. <li>1-03 / <a href="#anchor-text-1">Text</a></li>
  482. <li>1-04 / <a href="#anchor-image-1">Image</a></li>
  483. </ul>
  484. <h2>Content (2-Column / No box)</h2>
  485. <ul>
  486. <li>2-01 / <a href="#anchor-heading-2">Heading (with icon)</a></li>
  487. <li>2-02 / <a href="#anchor-heading-noicon-2">Heading (no icon)</a></li>
  488. <li>2-03 / <a href="#anchor-text-2">Text</a></li>
  489. <li>2-04 / <a href="#anchor-image-2">Image</a></li>
  490. </ul>
  491. </div>
  492.  
  493. <!-- Subcell RIGHT -->
  494. <div class="content-2col-nobox-rightcolumn">
  495. <h2>Content (2-Column / Box)</h2>
  496. <ul>
  497. <li>3-01 / <a href="#anchor-heading-3">Heading (with icon)</a></li>
  498. <li>3-02 / <a href="#anchor-heading-noicon-3">Heading (no icon)</a></li>
  499. <li>3-03 / <a href="#anchor-text-3">Text</a></li>
  500. <li>3-04 / <a href="#anchor-image-3">Image</a></li>
  501. </ul>
  502. <h2>Subcontent</h2>
  503. <ul>
  504. <li>4-01 / <a href="#anchor-sidemenu-4">Side menu</a></li>
  505. <li>4-02 / <a href="#anchor-heading-4">Heading (with icon)</a></li>
  506. <li>4-03 / <a href="#anchor-heading-noicon-4">Heading (no icon)</a></li>
  507. <li>4-04 / <a href="#anchor-text-4">Text</a></li>
  508. </ul>
  509. </div>
  510. </div>
  511.  
  512.  
  513.  
  514.  
  515. <!-- ************************************************************************************************** -->
  516. <!-- ************************************************************************************************** -->
  517. <!-- ** ** -->
  518. <!-- ** 2. CONTENT (2-COLUMN, NO BOX) ** -->
  519. <!-- ** ** -->
  520. <!-- ************************************************************************************************** -->
  521. <!-- ************************************************************************************************** -->
  522.  
  523.  
  524. <!-- ************************************************************************************************** -->
  525. <!-- ** 2-01. HEADING (WITH ICON) ** -->
  526. <!-- ************************************************************************************************** -->
  527.  
  528. <!-- CONTENT CELL (subcells NOT boxes) -->
  529. <a id="anchor-heading-2"></a>
  530.  
  531. <div class="content-1col-nobox">
  532. <h1>Box head h1</h1>
  533. <!-- Subcell LEFT -->
  534. <div class="content-2col-nobox-leftcolumn">
  535. <h5>Paragraph</h5>
  536. <p>Standard text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  537. </div>
  538. <!-- Subcell RIGHT -->
  539. <div class="content-2col-nobox-rightcolumn">
  540. <h5>Paragraph</h5>
  541. <p>Standard text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  542. </div>
  543. </div>
  544.  
  545.  
  546.  
  547.  
  548. <!-- ************************************************************************************************** -->
  549. <!-- ** 2-03. TEXT ** -->
  550. <!-- ************************************************************************************************** -->
  551.  
  552. <!-- CONTENT CELL (subcells NOT boxes) -->
  553. <a id="anchor-text-2"></a>
  554.  
  555. <div class="content-1col-nobox">
  556. <h1>Text</h1>
  557. <!-- Subcell LEFT -->
  558. <div class="content-2col-nobox-leftcolumn">
  559. <h5>Paragraph</h5>
  560. <p>Standard text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  561.  
  562. <blockquote>
  563. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing.</p>
  564. </blockquote>
  565. <h5>Unordered list</h5>
  566. <ul>
  567. <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing. </li>
  568. <li>Second entry</li>
  569. </ul>
  570.  
  571. <h5>Ordered list</h5>
  572. <ol>
  573. <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing. </li>
  574. <li>Second entry</li>
  575. </div>
  576. <!-- Subcell RIGHT -->
  577. <div class="content-2col-nobox-rightcolumn">
  578.  
  579. <h5>Paragraph</h5>
  580. <p>Standard text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  581.  
  582. </div>
  583. </div>
  584.  
  585.  
  586. <!-- ************************************************************************************************** -->
  587. <!-- ** 2-04. IMAGE ** -->
  588. <!-- ************************************************************************************************** -->
  589.  
  590. <!-- CONTENT CELL (subcells NOT boxes) -->
  591. <a id="anchor-image-2"></a>
  592.  
  593. <div class="content-1col-nobox">
  594. <h1>Image</h1>
  595. <!-- Subcell LEFT-->
  596. <div class="content-2col-nobox-leftcolumn">
  597. <h2>Title heading (above image)</h2>
  598. <h3>Heading h3</h3>
  599. <h6>Heading h6</h6>
  600. <p><img src="./img/image.jpg" alt="Image description" title="Image title" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostruderci tation ullamcorper suscipit lobortis nisl ut aliquip. orem ipsum dolor sit amet.</p>
  601. <p><img class="center" src="./img/image.jpg" alt="Image description" title="Image title" /></p>
  602. <h3>Heading h3</h3>
  603. <h6>Heading h6</h6>
  604. <p><img class="right" src="./img/image.jpg" alt="Image description" title="Image title" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostruderci tation ullamcorper suscipit lobortis nisl ut aliquip. orem ipsum dolor sit amet.</p>
  605.  
  606. </div>
  607. <!-- Subcell RIGHT -->
  608. <div class="content-2col-nobox-rightcolumn">
  609. <h5>Paragraph</h5>
  610. <p>Standard text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  611. <h2>Title heading beside image</h2>
  612. <h3><img src="./img/image.jpg" alt="Image description" title="Image title" />Heading h3</h3>
  613. <h6>Heading h6</h6>
  614. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostruderci tation ullamcorper suscipit lobortis nisl ut aliquip. orem ipsum dolor sit amet.</p>
  615. </div>
  616. </div>
  617.  
  618. <!-- ************************************************************************************************** -->
  619. <!-- ** 2-06. TABLE ** -->
  620. <!-- ************************************************************************************************** -->
  621.  
  622. <!-- CONTENT CELL (subcells NOT boxes) -->
  623. <a id="anchor-table-2"></a>
  624.  
  625. <div class="content-1col-nobox">
  626. <h1>Table</h1>
  627. <!-- Subcell LEFT-->
  628. <div class="content-2col-nobox-leftcolumn">
  629. <table>
  630. <tr><th class="top" scope="col">Heading 1</th><th class="top" scope="col">Heading 2</th><th class="top" scope="col">Heading 3</th></tr>
  631. <tr><th scope="row">Category 1</th><td>Data</td><td>Data</td></tr>
  632. <tr><th scope="row">Category 2</th><td>Data</td><td>Data</td></tr>
  633. <tr><th scope="row">Category 3</th><td><a href="#">Link</a></td><td><a href="#">Link</a></td></tr>
  634. </table>
  635. <p class="caption"><b>Table x.x.</b> Caption</p>
  636. </div>
  637. <!-- Subcell RIGHT -->
  638. <div class="content-2col-nobox-rightcolumn">
  639. <h5>Paragraph</h5>
  640. <p>Standard text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  641. </div>
  642. </div>
  643.  
  644.  
  645. <!-- ************************************************************************************************** -->
  646. <!-- ** 2-07. CONTACT FORM ** -->
  647. <!-- ************************************************************************************************** -->
  648.  
  649. <!-- CONTENT CELL (subcells NOT boxes) -->
  650. <a id="anchor-contact-2"></a>
  651.  
  652. <div class="content-1col-nobox">
  653. <h1 class="contact">Contact Form</h1>
  654. <!-- Subcell LEFT -->
  655. <div class="content-2col-nobox-leftcolumn">
  656. <div class="contactform">
  657. <form method="post" action="index.html">
  658. <fieldset><legend>&nbsp;CONTACT DETAILS&nbsp;</legend>
  659. <p><label for="contact_title_2a" class="left">Title:</label>
  660. <select name="contact_title" id="contact_title_2a" class="combo">
  661. <option value="choose"> Select... </option>
  662. <option value="mrs"> Mrs. </option>
  663. <option value="mr"> Mr. </option>
  664. <option value="dr"> Dr. </option></select></p>
  665. <p><label for="contact_firstname_2a" class="left">First name:</label>
  666. <input type="text" name="contact_firstname" id="contact_firstname_2a" class="field" value="" tabindex="1" /></p>
  667. <p><label for="contact_familyname_2a" class="left">Family name:</label>
  668. <input type="text" name="contact_familyname" id="contact_familyname_2a" class="field" value="" tabindex="1" /></p>
  669. <p><label for="contact_street_2a" class="left">Street:</label>
  670. <input type="text" name="contact_street" id="contact_street_2a" class="field" value="" tabindex="1" /></p>
  671. <p><label for="contact_postalcode_2a" class="left">Postal code:</label>
  672. <input type="text" name="contact_postalcode" id="contact_postalcode_2a" class="field" value="" tabindex="1" /></p>
  673. <p><label for="contact_city_2a" class="left">City:</label>
  674. <input type="text" name="contact_city" id="contact_city_2a" class="field" value="" tabindex="1" /></p>
  675. <p><label for="contact_country_2a" class="left">Country:</label>
  676. <select name="contact_country" id="contact_country_2a" class="combo">
  677. <option value="choose"> Select... </option>
  678. <option value="Sweden"> Sweden </option>
  679. <option value="United States"> United States </option>
  680. <option value="China"> China </option></select></p>
  681. <p><label for="contact_phone_2a" class="left">Phone:</label>
  682. <input type="text" name="contact_phone" id="contact_phone_2a" class="field" value="" tabindex="2" /></p>
  683. <p><label for="contact_email_2a" class="left">Email:</label>
  684. <input type="text" name="contact_email" id="contact_email_2a" class="field" value="" tabindex="2" /></p>
  685. <p><label for="contact_url_2a" class="left">Website:</label>
  686. <input type="text" name="contact_url" id="contact_url_2a" class="field" value="" tabindex="3" /></p>
  687. </fieldset>
  688. <fieldset><legend>&nbsp;MESSAGE DETAILS&nbsp;</legend>
  689. <p><label for="contact_subject_2a" class="left">Subject:</label>
  690. <input type="text" name="contact_subject" id="contact_subject_2a" class="field" value="" tabindex="4" /></p>
  691. <p><label for="contact_urgency_2a" class="left">Please reply:</label>
  692. <select name="contact_urgency" id="contact_urgency_2a" class="combo">
  693. <option value="choose"> Select... </option>
  694. <option value="today"> Latest today </option>
  695. <option value="tomorrow"> Latest tomorrow </option>
  696. <option value="threedays"> Latest in 3 days </option>
  697. <option value="week"> Latest in a week </option>
  698. <option value="month"> Latest in a month </option></select></p>
  699. <p><label for="contact_message_2a" class="left">Message:</label>
  700. <textarea name="contact_message" id="contact_message_2a" cols="45" rows="10" tabindex="5"></textarea></p>
  701. <p><input type="submit" name="submit" id="submit_2a" class="button" value="Send message" tabindex="6" /></p>
  702. </fieldset>
  703. </form>
  704. </div>
  705. </div>
  706. <!-- Subcell RIGHT -->
  707. <div class="content-2col-nobox-rightcolumn">
  708. <h2>Address</h2>
  709. <p>42 Your Street, Yoursville W.A. 6108</p>
  710. <h2>Fax</h2>
  711. <p>08 123 4566</p>
  712. <h2>Phone</h2>
  713. <p>08 123 4567</p>
  714. <h2>Email</h2>
  715. </div>
  716. </div>
  717.  
  718.  
  719.  
  720. </div>
  721.  
  722.  
  723. <!-- ************************************************************************************************** -->
  724. <!-- ************************************************************************************************** -->
  725. <!-- ** ** -->
  726. <!-- ** 4. SUBCONTENT ** -->
  727. <!-- ** ** -->
  728. <!-- ************************************************************************************************** -->
  729. <!-- ************************************************************************************************** -->
  730.  
  731.  
  732. <!-- C.2 SUBCONTENT -->
  733. <div class="subcontent">
  734.  
  735.  
  736. <!-- ************************************************************************************************** -->
  737. <!-- ** 4-01A. SIDE MENU #1 ** -->
  738. <!-- ************************************************************************************************** -->
  739.  
  740. <!-- SUBCONTENT CELL -->
  741. <a id="anchor-sidemenu-4"></a>
  742.  
  743. <div class="subcontent-box">
  744. <h1 class="menu">Side menu 1</h1>
  745. <div class="sidemenu1">
  746. <ul>
  747. <li><a href="#">Menu item</a></li>
  748. <li><a href="#">Menu item</a></li>
  749. <li><a href="#">Menu item</a></li>
  750. <li><a href="#">Menu item</a></li>
  751. <li><a href="#">Menu item</a></li>
  752. </ul>
  753. </div>
  754. </div>
  755.  
  756.  
  757.  
  758. <!-- ************************************************************************************************** -->
  759. <!-- ** 4-01B. SIDE MENU #2 ** -->
  760. <!-- ************************************************************************************************** -->
  761.  
  762. <!-- SUBCONTENT CELL -->
  763.  
  764. <div class="subcontent-box">
  765. <h1 class="menu">Side menu 2</h1>
  766. <div class="sidemenu2">
  767. <h2 class="noicon">Title</h2>
  768. <ul>
  769. <li><a href="#">Item one</a></li>
  770. <li><a href="#">Item two</a></li>
  771. <li><a href="#">Item three</a></li>
  772. <li><a href="#">Menu item</a></li>
  773. <li><a href="#">Item four</a></li>
  774. <li><a href="#">Item five</a></li>
  775. </ul>
  776. <h2 class="noicon">Title</h2>
  777. <ul>
  778. <li><a href="#">Item one</a></li>
  779. <li><a href="#">Item two</a></li>
  780. <li><a href="#">Item three</a></li>
  781. <li><a href="#">Item four</a></li>
  782. <li><a href="#">Item five</a></li>
  783. </ul>
  784. <h2 class="noicon">Title</h2>
  785. <ul>
  786. <li><a href="#">Item one</a></li>
  787. <li><a href="#">Item two</a></li>
  788. <li><a href="#">Item three</a></li>
  789. <li><a href="#">Item four</a></li>
  790. <li><a href="#">Item five</a></li>
  791. </ul>
  792. </div>
  793. </div>
  794.  
  795.  
  796. <!-- ************************************************************************************************** -->
  797. <!-- ** 4-08. CONTACT FORM ** -->
  798. <!-- ************************************************************************************************** -->
  799.  
  800. <!-- SUBCONTENT CELL -->
  801. <a id="anchor-contact-4"></a>
  802.  
  803. <div class="subcontent-box">
  804. <h1 class="contact">Contact</h1>
  805. <div class="contactform">
  806. <form method="post" action="index.html">
  807. <fieldset><legend>&nbsp;CONTACT DETAILS&nbsp;</legend>
  808. <p><label for="contact_title_4" class="left">Title:</label>
  809. <select name="contact_title" id="contact_title_4" class="combo">
  810. <option value="choose"> Select... </option>
  811. <option value="mrs"> Mrs. </option>
  812. <option value="mr"> Mr. </option>
  813. <option value="dr"> Dr. </option></select></p>
  814. <p><label for="contact_firstname_4" class="left">First name:</label>
  815. <input type="text" name="contact_firstname" id="contact_firstname_4" class="field" value="" tabindex="1" /></p>
  816. <p><label for="contact_familyname_4" class="left">Family name:</label>
  817. <input type="text" name="contact_familyname" id="contact_familyname_4" class="field" value="" tabindex="1" /></p>
  818. <p><label for="contact_street_4" class="left">Street:</label>
  819. <input type="text" name="contact_street" id="contact_street_4" class="field" value="" tabindex="1" /></p>
  820. <p><label for="contact_postalcode_4" class="left">Postal code:</label>
  821. <input type="text" name="contact_postalcode" id="contact_postalcode_4" class="field" value="" tabindex="1" /></p>
  822. <p><label for="contact_city_4" class="left">City:</label>
  823. <input type="text" name="contact_city" id="contact_city_4" class="field" value="" tabindex="1" /></p>
  824. <p><label for="contact_country_4" class="left">Country:</label>
  825. <select name="contact_country" id="contact_country_4" class="combo">
  826. <option value="choose"> Select... </option>
  827. <option value="Sweden"> Sweden </option>
  828. <option value="United States"> United States </option>
  829. <option value="China"> China </option></select></p>
  830. <p><label for="contact_phone_4" class="left">Phone:</label>
  831. <input type="text" name="contact_phone" id="contact_phone_4" class="field" value="" tabindex="2" /></p>
  832. <p><label for="contact_email_4" class="left">Email:</label>
  833. <input type="text" name="contact_email" id="contact_email_4" class="field" value="" tabindex="2" /></p>
  834. <p><label for="contact_url_4" class="left">Website:</label>
  835. <input type="text" name="contact_url" id="contact_url_4" class="field" value="" tabindex="3" /></p>
  836. </fieldset>
  837. <fieldset><legend>&nbsp;MESSAGE DETAILS&nbsp;</legend>
  838. <p><label for="contact_subject_4" class="left">Subject:</label>
  839. <input type="text" name="contact_subject" id="contact_subject_4" class="field" value="" tabindex="4" /></p>
  840. <p><label for="contact_urgency_4" class="left">Please reply:</label>
  841. <select name="contact_urgency" id="contact_urgency_4" class="combo">
  842. <option value="choose"> Select... </option>
  843. <option value="today"> Latest today </option>
  844. <option value="tomorrow"> Latest tomorrow </option>
  845. <option value="threedays"> Latest in 3 days </option>
  846. <option value="week"> Latest in a week </option>
  847. <option value="month"> Latest in a month </option></select></p>
  848. <p><label for="contact_message_4" class="left">Message:</label>
  849. <textarea name="contact_message" id="contact_message_4" cols="45" rows="10" tabindex="5"></textarea></p>
  850. <p><input type="submit" name="submit" id="submit_4" class="button" value="Send message" tabindex="6" /></p>
  851. </fieldset>
  852. </form>
  853. </div>
  854. </div>
  855.  
  856.  
  857. </div>
  858. </div>
  859.  
  860. <!-- ************************************************************************************************** -->
  861. <!-- ************************************************************************************************** -->
  862. <!-- ******************************* END OF AVAILABLE CONTENT STYLES ****************************** -->
  863. <!-- ************************************************************************************************** -->
  864. <!-- ************************************************************************************************** -->
  865.  
  866. <!-- D. FOOTER -->
  867. <div class="footer">
  868. <p>Copyright &copy; 2008 Your Company&nbsp;&nbsp;|&nbsp;&nbsp;All Rights Reserved</p>
  869. <p class="credits">Design by <a href="http://1234.info/" title="Designer Homepage">1234.info</a> | Modified by <a href="#" title="Modifyer Homepage">Your Name</a> | Powered by <a href="#" title="CMS Homepage">Your CMS</a> | Media Player by <a href="http://www.jeroenwijering.com" title="Media Player Credits">Jeroen Wijering</a> | <a href="http://validator.w3.org/check?uri=referer" title="Validate XHTML code">XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/" title="Validate CSS code">CSS 2.0</a></p>
  870. </div>
  871.  
  872. </div>
  873.  
  874. </body>
  875. </html>
  876.  
  877.  
  878.  
  879. mf54_reset.php
  880. <?php header("Content-type: text/css"); ?>
  881.  
  882. /****************************************************************/
  883. /* License: Fully open source without restrictions. */
  884. /* Please keep footer credits with the words */
  885. /* "Design by 1234.info". Thank you! */
  886. /****************************************************************/
  887.  
  888. /***********/
  889. /* RESET */
  890. /***********/
  891.  
  892. html{color:rgb(0,0,0); background:rgb(255,255,255);}
  893. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0; padding:0;}
  894. table{border-collapse:collapse; border-spacing:0;}
  895. fieldset,img{border:0;}
  896. address,caption,cite,code,dfn,em,strong,th,var{font-style:normal; font-weight:normal;}
  897. li{list-style:none;}
  898. caption,th{text-align:left;}
  899. h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
  900. q:before,q:after{content:'';}
  901. abbr,acronym {border:0; font-variant:normal;}
  902. sup {vertical-align:text-top;} /* to preserve line-height and selector appearance */
  903. sub {vertical-align:text-bottom;} /* to preserve line-height and selector appearance */
  904. input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} /* to preserve line-height and selector appearance */
  905. legend{color:rgb(0,0,0);} /*because legend doesn't inherit in IE */
  906.  
  907.  
  908. mf54_grid.php
  909. <?php header("Content-type: text/css"); ?>
  910.  
  911. /****************************************************************/
  912. /*--------------------------------------------------------------*/
  913. /* License: Fully open source without restrictions. */
  914. /* Please keep footer credits with the words */
  915. /* "Design by 1234.info". Thank you! */
  916. /****************************************************************/
  917.  
  918. /******************/
  919. /* GLOBAL LAYOUT */
  920. /******************/
  921.  
  922. body {font-size:62.5%; background-color:<?php include('bg.txt') ?>; font-family:arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/
  923. .container {width:978px; padding-top:10px; padding-bottom:20px; margin:0 auto; font-size:1.0em;}
  924. .header {width:958px; height:130px; border:solid <?php include('hdrbdrwidth.txt') ?>px <?php include('hdrbdr.txt') ?>; background:<?php include('hdrbg.txt') ?> url(../img/bg_header.jpg) repeat-x /*Total header background image entered here. Height: 125px*/; font-size:1.0em; margin-bottom:10px;}
  925.  
  926. .navbar {float:left; width:958px; border: solid 10px <?php include('topnavbdr.txt') ?>; background-color:<?php include('topnavbg.txt') ?>; font-family:tahoma,arial,sans-serif; font-size:130% !important /*Non-IE6*/; font-size:120% /*IE6*/;} /*Color navigation bar normal mode*/
  927. .main {clear:both; width:958px; padding:0px 0 10px 0; border-left:solid 10px <?php include('bodybdr.txt') ?>; border-top:solid 10px <?php include('bodybdr.txt') ?>; border-right:solid 10px <?php include('bodybdr.txt') ?>; background-color:<?php include('bodybdr.txt') ?>; font-size:1.0em;}
  928. .content {display:inline; /*Fix IE floating margin bug*/; float:right; width:676px; background-color:<?php include('bodybdr.txt') ?>; font-size:1.0em; overflow:visible !important /*Non-IE6*/; overflow:hidden /*IE6*/;}
  929. .subcontent {display:inline /*Fix IE floating margin bug*/; float:left; width:270px; background-color:<?php include('bodybdr.txt') ?>; font-size:1.0em; overflow:visible !important /*Non-IE6*/; overflow:hidden /*IE6*/;}
  930. .footer {clear:both; width:958px; padding:1.0em 0 1.0em 0; border-left:solid 10px <?php include('bodybdr.txt') ?>; border-right:solid 10px <?php include('bodybdr.txt') ?>; border-bottom:solid 10px <?php include('bodybdr.txt') ?>; background-color:<?php include('ftrbg.txt') ?>; font-size:1.1em !important /*Non-IE6*/; font-size:1.0em /*IE6*/; overflow:visible !important /*Non-IE6*/; overflow:hidden /*IE6*/;}
  931.  
  932. /****************/
  933. /* HEADER-TOP */
  934. /****************/
  935.  
  936. /* SITENAME AND SLOGAN */
  937. .sitelogo {width:170px; height:70px; position:absolute; z-index:1; margin:15px 0 0 15px; background:url(../img/bg_logo.gif);}
  938. .sitename {width:300px; height:70px; position:absolute; z-index:1; margin:27px 0 0 195px; overflow:hidden;}
  939. .sitename h1 {font-family:"trebuchet ms",arial,sans serif; font-weight:normal; font-size:290%;}
  940. .sitename h2 {font-family:verdana,arial,sans serif; margin-top:-5px; padding-bottom:2px; color:<?php include('hdrslgn.txt') ?>; height:20px; font-weight:normal; font-size:130%;}
  941. .sitename a{text-decoration:none; color:<?php include('hdrttl.txt') ?>;}
  942. .sitename a:hover {text-decoration:none; color:<?php include('hdrslgn.txt') ?>;}
  943.  
  944. /* BUTTON NAVIGATION */
  945. .navbutton {width:100px; position:absolute; z-index:2; margin-top:26px; margin-left:747px !important /*Non-IE6*/; margin-left:750px /*IE6*/;}
  946. .navbutton ul {float:right;}
  947. .navbutton li {display:inline; list-style:none;}
  948. .navbutton li a {padding-left:3px;}
  949. .navbutton a:hover {text-decoration:none;}
  950. .navbutton a img {height:72px;width:100px;}
  951.  
  952. /********************/
  953. /* NAVIGATION BAR */
  954. /********************/
  955.  
  956. /* MAIN MENU */
  957. .navbar ul {list-style-type:none;}
  958. .navbar ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; background-color:color:<?php include('topnavbg.txt') ?>;}
  959. .navbar ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:<?php include('topnavtxt.txt') ?>; border-right:solid 0px rgb(215,215,215);}
  960. .navbar ul li ul {display:none; border:none;}
  961.  
  962. /* SUBMENU (Non-IE6 hovering) */
  963. .navbar ul li:hover {position:relative;} /*Sylvain IE hack*/
  964. .navbar ul li:hover a {background-color:<?php include('topnavbghvr.txt') ?>; color: <?php include('topnavtxthover.txt') ?>; text-decoration:none;} /*Color main cells hovering mode*/
  965.  
  966. /* SUBMENU (IE6 hovering) */
  967. .navbar ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:<?php include('topnavbghover.txt') ?>; color: <?php include('topnavtxthvr.txt') ?>; text-decoration:none;} /*Color main cells hovering mode*/
  968.  
  969.  
  970. /************/
  971. /* CONTENT */
  972. /************/
  973.  
  974. /* CONTAINER (NO BOXES) */
  975. .content-1col-nobox {width:676px; background-color:<?php include('conbg.txt') ?>; margin-bottom:10px;}
  976. .content-2col-nobox-leftcolumn {display:inline; float:left; width:437px; border-right:solid 1px rgb(215,215,215) /*Use this statement if left column is longer than the right column. Activate by removing "xx_" from property name*/; background-color:<?php include('conbg.txt') ?>;}
  977. .content-2col-nobox-rightcolumn {display:inline; float:right; width:237px; border-left:solid 1px rgb(215,215,215)/*Use this statement if right columnn is longer than the left column. De-activate by adding "xx_" to propery name*/; background-color:<?php include('conbg.txt') ?>;}
  978.  
  979. /***************/
  980. /* SUBCONTENT */
  981. /***************/
  982.  
  983. .subcontent-box {width:270px; float:left; background-color:<?php include('sidebg.txt') ?>; margin-bottom:10px;}
  984.  
  985. /************/
  986. /* FOOTER */
  987. /************/
  988. .footer p {clear:both; line-height:1.3em; text-align:center; color:<?php include('ftrtxt.txt') ?>; font-weight:bold; font-size:110%;}
  989. .footer p.credits {clear:both; font-weight:normal;}
  990. .footer a, .footer a:visited {text-decoration:underline; color:<?php include('ftrtxta.txt') ?>;}
  991. .footer a:hover {text-decoration:none; color:<?php include('ftrtxtahvr.txt') ?>;}
  992.  
  993.  
  994.  
  995. /******************/
  996. /* CLEAR FLOATS */
  997. /******************/
  998. .container:after, .header:after, .header-top:after, .header-bottom:after, .navbar:after, .main:after, .content:after, .content div:after, .subcontent:after, .subcontent div:after, .footer:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
  999. .content-1col-nobox:after, .content-2col-nobox-leftcolumn:after, .content-2col-nobox-rightcolumn:after, .content-1col-box:after, .content-2col-box-leftcolumn:after, .content-2col-box-rightcolumn:after, .content-2col-box:after, .subcontent-box:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
  1000. .corner-content-1col-top:after, .corner-content-1col-bottom:after, .corner-content-2col-top:after, .corner-content-2col-bottom:after, .corner-subcontent-top:after, .corner-subcontent-bottom:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
  1001. p:after {content:"."; display:block; height:0; /*clear:both Do not use here to avoid paragraphs clearing next to images;*/ visibility:hidden;}
  1002.  
  1003. /**************/
  1004. /* PRINTING */
  1005. /**************/
  1006. /* To avoid that some layouts may break during printing */
  1007. /* we remove one vertical border-line for the columns */
  1008. @media print {.content-2col-nobox-rightcolumn {display:inline; float:right; width:337px; border-left:none; background-color:rgb(255,255,255);}}
  1009.  
  1010. /********************************************/
  1011. /* USED ONLY FOR DEMO PAGE FOR GRID SETUP */
  1012. /* Do not use for operational purposes */
  1013. /********************************************/
  1014. .main p.demo {margin:0; padding:10px 20px 50px 20px;}
  1015.  
  1016. /******************************************/
  1017. /* YOUR OWN USER STYLES */
  1018. /* If you want to add your own styles, */
  1019. /* then add them here below in order to */
  1020. /* avoid a mixup with default styles. */
  1021. /******************************************/
  1022.  
  1023.  
  1024.  
  1025. mf54_content.php
  1026. <?php header("Content-type: text/css"); ?>
  1027.  
  1028. /****************************************************************/
  1029. /* Design: Multiflex-5.4 */
  1030. /* Type: Design with sidebar */
  1031. /* File: Content Toolbox */
  1032. /*--------------------------------------------------------------*/
  1033. /* Design: www.1234.info */
  1034. /* Date: March 13, 2008 */
  1035. /*--------------------------------------------------------------*/
  1036. /* License: Fully open source without restrictions. */
  1037. /* Please keep footer credits with the words */
  1038. /* "Design by 1234.info". Thank you! */
  1039. /****************************************************************/
  1040.  
  1041. /*************/
  1042. /* CONTENT */
  1043. /*************/
  1044.  
  1045. /* PAGETITLE */
  1046. .main h1.pagetitle {margin:0 0 0.5em 0; padding:10px 0 10px 52px; background-color: lightgreen; color:<?php include('pagettltxt.txt') ?>; font-weight:bold; font-size:220%;}
  1047.  
  1048. /* HEADING -- Standard icon (1-Column / 2-Column) */
  1049. .content h1 {margin:0; padding:5px 25px 12px 10px; border-bottom:solid 1px rgb(215,215,215); background:<?php include('conh1bg.txt') ?> url(../img/icon_celltitle_level1.gif) no-repeat; background-position:632px 5px; color:<?php include('conh1.txt') ?>; font-weight:bold; font-size:220%;}
  1050.  
  1051. .content h2 {clear:both; /*Start IE Hack*/ position:relative; z-index:1; top:-1px /* End IE Hack to remove vertical -1px margin bug otherwise produced by margin*/; margin: 0 20px 0 20px; padding:15px 15px 5px 0; background: transparent; background-position:right 15px; color:<?php include('conh2.txt') ?>; font-weight:bold; font-size:180%;}
  1052. .content h3 {margin:1.0em 0 -0.3em 0; padding:0 10px 0 10px; color:rgb(75,75,75); font-weight:bold; font-size:180%;}
  1053. .content h4 {margin:1.0em 0 -0.3em 0; padding:0 10px 0 10px; color:<?php include('conh4.txt') ?>; font-weight:bold; font-size:160%;}
  1054. .content h5 {margin:1.0em 0 -0.5em 0; padding:0 10px 0 10px; color:<?php include('conh5.txt') ?>; font-weight:bold; font-size:140%;}
  1055. .content h6 {margin:0.4em 0 0.5em 0; padding:0 10px 0 10px; color:; font-weight:normal; font-size:130% !important /*Non-IE6*/; font-size:115% /*IE6*/;}
  1056.  
  1057. /* PARAGRAPH TEXT */
  1058. .content p {margin:1.0em 0 1.0em 0; color:<?php include('conp.txt') ?>; line-height:1.3em; padding: 0 10px 0 10px; font-size:131%;}
  1059. .content p.details {margin:-0.2em 0 1.0em 0; line-height:1.0em; font-size:120%;}
  1060. .content blockquote {clear:both; margin:0 30px 0.6em 30px; padding:5px 10px 5px 10px; border-left: solid 7px <?php include('conbqbdr.txt') ?>; font-size:13px; font-weight: bold; font-family: Georgia; font-style: italic; color:<?php include('conbqtxt.txt') ?>; background-color:<?php include('conbqbg.txt') ?>;}
  1061.  
  1062. /* LIST */
  1063. .content ul {margin:5px 20px 10px 20px; padding:0 10px 0 10px; list-style-position:inside;}
  1064. .content ul li {color:#333; list-style: square; line-height:20px; font-size:13px;}
  1065. .content ul li a{color:<?php include('bdylk.txt') ?>; list-style: square; font-size:13px;}
  1066. .content ul li a:hover{color:<?php include('bdylkhvr.txt') ?>;}
  1067.  
  1068. .content ol {margin:5px 20px 10px 20px; padding:0 10px 0 10px; list-style-position:inside;}
  1069. .content ol li {color:#333; list-style: decimal; line-height:20px; font-size:13px;}
  1070. .content ol li a{color:<?php include('bdylk.txt') ?>; list-style: square; font-size:13px;}
  1071. .content ol li a:hover{color:<?php include('bdylkhvr.txt') ?>;}
  1072.  
  1073. /* TABLE (1-Column / 2-Column) */
  1074. .content table {clear:both; width:400px; margin:2.0em 0 0.2em 20px; table-layout:fixed; border-collapse:collapse; empty-cells:show; background-color:rgb(233,232,244);}
  1075. .content-2col-nobox-leftcolumn table, .content-2col-nobox-rightcolumn table, .content-2col-box-leftcolumn table, .content-2col-box-rightcolumn table {clear:both; width:390px; margin:2.0em 0 0.2em 20px; table-layout:fixed; border-collapse:collapse; empty-cells:show; background-color:rgb(233,232,244);}
  1076.  
  1077. .content table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; background-color:rgb(175,175,175); text-align:left; color:rgb(255,255,255); font-weight:bold; font-size:120%;}
  1078. .content table th {height:3.0em; padding:2px 20px 2px 7px; border:solid 2px rgb(245,245,245); background-color:rgb(225,225,225); text-align:left; color:rgb(80,80,80); font-weight:bold; font-size:120%;}
  1079. .content table td {height:3.0em; padding:2px 7px 2px 7px; border:solid 2px rgb(245,245,245); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:120%;}
  1080. .content p.caption {clear:both; margin:0.5em 0 2.0em 0; text-align:left; color:rgb(80,80,80); font-size:120%;}
  1081.  
  1082. /* CONTACT FORM (1-Column / 2-Column) */
  1083. .contactform {width:636px; margin:1.0em 10px 0 20px;}
  1084. .contactform fieldset {padding:10px 0 10px 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
  1085. .contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:131%;}
  1086. .contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:100%;}
  1087. .contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-size:100%;}
  1088. .contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-size:100%;}
  1089. .contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-size:100%;}
  1090. .contactform input.button {float:left; width:9.0em; margin-left:115px !important /*Non-IE6*/; margin-left:118px /*IE6*/; padding:3px !important /*Non-IE6*/; padding:2px /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; color:rgb(150,150,150); font-size:100%;}
  1091. .contactform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}
  1092.  
  1093. .content-2col-nobox-leftcolumn .contactform, .content-2col-nobox-rightcolumn .contactform, .content-2col-box-leftcolumn .contactform, .content-2col-box-rightcolumn .contactform {width:397px; margin:1.0em 10px 0 20px;}
  1094. .content-2col-nobox-leftcolumn .contactform fieldset, .content-2col-nobox-rightcolumn .contactform fieldset, .content-2col-box-leftcolumn .contactform fieldset, .content-2col-box-rightcolumn .contactform fieldset {padding:10px 0 10px 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
  1095. .content-2col-nobox-leftcolumn .contactform fieldset legend, .content-2col-nobox-rightcolumn .contactform fieldset legend, .content-2col-box-leftcolumn .contactform fieldset legend, .content-2col-box-rightcolumn .contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:131%;}
  1096. .content-2col-nobox-leftcolumn .contactform label.left, .content-2col-nobox-rightcolumn .contactform label.left, .content-2col-box-leftcolumn .contactform label.left, .content-2col-box-rightcolumn .contactform label.left {float:left; width:100px; margin:0; padding:2px; font-size:100%;}
  1097. .content-2col-nobox-leftcolumn .contactform select.combo, .content-2col-nobox-rightcolumn .contactform select.combo, .content-2col-box-leftcolumn .contactform select.combo, .content-2col-box-rightcolumn .contactform select.combo {width:240px; padding:2px; border:solid 1px rgb(200,200,200); font-size:100%;}
  1098. .content-2col-nobox-leftcolumn .contactform input.field, .content-2col-nobox-rightcolumn .contactform input.field, .content-2col-box-leftcolumn .contactform input.field, .content-2col-box-rightcolumn .contactform input.field {width:235px; padding:2px; border:solid 1px rgb(200,200,200); font-size:100%;}
  1099. .content-2col-nobox-leftcolumn .contactform textarea, .content-2col-nobox-rightcolumn .contactform textarea, .content-2col-box-leftcolumn .contactform textarea, .content-2col-box-rightcolumn .contactform textarea {width:242px; padding:2px; border:solid 1px rgb(200,200,200); font-size:100%;}
  1100. .content-2col-nobox-leftcolumn .contactform input.button, .content-2col-nobox-rightcolumn .contactform input.button, .content-2col-box-leftcolumn .contactform input.button, .content-2col-box-rightcolumn .contactform input.button {float:left; width:9.0em; margin-left:130px !important /*Non-IE6*/; margin-left:133px /*IE6*/; padding:3px !important /*Non-IE6*/; padding:2px /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; color:rgb(150,150,150); font-size:100%;}
  1101. .content-2col-nobox-leftcolumn .contactform input.button:hover, .content-2col-nobox-rightcolumn .contactform input.button:hover, .content-2col-box-leftcolumn .contactform input.button:hover, .content-2col-box-rightcolumn .contactform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}
  1102.  
  1103.  
  1104. /****************/
  1105. /* SUBCONTENT */
  1106. /****************/
  1107.  
  1108. /* HEADING -- Standard icon */
  1109. .subcontent h1 {margin:0; padding:10px 10px 10px 10px; background:<?php include('sideh1lbg.txt') ?>; color:<?php include('sideh1.txt') ?>; font-weight:bold; font-size:20px;}
  1110. .subcontent h2 {/*Start IE Hack*/ position:relative; z-index:1; top:-1px; /* End IE Hack to remove vertical -1px margin bug otherwise produced by margin*/ margin:0 10px 0 10px; padding:5px 10px 5px 0; color:<?php include('sideh2.txt') ?>; font-weight:bold; font-size:180%;}
  1111. .subcontent h3 {margin:1.0em 0 -0.3em 0; padding:0 20px 0 20px; color:<?php include('sideh3.txt') ?>; font-weight:bold; font-size:180%;}
  1112. .subcontent h4 {margin:1.0em 0 -0.3em 0; padding:0 20px 0 20px; color:<?php include('sideh4.txt') ?>; font-weight:bold; font-size:160%;}
  1113. .subcontent h5 {margin:1.0em 0 -0.6em 0; padding:0 20px 0 20px; color:<?php include('sideh5.txt') ?>; font-weight:bold; font-size:140%;}
  1114. .subcontent h6 {margin:0.4em 0 0.5em 0; padding:0 20px 0 20px; color:<?php include('sideh6.txt') ?>; font-weight:normal; font-size:130%;}
  1115.  
  1116.  
  1117. /* PARAGRAPH TEXT */
  1118. .subcontent p {margin:1.0em 0 1.0em 0; color:rgb(0,0,0); line-height:1.3em; padding: 0 20px 0 20px; font-size:131%;}
  1119. .subcontent p.details {margin:-0.2em 0 1.0em 0; line-height:1.0em; font-size:120% !important /*Non-IE6*/; font-size:110% /*IE6*/;}
  1120. .subcontent blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;}
  1121.  
  1122.  
  1123.  
  1124. /* TABLE */
  1125. .subcontent table {clear:both; width:230px; margin:2.0em 0 0.2em 20px; table-layout: fixed; border-collapse:collapse; empty-cells:show; background-color:rgb(233,232,244);}
  1126. .subcontent table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; background-color:rgb(175,175,175); text-align:left; color:rgb(255,255,255); font-weight:bold; font-size:120% !important /*Non-IE6*/; font-size:110% /*IE6*/;}
  1127. .subcontent table th {height:3.0em; padding:2px 20px 2px 7px; border:solid 2px rgb(245,245,245); background-color:rgb(225,225,225); text-align:left; color:rgb(80,80,80); font-weight:bold; font-size:120% !important /*Non-IE6*/; font-size:110% /*IE6*/;}
  1128. .subcontent table td {height:3.0em; padding:2px 7px 2px 7px; border:solid 2px rgb(245,245,245); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:120% !important /*Non-IE6*/; font-size:110% /*IE6*/;}
  1129. .subcontent p.caption {clear:both; margin:0.5em 0 2.0em 0; text-align:left; color:rgb(80,80,80); font-size:120% !important /*Non-IE6*/; font-size:110% /*IE6*/;}
  1130.  
  1131. /* CONTACT FORM */
  1132. .subcontent .contactform {width:230px; margin:1.0em 10px 0 20px;}
  1133. .subcontent .contactform fieldset {padding:10px 0 10px 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
  1134. .subcontent .contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; color:rgb(80,80,80); font-weight:bold; font-size:131%;}
  1135. .subcontent .contactform label.left {float:left; width:85px; margin:0; padding:2px; font-size:100%;}
  1136. .subcontent .contactform select.combo {width:90px; padding:2px; border:solid 1px rgb(200,200,200); font-size:100%;}
  1137. .subcontent .contactform input.field {width:85px; padding:2px; border:solid 1px rgb(200,200,200); font-size:100%;}
  1138. .subcontent .contactform textarea {width:178px; padding:2px; border:solid 1px rgb(200,200,200); font-size:100%;}
  1139. .subcontent .contactform input.button {float:left; width:9.0em; margin-left:67px !impo

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.