Killer Skin- Spaces on Cat Tabs

October 31, 2006

Hi Guy's .

I am new to CC, like it so far. Do have a small problem I hope you can help me with.

I am using Killer skin.

The Cat Tab's at the top seem to have the left corner seperated just a bit. What file do I need to edit to fix this problem.

Also, would like to like to move the SEARCH box form field and eliminate that UGLY grey around it all together.

Check it out here:

http://www.midwestskatesupply.com/catalog/

Thanks in advance for the help. If there is another post for these question's already, please direct me to the post.

midwest :unsure:

roban · October 31, 2006

Yes that grey background is ugly. To remove it open skins/Killer/styleTemplates/styleSheets/layout.css

#sessionBox {

text-align: left;

width: 236px;

height: 96px;

float: right;

remove the red part

To move the search box just locate {SEARCH_FORM} in your index.tpl and place it where you want it. You might have to adjust the width and you can do this in layout.css as well.

Your category tabs are images and also controlled in layout.css

October 31, 2006

Yes that grey background is ugly. To remove it open skins/Killer/styleTemplates/styleSheets/layout.css

#sessionBox {
text-align: left;
background-image: url(../styleImages/backgrounds/sessionBg.gif);
width: 236px;
height: 96px;
float: right;

remove the red part

To move the search box just locate {SEARCH_FORM} in your index.tpl and place it where you want it. You might have to adjust the width and you can do this in layout.css as well.

Your category tabs are images and also controlled in layout.css

Thanks. Will give it a try.

I figured the Cat. Tabs were images. Probably 3 . 1 left, 1 center, and 1 right.

Obviously I need to edit the left image, but what exactly do I need to edit in the file to get it mated up to the center image?

Thanks and sorry for the bother.

midwest ;)

roban · October 31, 2006

Your category images are also called in layout.css

.topCats {

text-align: center;

height: 42px;

color: #ffffff;

margin-bottom: 15px;

}

.topCatsBgRight {

background-repeat: no-repeat;

background-position: right;

height: 42px;

}

