Affinity Skin Mod

[jennec]

I have modified the Affinity skin to include a second design aligned to the left instead of the right.

I have also managed to apply drop down menus to both designs. Design1 (original right aligned skin) has some issues with the drop down menu blocks overwriting each other. I have not been able to resolve this issues yet, but if anyone wants to take a look I have added instructions on how to modify the code below.


If anyone can better what I have done with this skin please share it with us, as I am sure the drop down menus could look better, and I would like to be able to add transition effects if possible.

Does anyone know the name of the menu system used in SD?

This topic originally started here. (http://www.subdreamer.com/forum/showthread.php?t=4439)

Creating the second catergory file:

You should now notice in the code above that on line 49 refers a catergory file called categories2.php. We will now create this file.

Copy the categories.php file in the affinity folder as catergories2.php

Open the catergories2.php file and find the following code on line 103:


* * * *// Horizontal Offset between adjacent levels in pixels
* * * *'block_right' : 100,


with


* * * *// Horizontal Offset between adjacent levels in pixels
* * * *'block_left' : 100,



Now open the install.php file and find the following code on line 12:


$numdesigns * = 1;


and change it to


$numdesigns * = 2;


Now add a blank line and then the following code block on line 25:


$designpath[] = 'affinity/affinity2.php';
$maxplugins[] = 15;
$imagepath[] *= 'affinity/images/a_design2.jpg';


Additionally, detach the attached image file and save it in the affinity/images directory.

You should now uninstall and then re-install this skin in order to view these changes.

This should all you need to do in order to have the second skin and drop down menus.

[liaison]

Hi, i have tried this out but i cant get the file edits correct... I have tried the find and replace feature in dreamweaver and on both the affinity.php and categories.php the original code can not be found???? please help... its the drop down menu's i need and the second design. I have managed to work out how to change the width size.

[jennec]

I will take another look at the original files when I get a chance and add the line numbers into this tutorial. Hopefully this will help you a little.

[fergiej]

Hey, jennec! Great work. I think I need a little help. I did the fluidity thing no problem. And I have the menu dropdowns working fine, too. I can't seem to get the second skin to show up. After I make the changes to the appropriate files, should it just show up?

I made the categories2 and affinity2 files and changed them appropriately. I also added the block to the install file. Clearly I am just missing something fundemental here. One thing that would be very helpful is if you posted not just the start line, but the end line as well. It is possible I overwrote only part of what I needed.

Thanks
fergiej

Originally posted by jennec@Aug 11 2005, 03:21 AM
I will take another look at the original files when I get a chance and add the line numbers into this tutorial.* Hopefully this will help you a little.
497

[jennec]

Originally posted by fergiej@Aug 15 2005, 01:11 PM
Hey, jennec!* Great work.* I think I need a little help.* I did the fluidity thing no problem.* And I have the menu dropdowns working fine, too.* I can't seem to get the second skin to show up.* After I make the changes to the appropriate files, should it just show up?*

I made the categories2 and affinity2 files and changed them appropriately.* I also added the block to the install file.* Clearly I am just missing something fundemental here.* One thing that would be very helpful is if you posted not just the start line, but the end line as well.* It is possible I overwrote only part of what I needed.*

Thanks
fergiej
650


Hi ferguij,

I have modified this tutorial now with start and end line numbers so hopefully this will help you out a little.

But as for the design not showing up, it is probably that you need to uninstall the then install the skin again from the SD control panel. Give that a try and let us know what happens.

[fergiej]

Thanks. I uninstalled it and reinstalled it and it still isn't showing up. I must have done something wrong. I'll have to take a lok at it tonight after I get home. Thanks for adding the end line numbers. Without having a good working knowledge of the code, it sure was tough identifying the right lines.

I'll keep you posted

[fergiej]

OK, cripes, I've had it. I am obviously not doing something right. I can get everything working fine except getting the second design to show up.

jennec, could I trouble you to send me the affinity2, categories2 and modded install files? If nothing else, I would like to compare them to see where I might be screwing up. I need to really start learning how to do this myself.

Thanks again

[jennec]

Originally posted by fergiej@Aug 16 2005, 01:27 AM
OK, cripes, I've had it.* I am obviously not doing something right.* I can get everything working fine except getting the second design to show up.*

jennec, could I trouble you to send me the affinity2, categories2 and modded install files?* If nothing else, I would like to compare them to see where I might be screwing up.* I need to really start learning how to do this myself.*

Thanks again
680



it is still probably your install.php file that is causing the issue. Once you have modified it to look like this


<?php
// +---------------------------------------------+
// | * * Copyright © 2005 indiqo.media * * * * * |
// | * * http://www.indiqo.de * * * * * * * * * *|
// | * * This file may not be redistributed. * * |
// +---------------------------------------------+

if(!defined('IN_SUBDREAMER'))
*die("Hacking attempt!");

$skinname * * = 'affinity';
$numdesigns * = 2;
$previewimage = 'affinity/images/a_preview.jpg';

$authorname * = 'Maximilian Bartel (indiqo.media)';
$authorlink * = 220;

$designpath[] = 'affinity/affinity.php';
$maxplugins[] = 15;
$imagepath[] *= 'affinity/images/a_design.jpg';

$designpath[] = 'affinity/affinity2.php';
$maxplugins[] = 15;
$imagepath[] *= 'affinity/images/a_design2.jpg';

?>


you will need to uninstall the skin in the SD control panel and install it again. Don't forget to downlaod the a_design2.jpg from this thread and put it in the "affinity/images/" folder. I found that my second skin did not show up until there was a image file to go along with it in the images folder, and it had to be different from the image file to design1.

If you are still having trouable post your code you can PM me with the code, or paste on this thread and I will take a look.

[fergiej]

I think I just saw what the deal is. I'm at work now, so I can't confirm it, but in the first block in the install file. Number of designs, 2. Missed that. I added the block for the 2nd design, but I bet the install file is saying only one design. Bet that's it! Can't wait to look at this tonight.

Thanks for posting that. Believe it or not, I can usually figure these things out on my own...DOH!

[jennec]

Originally posted by fergiej@Aug 16 2005, 04:12 PM
I think I just saw what the deal is.* I'm at work now, so I can't confirm it, but in the first block in the install file.* Number of designs, 2.* Missed that.* I added the block for the 2nd design, but I bet the install file is saying only one design.* Bet that's it!* Can't wait to look at this tonight.

Thanks for posting that.* Believe it or not, I can usually figure these things out on my own...DOH!
694


I think you are right there, I had forgotten that in my post above. I will amend it so that all will be right with the world . . .

. . .kinda.

[fergiej]

Had a chance to check it out. That was it. Something so simple to cause such a rotten headache ;) . Oh, take a look at your edit for this on your post. You forgot to change the 1 to a 2...

