|
HTML - How Do I Optimeze My Joomla Template To 800x600
Hi: some help needed how can optimize this template, i would lake to optimize it for 800x600, and also i would like to expand the with of the table to make space for a second menu on the left.
Thanks in advance Code: BODY {
background: url(../images/bg.jpg) repeat;
font: 10px Verdana, sans-serif;
color: #fefefe;
margin: 0;
padding: 0;
}
.pathway {
padding-left : 5px;
border : 0;
color: #ffffff;
font-family: Arial;
}
a.pathway:link, a.pathway:visited {
color : #ffffff;
font-size : 11px;
line-height : 18px;
font-family: Arial;
}
a.pathway:hover {
color : #ffffff;
font-family: Arial;
}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
line-height: 20px;
padding-left: 12px;
padding-top: 0px;
background-image: url(../images/bullet.png) ;
background-repeat: no-repeat;
background-position: 0px 3px;
}
.pagenav
{
font-size:12px;
font-weight:normal;
}
.componentheading
{
height: 14px;
margin-left:2px;
padding-left:3px;
border-bottom: 1px solid #336699;
color: #336699;
text-align: left;
white-space: nowrap;
font-family: Arial;
font-size:12px;
font-weight:bold;
}
a.toclink:link, a.toclink:visited
{
line-height:normal;
font-size:11px;
font-family:arial;
color: #000000;
text-decoration: underline;
}
a.toclink:hover
{
text-decoration: none;
}
table.contenttoc {
border: 1px solid #000000;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}
table.contenttoc th {
background: #E1DECF;
color: #C20A28;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 11px;
text-transform: uppercase;
}
.button1 {
margin-top:3px;
margin-bottom: 3px;
padding-left:5px;
padding-right:5px;
border:solid 1px #ADAA9C;
background-color: #E1DECF;
color: #000000;
font-family: Arial, Helvetica, Sans Serif;
text-align: center;
font-size: 11px;
}
.button2 {
background: url(../images/sg_13_45.jpg) no-repeat;
width:28;
height:19;
border:0px;
text-align: center;
}
.sectiontableheader
{
background: #E1DECF;
height: 20px;
padding-right:3px;
font-weight :bold;
}
table.contentpane td.contentdescription
{
font-size:12px;
line-height:18px;
}
table.contentpane td.componentheading
{
background:#E1DECF;
height: 20px;
padding-left:3px;
border: 1px solid #000000;
color: #C20A28;
text-align: left;
padding-bottom:3px;
white-space: nowrap;
font-family: Arial;
font-size:14px;
font-weight:bold;
}
table.contentpane td
{
padding-top:1px;
padding-bottom:2px;
font-size:12px;
}
a:link, a:visited {
font-family:arial;
color: #000000;
text-decoration: underline;
}
a:hover {
text-decoration:none;
}
table.contentpaneopen
{
width:100%;
}
table.contentpaneopen td
{
line-height:18px;
font-size:12px;
}
table.contentpaneopen td.contentheading
{
height: 20px;
padding-left:3px;
color: #77C21F;
text-align: left;
white-space: nowrap;
font-family: Franklin Gothic T Medium,Arial;
font-size:14px;
font-weight:bold;
border-bottom:1px solid #336699;
}
a.sublevel:link, a.sublevel:visited {
font-size: 10px;
color: #FFFFFF;
text-align: left;
text-decoration: underline;
vertical-align:middle;
}
a.sublevel:hover {
text-decoration: none;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
vertical-align: middle;
font-size: 11px;
text-align: left;
padding-left:0px;
padding-top: 5px;
height: 16px;
width:130px;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #FFFFFF;
color:#FFFFFF;
}
a.mainlevel:hover {
text-decoration: none;
border-bottom-color: #FFFFFF;
color: #FFFFFF;
text-align: right;
}
table.moduletable {
width:100%;
margin-bottom: 5px;
border-spacing: 0px;
border-collapse: collapse;
}
table.moduletable th {
color: #336699;
text-align: left;
vertical-align:middle;
padding-left: 16px;
height: 25px;
font-weight: bold;
font-size: 12px;
}
table.moduletable td {
margin-top:12px;
padding-left:7px;
font-size: 11px;
margin: 10px;
font-weight: bold;
}
td
{
font-family:Franklin Gothic T Medium,arial;
font-size:11px;
color:#3C3032;
}
.mymoduletdmiddle
{
background: url(../images/module_middle_graphic.gif) repeat-y;
padding-left:18px;
padding-right:10px;
}
.mymoduletdheader
{
background: url(../images/module_top_graphic.gif) no-repeat;
height: 13px;
}
.mymoduletdfooter
{
background: url(../images/module_footer_graphic.gif) no-repeat;
height: 10px;
}
.mymodulebg
{
background: url(../images/general_module_bg.jpg) no-repeat right bottom;
height:110px;
}
.mymainbody
{
padding-top :3px;
padding-left:5px;
padding-right :23px;
}
.inputboxs {
background: url(../images/sg_13_43.jpg) no-repeat;
border:none;
margin:0;
padding-top:2px;
width: 109px;
height: 18px;
font-family:Verdana;
font-size:10px;
color:#3C3032;
vertical-align: top;
}
#search {
margin: 0px;
padding: 0px;
width: 109px;
height: 18px;
float: left;
vertical-align: top;
}
#search2 {
margin: 0px;
padding: 0px;
vertical-align: top;
}
.date {
font-family:Verdana;
font-size:10px;
color:#cccccc;
padding-left:4px;
}
/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
color : #333;
font-size : 11px;
font-family: Arial;
text-decoration:none;
}
a.sgfooter:hover {
color : #333;
font-family: Franklin Gothic T Medium,Arial;
text-decoration:none;
}
.sgf {
font-size: 9px;
font-family: Franklin Gothic T Medium,Verdana,Arial,Helvetica,sans-serif;
color: #333;
text-decoration:none;
}
.sgf1 {
font-size: 10px;
font-family:Franklin Gothic T Medium, Verdana,Arial,Helvetica,sans-serif;
color: #333;
text-align:left;
}
a.sglink:link, a.sglink:visited {
color : #333;
font-size : 11px;
font-family: Franklin Gothic T Medium,Arial;
text-decoration:none;
}
a.sglink:hover {
color : #333;
font-family: Franklin Gothic T Medium,Arial;
text-decoration:none;
}
Similar TutorialsWhy? or.. why not? Im getting this weird vibe off it.. must be because im used to software like Dreamweaver. Any users here? Whats the most satisfying way to work with it? Ive tried searching but the pages are driving me nuts. My host recently added Joomla(formerly Mambo) to the list of progs. we can use. Has anyone used Joomla before, and does it fare well with search engines or the same as html? Thanks, Geoserv. hi.... i created a Newsletter in photoshop and slice all the areas i wanted to, and i saved it as image and html but when i upload it to joomla editor the images are not in line.... the images don't bland they have a gap between each image..... if i save the html on my desktop along with the images and open it in IE or firefox it works and looks great..... please see attachment for an example hi, what's the best cms, wordpress or Jomla ? I really like the backup plugins in Joomla, I dunno if it exists something similar in wordpress. The wordpress backend seems to be more professional... thanks i won't a image slider for my joomla home page now i have found many image sliders. but all this image sliders must i gave a height en weight and he make the pictures on that size. have somewane a script that don't ask that and used the size of the picture inplace of the size of the box or that he autosize the picture. but i mus't get the image from a folder on the server inplace of the picture link in the script I know Php scripting language. and I also know Joomla a bit. i want to create my own joomla module. How can i develop joomla module? Please suggest e-book or video tutorial. Thanks. _________________ 7zip download this is probably very basic, but I'm not very familiar with html at all. I have the code shown below (shows a weather graphic) which I have put into an article on my joomla site, unfortunately some of the text is in black and doesn't show up on my site which has a black background. Is there some code I can add to put the graphic on a white background with a neat border around it? Thanks <script type="text/javascript"> var sbLoc=1; // Location ID var sbLocFixed=1; // 0=user can change location var sbSize='l'; // m=mini,l=large var sbRedHigh=0; // 0=green high wind, 1=red high wind document.write('<scr'+'ipt src="'+document.location.protocol+'//'+( document.location.protocol.toLowerCase()=='https' ? 'secure' : 'www') + '.seabreeze.com.au/members/weather/widget.aspx?size='+sbSize+'&loc='+sbLoc+'&rev='+sbRedHigh+'&fixed='+sbLocFixed+'"></scr'+'ipt>'); </script> can somebody tell me why this dont work. i have read this joomla document and it says that you can use style so i wanne padding im but it don't work i have read this document http://docs.joomla.org/Jdoc_statements <jdoc:include type="modules" name="taal" style="padding-left: 620px;" /> How would you add a template to your site with HTML. This concept is getting very annoying and I have started arguing with someone on this subject. Please if you know how to do this please don't hesitate to tell me. Thanks in advance!! -Levi Hi guys.I have very little html experience so I decided to work from a template. Problem is, I didn't even know how to add some of the simple stuff. I was able to figure out how to add: a) the background b) the main header(banner) and c) a few normal pictures I have no idea however how to add the: sidebar, menubar (where about us, etc is), or the footer. I don't know where the programming for them starts or how to add so that the show up. In the following post I'll add my website name and code: I have an older template that has a stylesheet and iframes.html I am wanting to put this into it and just havent had any luck. <!-- MLCALC BEGIN --> <script type="text/javascript"><!-- mlcalc_default_calculator = 'loan'; mlcalc_currency_code = 'usd'; mlcalc_amortization = 'year_nc'; //--></script> <script type="text/javascript" src="http://www.mlcalc.com/jquery.js"></script><div style="font-weight:normal;font-size:9px;font-family:Tahoma;padding:0;margin:0;border:0;background:transparent;color:#E5E5E5;width:300px;text-align:right;padding-right:10px;" id="mlcalcWidgetHolder"><script type="text/javascript" src="http://www.mlcalc.com/widget-wide.js"></script>Powered by <a href="http://www.mlcalc.com/" style="color:#E5E5E5;text-decoration:none">Mortgage Calculator</a></div> <!-- MLCALC END --> I have been able to muddle it into the page but get script error. I am sure I need to provide more information. The tables on the page are just to confusing for me to work this in. Just thought I would start off with the problem. Wasnt sure what forum to put this in either thanks in advance for any input. Hey there. I have a blog. its called reign of uncertainty, and the url is www.confusedforeternity.blogspot.com i am using a zigmag remedy template. i am trying to put links in the bar, where it says "home, about me, art....". but the template automatically prefixes the blog url before the link. if i put www.deviantart.com in the xml code, it automatically becomes http://www.confusedforeternity.blogs...deviantart.com. i am not the good at coding and i dont know why its happening. the xml template is available he http://www.mediafire.com/?tz3mzcgntmt A solution will be appreciated. Hey everyone, First of all, I don't know any HTML, I'll be following a tutorial later this week to learn it, yet I decided to give website lay-outs, a go. Here's what I got so far. Now my questions are, do I have to add the text on there now? Or will I add it with HTML later on? And my other question is, how exactly does the slice tool work? Do I just have to slice it all in pieces? Or do I have to add the URL to it too? (If you double-click a slice you can enter a URL, how can I know the URL if I don't even have a site yet?) Thanks a lot! HI Guys, I am making a template using Web 2.0. Everything was alright but when I opened the html files in Dreamweaver again for work. One div in the middle it showed white space. When I viewed it in firefox, it viewed completely and there was no white space. The text was there , everything was there. I dont get it, where did the white space came from. Also, if I view the code view, that specific div is highlighted with yellow color. Also the yellow highlighted div is showing in the design view. I am attaching the screenshots. Kindly help with this Regards, a2usmani Hi, this may not be even a HTML question but... I was wondering if there was a way to create some kind of website template, so if I wanted to add a banner or something to a page I don't have to go into each individual html file and put it in. Something like a css that everything references to and making a change in that changes all. THX. Well okay it's me again. I'm making another template. How do I get this: Image To look like this: Image And then let me add text? Codes: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apateezer - Home</title>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
</head>
<body>
<div id="page">
<div id="Header">
</div>
<div id="linkbar">
<div id="page">
<p>test</p>
</div>
<div id="footer">
<p>Copyright (c) 2008 Apateezer.com <br/>
All Rights Reserved.</p>
</div>
</div>
</body>
</html>
Code: body {
background-color:#000000;
margin:0;
padding:0;
text-align:center;
font-family:Trebuchet MS Bold;
font-size:16px;
color:#ffffff;
}
#page {
width:960px;
margin:auto;
padding:auto;
background-image:url(images/page.png);
text-align:center;
}
#header {
width:780px;
height:123px;
background-image:url(images/header.png);
clear:both;
}
#linkbar {
width:780px;
height:66px;
background-image:url(images/linkbar.png);
clear:both;
}
#footer {
width:780px;
height:51px;
background-image:url(images/footer.png);
clear:both;
}
PLease help. here is the template. it's coded badly since I used photoshop and dreamweaver since I dont really know how to code. the only thing I need to do is add a div tag in the body thats white and another div tag for the footer with that color. ive been messing with it but i cant get it. i end up messing the whole template up. could someone please help me with those 2 spots please? I'm trying to make a template for e-bay using Dreamweaver. When I use CSS, it applies everything to the whole auction, so even the e-bay things have the font as orange. I went in and changed everything to html and things look better, but I'm having a problem with the border around my images. I would like it to be the color in the background instead of black. Here is a screenshot of what I am talking about. http://s132.photobucket.com/albums/q...screenshot.jpg Here is the code I currently have: <img src="http://i132.photobucket.com/albums/q14/littlestinkerstore/SSTemplate/ssimagej.jpg" width="288" height="288" border="9"></p> <p align="center"> </p> <p align="center"><img src="http://i132.photobucket.com/albums/q14/littlestinkerstore/SSTemplate/ssdescriptionj.jpg" width="450" height="225" border="2"></p> What I would REALLY like is a border around the image that is another image, a pattern used in the background, but I will be happy with a color that matches!! Thanks! |
|||||||