.topCatsBgLeft {

float: left;

background-repeat: no-repeat;

background-position: left;

height: 42px;

and

.topCatsTabLeft {

background-repeat: no-repeat;

width: 7px;

}

.topCatsTabMid {

background-repeat: repeat-x;

}

.topCatsTabRight {

width: 7px;

background-repeat: no-repeat;

You'll find additional category templates in styleTemplates/boxes/categories.tpl for your editing pleasure.

If you want the cat tabs to appear as one long bar without gaps you might try referencing the document bar images in layout.css instead of the tabs images.

.docBtnLeft {

width: 4px;

}

.docBtnRight {

width: 4px;

November 1, 2006

While you are doing this, also fix your header banner.

Its going under the search box (i am viewing with 1024x768) ;)

November 1, 2006

Your category images are also called in layout.css

.topCats {
text-align: center;
background-image: url(../styleImages/backgrounds/catBg.gif);
height: 42px;
color: #ffffff;
margin-bottom: 15px;
}
.topCatsBgRight {
background-image: url(../styleImages/backgrounds/catBgRight.gif);
background-repeat: no-repeat;
background-position: right;
height: 42px;
}
.topCatsBgLeft {
float: left;
background-image: url(../styleImages/backgrounds/catBgLeft.gif);
background-repeat: no-repeat;
background-position: left;
height: 42px;

and

.topCatsTabLeft {
background-image: url(../styleImages/backgrounds/catTabLeft.gif);
background-repeat: no-repeat;
width: 7px;
}
.topCatsTabMid {
background-image: url(../styleImages/backgrounds/catTabMid.gif);
background-repeat: repeat-x;
}
.topCatsTabRight {
background-image: url(../styleImages/backgrounds/catTabRight.gif);
width: 7px;
background-repeat: no-repeat;

You'll find additional category templates in styleTemplates/boxes/categories.tpl for your editing pleasure.

If you want the cat tabs to appear as one long bar without gaps you might try referencing the document bar images in layout.css instead of the tabs images.

.docBtnLeft {
background-image: url(../styleImages/backgrounds/docBtnLeft.gif);
width: 4px;
}
.docBtnRight {
background-image: url(../styleImages/backgrounds/docBtnRight.gif);
width: 4px;

Thank you Roban ,

I kind of like the tabs as they are for now, but I will keep inst. on hand for the future.

Do I just need to make a larger px- say 6 instead of 4, of the center or left CatTab?

----------------------------------------------------------------------------------------------------------------------------

Thank you as well vrakas,

I did notice that as well You might have noticed in my previous post I am going to move the search box. Also need to move the sign in area as well. Hopfully that will help with the banner.

However I will certainly take any advice I can get. I made that banner by using paint. I measured the area and sized it using inches. It was created by inserting a pic I had on file, then just adding the text. I saved it as a topHeader.gif2, imported it into the file using frontpage and then just renamed it to topHeader.gif & WALA! Please correct me if the file name I am using is incorrect. I am not sure it is.

Now as you can see, it looks pretty good, BUT, it does not seem to resize with the browser. Not really a big deal I guess, but I would like it to act coreectly eventually.

Thanks

midwest :)

markscarts · November 3, 2006

Yes that grey background is ugly. To remove it open skins/Killer/styleTemplates/styleSheets/layout.css

#sessionBox {
text-align: left;
background-image: url(../styleImages/backgrounds/sessionBg.gif);
width: 236px;
height: 96px;
float: right;

remove the red part

Roban is close, but the code above will create a css error, leaving background-image: with no attribute nor semicolon . . .

best is to remove the entire line, background-image: url(../styleImages/backgrounds/sessionBg.gif);

November 3, 2006

Yes that grey background is ugly. To remove it open skins/Killer/styleTemplates/styleSheets/layout.css

#sessionBox {
text-align: left;
background-image: url(../styleImages/backgrounds/sessionBg.gif);
width: 236px;
height: 96px;
float: right;

remove the red part

Roban is close, but the code above will create a css error, leaving background-image: with no attribute nor semicolon . . .

best is to remove the entire line, background-image: url(../styleImages/backgrounds/sessionBg.gif);

MarksCarts,

Thank you so much for the contribution. Luckily, I have not started yet :blink:

midwest ;)

November 5, 2006

First , Id like to thank all of you for your assistance in my modifications of my CC.

I have made some of the changes I mentioned, and that you helped me with.

Please go to http://www.midwestskatesupply.com/catalog/ to check it out.

There are just a couple of more things I would like to accomplish.

1. You will notice I have moved the "Welcome../Login | Register" section. I would like to box this like the areas below it. Also would like it to be spaced the same as the boxes below it.

2. You will notice, if you look carefully, the the blue header bar is JUST a bit short on the left end. Would like to adjust width to match the lower blue footer bar.

3. Would like to move the SEARCH box area down a bit closer to the top blue header bar. Not real important, but think it would look nicer

4. Remove TEST CATEGORY.

5. And finally, you might notice that my stores name is gone. I edited it out of the topHeader.gif so that now only the pic is there.

Now I need to replace it. Can I just enter text in this area, and if I do can it be edited ? (ex: font, color, size, etc.) Thought this would be easy, but can't seem to find the file to edit.

Again, Thank you !! And if there are previous post's to any of these questions, provide me a link, and I'll go from there.

I am really happy with the way it is coming together and am excited to go live soon !

midwest */*

markscarts · November 5, 2006

Cool */*

One at a time . . .

I have a session box I really like to use on stock Killer skin. I'll share it with you and see how you like it

1. Backup your skins/Killer/styleTemplates/boxes/session.tpl file by copying it and renaming the copy (session.tpl.BAK) so that you can restore it in case you don't like my Killer session box.

2. Now open the skins/Killer/styleTemplates/boxes/session.tpl file and replace the ENTIRE CONTENTS with this code:

<!-- BEGIN: session -->

<!-- BEGIN: session_false -->

<div class="boxTitleRight">{LANG_WELCOME_GUEST}!</div>

<div class="boxContentRight">

<span class="txtSession">[</span><a href="index.php?act=login&amp;redir={VAL_SELF}" class="txtSession">{LANG_LOGIN}</a> <span class="txtSession">|</span> <a href="cart.php?act=reg&amp;redir={VAL_SELF}" class="txtSession">{LANG_REGISTER}</a><span class="txtSession">]</span>

</div>

<div class="boxFootLeft">&nbsp;</div>

<!-- END: session_false -->

<!-- BEGIN: session_true -->

<div class="boxTitleRight">Registered Customer</div>

<div class="boxContentRight">

	<span class="txtSessionGrey">{LANG_WELCOME_BACK} {TXT_USERNAME}</span> 

	<br />

	<span class="txtSession">[</span><a href="index.php?act=logout" class="txtSession">{LANG_LOGOUT}</a> <span class="txtSession">|</span> <a href="index.php?act=account" class="txtSession">{LANG_YOUR_ACCOUNT}</a><span class="txtSession">]</span></div>

<div class="boxFootLeft">&nbsp;</div>

<!-- END: session_true -->

<!-- END: session -->

markscarts · November 5, 2006

2. You will notice, if you look carefully, the the blue header bar is JUST a bit short on the left end. Would like to adjust width to match the lower blue footer bar.

It appears that the top bar menu is located inside the "subSurround" division and the lower site docs bar is located outstide it. You can try moving the last </div> that appears above the {SITE_DOCS} to below it. If that doesn't cure the problem, put it back like it was. I would have to actually look at your files to know more (have only been looking at page source).

3. Would like to move the SEARCH box area down a bit closer to the top blue header bar. Not real important, but think it would look nicer

This is adjusted by the padding in skins/Killer/styleTemplates/global/index.tpl, here:

<div style="padding: 15px 8px 15px 15px; margin: 0px;">





Try changing it to this:

<div style="padding: 20px 8px 15px 15px; margin: 0px;">

4. Remove TEST CATEGORY.

Go to ACP > View Categories

Find Test Category, click edit link, change name to actaul category name you desire - or delete the category.

You will probably have to delete or move any products within test category first - or you can rename them to actual product, rename category to actual category name you like, etc.

markscarts · November 5, 2006

5. And finally, you might notice that my stores name is gone. I edited it out of the topHeader.gif so that now only the pic is there.
Now I need to replace it. Can I just enter text in this area, and if I do can it be edited ? (ex: font, color, size, etc.) Thought this would be easy, but can't seem to find the file to edit.

There are two ways to do this, one is the HTML coder's manual way of adding directly into skins/Killer/styleTemplate/global/index.tpl - the other way requires a modification to the cart that you can get at http://cubecart.org by hiring a modder/designer, which makes a custom text area to fit your site that you can change through the rich text editor in your ACP.

First method, what you can do is open up the global/index.tpl file and place a new division within the topHeader division. Give it a width and height to contain the size text you want., and give it a top margin and left margin setting to place it where you want it in relation to the logo and search form and top of page. Format the text with styles for font, color, size, etc. and write in the text. This is no different than coding HTML into any web page.

November 6, 2006

Cool

One at a time . . . :wub:

I have a session box I really like to use on stock Killer skin. I'll share it with you and see how you like it :wub:

1. Backup your skins/Killer/styleTemplates/boxes/session.tpl file by copying it and renaming the copy (session.tpl.BAK) so that you can restore it in case you don't like my Killer session box.

2. Now open the skins/Killer/styleTemplates/boxes/session.tpl file and replace the ENTIRE CONTENTS with this code:

<!-- BEGIN: session -->

<!-- BEGIN: session_false -->

<div class="boxTitleRight">{LANG_WELCOME_GUEST}!</div>

<div class="boxContentRight">

<span class="txtSession">[</span><a href="index.php?act=login&amp;redir={VAL_SELF}" class="txtSession">{LANG_LOGIN}</a> <span class="txtSession">|</span> <a href="cart.php?act=reg&amp;redir={VAL_SELF}" class="txtSession">{LANG_REGISTER}</a><span class="txtSession">]</span>

</div>

<div class="boxFootLeft">&nbsp;</div>

<!-- END: session_false -->

<!-- BEGIN: session_true -->

<div class="boxTitleRight">Registered Customer</div>

<div class="boxContentRight">

	<span class="txtSessionGrey">{LANG_WELCOME_BACK} {TXT_USERNAME}</span> 

	<br />

	<span class="txtSession">[</span><a href="index.php?act=logout" class="txtSession">{LANG_LOGOUT}</a> <span class="txtSession">|</span> <a href="index.php?act=account" class="txtSession">{LANG_YOUR_ACCOUNT}</a><span class="txtSession">]</span></div>

<div class="boxFootLeft">&nbsp;</div>

<!-- END: session_true -->

<!-- END: session -->

Mission Accomplished ! Looks PERFECT ! It's a keeper ! On now to # 2

Keeping the back-up just for safety though

Midwest :P

November 6, 2006

2. You will notice, if you look carefully, the the blue header bar is JUST a bit short on the left end. Would like to adjust width to match the lower blue footer bar.

It appears that the top bar menu is located inside the "subSurround" division and the lower site docs bar is located outstide it. You can try moving the last </div> that appears above the {SITE_DOCS} to below it. If that doesn't cure the problem, put it back like it was. I would have to actually look at your files to know more (have only been looking at page source).

3. Would like to move the SEARCH box area down a bit closer to the top blue header bar. Not real important, but think it would look nicer

This is adjusted by the padding in skins/Killer/styleTemplates/global/index.tpl, here:
<div style="padding: 15px 8px 15px 15px; margin: 0px;">
Try changing it to this:
<div style="padding: 20px 8px 15px 15px; margin: 0px;">
4. Remove TEST CATEGORY.
Go to ACP > View Categories Find Test Category, click edit link, change name to actaul category name you desire - or delete the category. You will probably have to delete or move any products within test category first - or you can rename them to actual product, rename category to actual category name you like, etc.

Missions 2,3,4 accomplished !! Feel free to check out the revisions !

For your info, if you like the new position of the search box, here are the values :

Going to have to play with # 5 a bit, and may get back to you on it if I need help, but I thank you so much for your assitance. You have saved me a TON of time !

midwest :)

<div style="padding: 55px 8px 15px 15px; margin: 0px;">

November 6, 2006

Looking at your site at: http://www.midwestskatesupply.com/catalog/ I see that you have moved the Welcome Guest: Login / Register into a box on the left side.

Could you tell me how you did this? I would like to do the same but place mine on the right side.

Thanks

markscarts · November 6, 2006

jcoones, read post #10 abover v-e-r-y s-l-o-w-l-y

If you use my Killer session box like midwest did, be sure to check the behavior as a logged in customer, to decide if you like it. Backup your original .tpl file in case you want to go back

1. In addition to replacing the code in sessions.tpl as explained in that post, you will need to open skins/Killer/styleSheets/global/index.tpl and find this:

{SESSION}

You need to delete (cut) it from that spot and paste it just above this:

{RANDOM_PROD}

2. Next, open skins/Killer/styleSheets/global/cart.tpl and find this:

{SESSION}

You need to delete (cut) it from that spot and paste it just above this:

{CART_NAVI}

November 6, 2006

Looking at your site at: http://www.midwestskatesupply.com/catalog/ I see that you have moved the Welcome Guest: Login / Register into a box on the left side.

Could you tell me how you did this? I would like to do the same but place mine on the right side.

Thanks

It Appears markscarts has answered your question .

Good thing to, as he explains things much better than I could !

Follow his directions here and in post #10 of this topic and you should be just fine. He has helped me alot to improve my cart.

midwest :)

markscarts · November 7, 2006

ooops

Hope I didn't step on your toes by answering. I can be an ornery old man, been around a few forums and consider it bad manners to ask questions near the end of a thread that have been answered earlier in the thread - in other words, I believe in reading a thread first, then asking questions :alien: - so I pointed to the earlier post, then realized more explanation might be needed about the global templates

s/ helpful old codger but easily irritated ;)