Thanks again. The site looks really good like this. Menus are working nicely, too.

[jennec]

OOOOOOOPPPPPSSSS!!!!!!

I noticed some problems with the mod above where if you stopped using drop down menus all the categories would just disappear. Obiovuly this is not good so I investigated a little further and found that the following code in the categories file for both designs was causing the problem.


else
{
*// use normal category menu
*if($i+1 < $categoryrows)
*{
* *echo '<tr height="21px"><td width="100%" align="right" valign="middle" class="navigation"><a href="'.$categorylink[$i].'" class="category">'.$categoryname[$i].'</a><img src="skins/affinity/images/a_navigation_bullet.jpg" width="7" height="7" class="bullet"></td></tr>';
*}
*
* * *else
*{
* echo '<tr height="21px"><td width="100%" align="right" valign="middle"><a href="'.$categorylink[$i].'" class="category">'.$categoryname[$i].'</a><img src="skins/affinity/images/a_navigation_bullet.jpg" width="7" height="7" class="bullet"></td></tr>';
*}
}


So I amended the original post above so that this would not occurr for other people who read this tutorial in the future.

For those that have already made the original modifications to the categories file you should replace the above code with:


else
{
*// use normal category menu
* for($i = 0; $i < $categoryrows; $i++)
*{
* *echo '<tr height="21px"><td width="100%" align="right" valign="middle" class="navigation"><a href="'.$categorylink[$i].'" class="category">'.$categoryname[$i].'</a><img src="skins/affinity/images/a_navigation_bullet.jpg" width="7" height="7" class="bullet"></td></tr>';
*}
}


It now works a treat for both Drop Down and static menus.

[abcohen]

Originally posted by jennec@Aug 18 2005, 02:43 PM
OOOOOOOPPPPPSSSS!!!!!!

I noticed some problems with the mod above where if you stopped using drop down menus all the categories would just disappear.* Obiovuly this is not good so I investigated a little further and found that the following code in the categories file for both designs was causing the problem.


