I followed Nabeel’s tutorial to create the skin. When I loaded it up it didn’t look like it should. I thought I did everything right, but I guess I didn’t. Can anyone help? Thanks. The site is: http://www.patva1.comli.com/phpvms
Hi There
I think the problem is only a slight one. When you setup teh image link did you add the
<?php echo SITE_URL?>
I.e. If you made an normal html template and then converted it for use with phpVM you link would have looked something like this
image/image.jpg
In php VMS that link should look like this
<?php echo SITE_URL?>/lib/skins/yourskin/images/image.jpg
Replace the youskin with whatever your skin name is and of course your image name accordingly.
I cant wait to see it.
Thank you very much. That fixed it, small typing error. Now I just have to change the colors and a few images.
Glad I could help, Looks good!!
Ok, I have a few more problems. How do I change the space between the navigation tabs? Also with the new pilots and new reports on the left, they show up on every page. I did what Nabeel said to do so they don’t show up on every page. I must have made an error somewhere. Also, thank you for the compliment.
Here is the particular area in the header.tpl:
</php
if($_GET[‘module’] – ‘frontpage’)
{
?>
<td class=“left_content”>
<h3>Recent Reports</h3>
<?php MainController::Run(‘PIREPS’, ‘RecentFrontPage’, 5); ?>
<h3>Newest Pilots</h3>
<?php MainController::Run(‘Pilots’, ‘RecentFrontPage’, 5); ?>
</td>
</php
}
?>
My added pages (ones I created) don’t show up either.
I am not too sure about new pages, I have not used that funtion yet.
What I can tell you is that code you copied into you opost should not appear in your header.tpl file. That should appear in a seperate file which was already supplied called, frontpage_main.tpl.
This is the reason why it is appearining on every page.
Here is what needs to appear in your header.tpl:
before your head tage, and I meant literally hebore teh </head> you need this code:
<?php
Template::Show('core_htmlhead.tpl');
?>
<link href="styles.css" rel="stylesheet" type="text/css">
Then immediately after your body tag, again directly after teh <body> you need this code in there:
<?php
Template::Show('core_htmlreq.tpl');
?>
The wherever you are going to want to have your navigation you need this code:
<?php
Template::Show('core_navigation.tpl');
?>
I have my navigation menu customised from teh one supplied with phpVMS,m so I copied teh core_navigation.tpl to my skins folder. This goes for any page you want to customise.
i.e. copy it from this location:
site/core/templates
to this location:
site/lib/skins/yourskin
Replace site of course with your site, etc
Where exactly do I need to put the php coding in the frontpage_main.tpl?
You dont need to, that gets taken care of automatically.
You only need to work on that page if you want to add extra side bar items. like a log in or a teamspeak box, etc
Ok.
It did not work. I took the code out of the header.tpl, and I do have the frontpage_main.tpl in the skin folder. Also how do you change the width between the buttons on the navigation bar? I looked around the header.tpl but didn’t spot anything related to it, I might have missed it though.
OK for the navigation that comes from core_navigation.tpl, but the look and feel is created from the CSS style sheet.
I see you have changed your template. Looks great.
Not sure why it wont work. I find teh base skinning pretty easy and simple to do
There is an lot of files there, but the only ones you really need to know about are header.tpl and footer.tpl. I liked teh way Nabeel created blank versions and copied and pasted into them as he needed.
I mught also suggest reading the folowing pages from teh doc tab in this website. This will highlight the basics.
http://docs.phpvms.net/skinning#creating_skins
If you need more help, just let me know. I am still new to this myself (only 1 skin behind me). I have only just discoivered tihs fantastioc software a few weeks back.
Do I need to include all of those .tpl files from the core/templates folder in my skin folder?
No Not at all, only the ones you want to change/modify.
In my case the only ones I have is the Profile_main.tpl and core_navigation.tpl and thats it.
Nabeel was very clever when he designed this one, his siftware will first look inside your skins folder for the required file, if it has not been customised, it will then search for it in its defauklt location.
This way you can change/modify only the files that are absolutely essential
It did not work. I took the code out of the header.tpl, and I do have the frontpage_main.tpl in the skin folder. Also how do you change the width between the buttons on the navigation bar? I looked around the header.tpl but didn’t spot anything related to it, I might have missed it though.
That width is defined in the CSS files, wherever you place them.
Adding PHP code is just the same as a nywhere else.
What’s the exact error you’re getting?
It is not an error but a problem. I used your tutorial. When I got to the part where you fix it so the new pilots and flight reports do not show up on every page it did not work. They show up on every page and I cannot seem to fix it. As for the css, I can’t figure out exactly which value to edit. Here is what the css looks like:
body {
margin: 0px;
background-color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
table.linkcontainer td{
background-color: #000000;
filter:alpha(opacity=70);
opacity: .7;
-moz-opacity: .7;
}
td.logo_area{
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
td.middle_spacer {
width: 800px;
background-color: #666666;
}
td.shadow_right {
background-image: url(images_template1/border_shadow_l.jpg);
background-repeat: repeat-y;
background-position: left;
}
td.shadow_left {
background-image: url(images_template1/border_shadow_r.jpg);
background-repeat: repeat-y;
background-position: right;
}
td.body_content {
padding: 5px;
background-image: url(images_template1/bg_content.jpg);
background-repeat: repeat;
}
td.below_header{
background-color: #1F1F1F;
height: 50px;
color: #CCCCCC;
padding: 5px;
}
td.main_content_box {
background-color: #FFFFFF;
}
td.horizontal_column {
background-color: #000000;
border-top-width: 15px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
height: 150px;
display: table-cell;
vertical-align: top;
}
td.bottom_link_container {
background-color: #000000;
text-align: center;
color: #FFFFFF;
padding: 5px;
}
td.horizontal_center {
background-color: #FFFFFF;
border-top-width: 15px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #333333;
border-bottom-color: #000000;
border-left-color: #333333;
height: 150px;
display: table-cell;
vertical-align: top;
background-image: url(images_template1/header_bg.jpg);
}
td.header_column {
height: 100px;
vertical-align: middle;
color: #FFFFFF;
font-size: large;
background-image: url(images_template1/header2_bg.jpg);
background-position: top;
}
td.left_content {
width: 200px;
padding: 5px;
vertical-align: top;
background-image: url(images_template1/bg_content.jpg);
background-repeat: repeat;
}
a.main_link:active,a.main_link:visited,a.main_link:link{
font-weight: bold;
text-decoration: none;
display: block;
width: 75%;
color: #FFFFFF;
line-height: 50px;
}
a.main_link:hover{
background-color:#333333;
color: #FFFFFF;
}
a.bottom_link:active,a.bottom_link:visited,a.bottom_link:link{
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a.bottom_link:hover{
color: #CCCCCC;
}
div.bottom_content{
color: #FFFFFF;
padding: 5px;
}
div.navigation {
height: 50px;
vertical-align: middle;
text-align: center;
}
I guessed that it was the div.navigation but there isn’t a width value, and when I added one everything got messed up real bad. Thanks for your help!
I can’t tell by looking at it, have you downloaded firebug?
Yes, but how exactly do you use it?
You click the firebug icon in the status bar, then the window pops up. click inspect, and move your mouse over the area which is giving trouble. It’ll highlight the div or whatever and on the bottom right hand, there are the styles. Double click inside or on one of hte existing styles and you can edit it, or add new styles, and you’ll see it change right away. It’s handy for figuring out what’s wrong. It’ll give you the entire ‘inheritance’ of the styles too
Ok. I took a look at it and all I can do is shift all of the buttons left or right. I think the problem is that the navigation bar is too small, can I make it bigger?
Sure can. Use firebug to select the nav bar, mess with those styles. Once you mess with the styles, they stick until you refresh the page, so you can change multiple elements and get it all fit however you like.