November 7, 2006

jcoones, read post #10 abover v-e-r-y s-l-o-w-l-y

If you use my Killer session box like midwest did, be sure to check the behavior as a logged in customer, to decide if you like it. Backup your original .tpl file in case you want to go back

1. In addition to replacing the code in sessions.tpl as explained in that post, you will need to open skins/Killer/styleSheets/global/index.tpl and find this:

{SESSION}

You need to delete (cut) it from that spot and paste it just above this:

{RANDOM_PROD}

2. Next, open skins/Killer/styleSheets/global/index.tpl and find this:

{SESSION}

You need to delete (cut) it from that spot and paste it just above this:

{CART_NAVI}

Thank you for your response. I did read #10 but it was not quite clear to me at the time.

I have started from scratch again with the original files and have followed the instructions shown above.

Actually, you had me fooled for a minute with the instructions above because the file in both instruction 1 and instruction 2 are the same files. I figured out however, that the second files should really be "cart.tpl".

It now works fine and thank you very much for your help.

I'm not sure if this was asked before or not but now that the {SESSION} is moved, the search box is sitting awfully high. Where would I go to lower it to just above the TAB bar?

Thanks again for the help.

November 7, 2006

ooops

Hope I didn't step on your toes by answering. I can be an ornery old man, been around a few forums and consider it bad manners to ask questions near the end of a thread that have been answered earlier in the thread - in other words, I believe in reading a thread first, then asking questions - so I pointed to the earlier post, then realized more explanation might be needed about the global templates