else
{
*// use normal category menu
*if($i+1 < $categoryrows)
*{
* *echo '<tr height="21px"><td width="100%" align="right" valign="middle" class="navigation"><a href="'.$categorylink[$i].'" class="category">'.$categoryname[$i].'</a><img src="skins/affinity/images/a_navigation_bullet.jpg" width="7" height="7" class="bullet"></td></tr>';
*}
*
* * *else
*{
* echo '<tr height="21px"><td width="100%" align="right" valign="middle"><a href="'.$categorylink[$i].'" class="category">'.$categoryname[$i].'</a><img src="skins/affinity/images/a_navigation_bullet.jpg" width="7" height="7" class="bullet"></td></tr>';
*}
}


So I amended the original post above so that this would not occurr for other people who read this tutorial in the future.

For those that have already made the original modifications to the categories file you should replace the above code with:


else
{
*// use normal category menu
* for($i = 0; $i < $categoryrows; $i++)
*{
* *echo '<tr height="21px"><td width="100%" align="right" valign="middle" class="navigation"><a href="'.$categorylink[$i].'" class="category">'.$categoryname[$i].'</a><img src="skins/affinity/images/a_navigation_bullet.jpg" width="7" height="7" class="bullet"></td></tr>';
*}
}


It now works a treat for both Drop Down and static menus.
744



hmmm can you update the top so the tutorial can be followed -thanks.

[jennec]

Originally posted by abcohen@Aug 18 2005, 07:46 PM
hmmm can you update the top so the tutorial can be followed -thanks.
745



I already did.

So I amended the original post above so that this would not occurr for other people who read this tutorial in the future.

[chuck252]

Just thought I would point something out.

Do I really need to take this step? Seems like I am not doing anything. Typo maybe?
Now open the install.php file and find the following code on line 12:


$numdesigns * = 1;


and change it to


$numdesigns * = 1;



One more thing. When I make this mod, my orginal skin moves the menu items from align right to align center. How do I put it back and still keep the hover menu?

Chuck.

[jennec]

Originally posted by chuck252@Aug 26 2005, 10:58 PM
Just thought I would point something out.

Do I really need to take this step? Seems like I am not doing anything. Typo maybe?
One more thing. When I make this mod, my orginal skin moves the menu items from align right to align center. How do I put it back and still keep the hover menu?

Chuck.
884


Sorry I thought I changed it a while ago to the correct value. I have defnintly changed it now to

Now open the install.php file and find the following code on line 12:


$numdesigns * = 1;


and change it to


$numdesigns * = 2;

With regard to the alignemtn problem, it would probably be easier to edit the file with Dreamweaver or something similar and visually highlight the categories php include in design mode and align it to the right.

[abcohen]

you know what would be a cool design #3 is gettign the forum skin to be used as a regular skin too :)

[jennec]

Not sure I get what you mean abcohen.

Do you mean change the current forum skin to match the design lay ou to of the other two designs?

[abcohen]

Originally posted by jennec@Sep 1 2005, 06:11 AM
Not sure I get what you mean abcohen.*

Do you mean change the current forum skin to match the design lay ou to of the other two designs?
976


nope add a 3rd design layout that uses the forum skin's look like a single center layout...

[jennec]

Originally posted by abcohen@Sep 2 2005, 02:07 AM
nope add a 3rd design layout that uses the forum skin's look like a single center layout...
996



I presume then you would'nt want this design to include a column for smaller plugins such as the login panel and PM Notifications etc?

[abcohen]

Originally posted by jennec@Sep 5 2005, 12:35 PM
I presume then you would'nt want this design to include a column for smaller plugins such as the login panel and PM Notifications etc?
1036

correct... also I tried the tutorial adding the % layout to the skin it didnt work for me.. but everything else worked GREAT!

[vynnus]

"I have also managed to apply drop down menus to both designs. Design1 (original right aligned skin) has some issues with the drop down menu blocks overwriting each other"

Did you solve the problem above? I`m really needing this submenu working.

Thanks dude. ..

Vinnie

[jennec]

<div class='quotetop'>QUOTE(Vynnus &#064; Nov 2 2005, 06&#58;12 PM) 2007</div>
"I have also managed to apply drop down menus to both designs. Design1 (original right aligned skin) has some issues with the drop down menu blocks overwriting each other"

Did you solve the problem above? I`m really needing this submenu working.

Thanks dude. ..

Vinnie
[/b]


No, I have not had the time to look into this. I thought it was something I had done wrong, but apparently this issue affects toerh who have right aligned drop down menus also. See latest skin by indegquo.media on subdreamer.com called Shift. This has the some problem. Perhaps this menu system just does like being aligned to the right. Or maybe I just don&#39;t know enough about its workings.