Jump to content

skinning problems


patva1

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Administrators

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Administrators

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

Link to comment
Share on other sites

  • Administrators

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.

Link to comment
Share on other sites

The table width is already at 100% and it will not let me make it any wider, unless I am looking at the wrong thing. Here is the entry I was looking at:

<table cellspacing="0" cellpadding="0" border="0" width="100%">

It was in the HTML file, and when I made the width say 75% it made the entire skin narrower. So I think it is the right place it just won't let me make it bigger than 100%.

Link to comment
Share on other sites

I played with ti some more. I figured out how to do many things but still the pages do not show. Is it a limit caused by the actual skin? No matter how big I make the width once it gets to 100% it does not get wider. If I need to I can change skins, but I would like to keep this one.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...