s/ helpful old codger but easily irritated

Oh, you most certainly did NOT step on my toes MarksCarts ! I am a web BUSINESS builder, not a webSITE builder, though I do try to learn something along the way. As such, YOU are most certainly way more qualified than I at answering.

So feel free to step. I wear steel toed boots anyway

Also, I would like to PM you on the text in the header if you don't mind.

Thanks again !

midwest B)

November 7, 2006

jcoones, read post #10 abover v-e-r-y s-l-o-w-l-y

If you use my Killer session box like midwest did, be sure to check the behavior as a logged in customer, to decide if you like it. Backup your original .tpl file in case you want to go back

1. In addition to replacing the code in sessions.tpl as explained in that post, you will need to open skins/Killer/styleSheets/global/index.tpl and find this:

{SESSION}

You need to delete (cut) it from that spot and paste it just above this:

{RANDOM_PROD}

2. Next, open skins/Killer/styleSheets/global/index.tpl and find this:

{SESSION}

You need to delete (cut) it from that spot and paste it just above this:

{CART_NAVI}

Thank you for your response. I did read #10 but it was not quite clear to me at the time.

I have started from scratch again with the original files and have followed the instructions shown above.

Actually, you had me fooled for a minute with the instructions above because the file in both instruction 1 and instruction 2 are the same files. I figured out however, that the second files should really be "cart.tpl".

It now works fine and thank you very much for your help.

I'm not sure if this was asked before or not but now that the {SESSION} is moved, the search box is sitting awfully high. Where would I go to lower it to just above the TAB bar?

Thanks again for the help.

Hi jcoones

*** The Particular issue you are looking for is Item #3. MarksCarts answer is in post # 11. ***

I did everything he said, except I changed the code slightly, and it is at the bottom of post #14.

MAKE BACK UPS FIRST ! MAKE BACK UPS FIRST ! MAKE BACK UPS FIRST ! MAKE BACK UPS FIRST !

This will save you a TON of headaches later !

You can adjust the first "px" number in the code to adjust the hiegth the way you like. I adjusted a little at a time till I had it where I wanted it. * tip* The higher the first "px" number is, the lower the search box goes.

If you like what I have done to my cart so far, as it relates to the immediate changes, start at post # 9. I out line everything I wanted to accomplish. Then, just look for the replies from MarksCarts for each Item. I even numbered them so that they would be easier to find.

Everything has been done except for item # 5.

One last thing, while I do not mind answering questions at all, I am NOT at all qualified in this area. The one to ask is MarksCarts, or one of the other experienced folks in here. They can get you up to speed ALOT quicker than I could. */*

Good Luck !!

midwest :)

November 7, 2006

Hi jcoones

*** The Particular issue you are looking for is Item #3. MarksCarts answer is in post # 11. ***

I did everything he said, except I changed the code slightly, and it is at the bottom of post #14.

MAKE BACK UPS FIRST ! MAKE BACK UPS FIRST ! MAKE BACK UPS FIRST ! MAKE BACK UPS FIRST !

This will save you a TON of headaches later !

You can adjust the first "px" number in the code to adjust the hiegth the way you like. I adjusted a little at a time till I had it where I wanted it. * tip* The higher the first "px" number is, the lower the search box goes.

If you like what I have done to my cart so far, as it relates to the immediate changes, start at post # 9. I out line everything I wanted to accomplish. Then, just look for the replies from MarksCarts for each Item. I even numbered them so that they would be easier to find.

Everything has been done except for item # 5.

One last thing, while I do not mind answering questions at all, I am NOT at all qualified in this area. The one to ask is MarksCarts, or one of the other experienced folks in here. They can get you up to speed ALOT quicker than I could.

Good Luck !!

Thank you very much. I really appreciate your help. I will try your suggestions and let you know how I make out. By the way, your site looks great. Nice job.

John

midwest :wacko:

November 7, 2006

Everything worked out just fine. Thanks again for your help.

Very much appreciated. :wacko:

John

markscarts · November 7, 2006

Actually, you had me fooled for a minute with the instructions above because the file in both instruction 1 and instruction 2 are the same files. I figured out however, that the second files should really be "cart.tpl".

:wacko: oops, again

Sorry about that, I edited my response there to correct it to cart.tpl

November 7, 2006

Everything worked out just fine. Thanks again for your help.

Very much appreciated.

John

Your welcome. And thank you for the compliment on the site */*

Glad yours worked out ok !

midwest :wacko:

Killer Skin- Spaces on Cat Tabs

Recommended Posts

Guest midwest

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Guest jcoones

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest jcoones

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Guest jcoones

Link to comment

Share on other sites

Guest jcoones

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest midwest

Link to comment

Share on other sites

Join the conversation