Classic skin on full screen display

[Guest tranvietduoc]

Help me?

How to display classic skin in full screen (1024x800)

thanks

[Guest EverythingWeb]

Hello,

When you say full-screen, I presume by this you mean 100% width?

Unfortunately, this is not possible with the Classic skin by default - the only 100% width template is the Killer template.

The alternative would be to create a new skin, using CSS or html and making the width yourself - however if you are going to do this, be prepared to spend a good few hours on it.

I would suggest looking at the Killer skin and adjusting it to suit.

[Guest vrakas]

Actually i did it before and it worked with a few problems.

1) you have to manually edit a few files

2) it will show ONLY in 1024x768

3) when someone has less resolution 800x600 the right column goes under the main frame.

4) with firefox its all scre*d nothing is in place

a few other things i noticed but i cant remember.

Its better if you change the killer skin a bit to suit your needs

This is my opinion only B)

[Guest MASsIVE]

Try editting the css (layout.css) file :D

[Guest vrakas]

I have seen a site using this skin and it does not get messed up when using a lower screen size.

I will try and contact that person maybe he can help us out on this :D

[Guest]

I too like the classic and also would like to build a site using the ledgend skin but at 100% width, so if you do find out anything please let me know.

[Guest highertechpc]

Hello chrisdevelop and tranvietduoc,

This was the very first mod that I did when I installed Cubecart, and I think it works great for me. I've looked at it in a few browsers and I haven't noticed any problems with the way it is. Netscape, Molzilla, IE all look fine. Check it out on my site. http://www.highertechpc.com This is a Legend skin, but It works just as well with the Classic skin which I also modded in this way. The only glitch that I have found is that some of your pages may not look right if you apply the Killer skin in your admin section, but that doesn't bother me because I haven't used the Killer skin at all, just the Classic and the Legend.

You can make the changes in the layout.css of your skin type. I changed the #pageSurround from 748px to 963px and I also changed the .colMid from 398px to 618px. I think I may also have changed some of th padding in different areas to suit me but I think that will be just a matter of your personal choice.

Well I hope this helps and that this is not too vague. If it is, post it and I'll give more details. Just remenber to make a backup in case this doesn't work out for you on the first time. This is really very easy. I did this mode within minutes after installing cubecart for the first time and I just played around with the different dimensions until it worked. The dimensions I gave here is only... maybe 95% width, so you can increase it a little to suit you. Later

[Guest]

Hi

I think what you have done is great and would probably work with the other skin as well, if you could post details I would be grateful, I will let you know the results.

[Guest highertechpc]

Hello chrisdevelop,

Ok, both the Legend and the Classic work with this mod almost exactly. Open:

skins/Legend or Classic/styleSheets/layout.css, find this:

#pageSurround {

width: 963px;

margin: 0px auto;

padding: 5px;

border: 1px solid #000000;

background-image: url('../styleImages/backgrounds/contentBg1.jpg');

}

and this:

.colMid {

position: relative;

width: 618px;

float: left;

}

and this too:

}

.colMainCheckout {

position: relative;

width: 963px;

float: left;

}

Your widths will be different from mine. Change them to the ones you see here. I belive that is all there is to it. If I'm mistaken and there is more to do, let me know. Gotta go. Be back in 6 hours :blink:

[Guest vrakas]

Hi there Highertechpc,

Question: Do we just change the ones you posted and the rest stay as they are?

[Guest sunshine]

Just wondering because I have no idea myself as I'm new to the CSS stuff. But, can't we just go into the Killer layout .css and copy and paste those dimensions

lisa

[Guest highertechpc]

@vrakas,

As far as I remember, this should be all the necessary changes that need to be made in order to achieve the wider layout.

@sunshine,

I couldn't say with any certainty if what you are asking in regard to applying the these dimensions or changes to the Killer skin would work, becuse I haven't tried it, but my gut feeling is no. No it will not work. Classic and Legend are very similar in many aspects, but killer has too many differences from the other two that I just don't think it will work, but I could be wrong. In any case why would you want to do so since the Killler skin is already in a wide layout?

[Guest sunshine]

Hi Highertechpc,

Sorry I didn't mean the "Killer" skin. i don't mid the width at all. I'm just trying to figure out how I want the "appearance" and such. This format is very new to me thoughj I know it's a good deal easier for the long run when compared to html.

I'm just taking a little break from it today because I just got the new Studio 8 :D

[markscarts]

I haven't worked with the Killer skin yet, only Legends thus far, but since there is not much in the way of documentation for CubeCart, I plan to eventually publish tutorials on adjusting the styles. I'm thinking screenshots where each element of the style is tagged with a number, and then referenced to the correct CSS file attributes.

I've made a bit of a beginning on the Legends, but it is time-consuming getting all the screenshots made and edited, and writing the text.

I'll include here the raw notes on the Legend's style.css -these are just raw

notes compiled in preparation for writing a tutorial:

STYLES IN CUBECART - NOTES:

FROM STYLES.CSS

.searchBtn = The "GO" button for your search box.

.searchBox = The search box attributes.

.textbox = The quantity box in your shopping cart, and the "Enter Product Code" text box.

.submit = The "Join Now" button for mailing list, and the "Add" button for adding product codes to shopping cart.

(Discuss list properties)

.txtSession = The text dealing with a customer's session; for instance, this will affect the text in your search box area, like the words, "Search for:", "Log In" and "Register"

.txtCopy, .txtSiteDocs = Affects text in the "Information" box and the "Mailing List" box.

.txtButton = The "Buy" and "More" and "Add to Basket" buttons appearing near product descriptions.

.txtOldPrice = This is the price which by default appears with a line struck through when the item is on sale.

.txtSale = Sets properties for the sale price text.

.txtSiteDocs, a.txtSiteDocs = Sets properties for the links at the bottom of the page, which link to pages on your site, "About Us" etc.

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation = This is where you set the properties for the text that appears in your category links, popular products links, sub-titles to all the product pics, and the titles in your product descriptions (Product Names).

.txtContentTitle = Sets properties for the major headings on your site.

.tblList = this is the table that contains your items list for items contained in a category.

.txtCartPrice = This affects the text that reports the quantity and pricing of items in the cart.

.txtCart = Affects the text in the Shopping Cart reporting box, "Items in cart:" and "Total:"

.cartProgress = Sets properties for the cart progress box, "Cart » Address » Payment » Complete"

.txtcartProgressCurrent = Sets properties for the text that tells where the customer is now in relation to the progress bar.

.quickBuy = Sets properties for the text, "Want to add more items? Enter the Product Code:"

CSS is not difficult; it is the best way of attributing characteristics to HTML elements. There is a lot of leeway.

For instance, in the code that highertechpc posted:

#pageSurround {

width: 963px;

margin: 0px auto;

padding: 5px;

border: 1px solid #000000;

background-image: url('../styleImages/backgrounds/contentBg1.jpg');

}









.colMid {

position: relative;

width: 618px;

float: left;

}







}

.colMainCheckout {

position: relative;

width: 963px;

float: left;

}

You do not have to use a static pixel count (963px, 618px; 963px) but can use a percentage instead.

#pageSurround {

width: 100%;

margin: 0px auto;

padding: 5px;

border: 1px solid #000000;

background-image: url('../styleImages/backgrounds/contentBg1.jpg');

}









.colMid {

position: relative;

width: 100%;

float: left;

}







}

.colMainCheckout {

position: relative;

width: 100%;

float: left;

}

This should tell the browser that the #pagesurround, and elements of the classes .colMid and .colCheckout are to fill up 100% of the space that is available to them - which is less on an 800 wide screen; more on a 1024. The site should then adjust automatically to the size of the screen viewing it.

There may be other elements that would need adjusting as well, I haven't worked with any but Legends at the 800 width yet.

[Guest sunshine]

Hi Markscarts,

That's terrific - Thank you I for one would really appreciate it. Don't know what I can do to help, but if I can let me know.

[markscarts]

FOLLOW-UP:

I worked on some skins today and tried setting Legend to a dynamic, full-screen mode. It was fairly easy, but two files were edited to make it work: layout.css and index.tpl

In the CSS file, I made the changes discussed above - setting the overall width values and the value of colMid to 100%. Then, I got rid of the "floating" (float:left; float:right) and set the columns to center (text-align:center).

In the template file, I added a table, with one row and three cells for left, center and right columns, and set the table and cells to cellpadding=no cellspacing=no valign=top.

This works like a charm. I've noticed several people already setting these skins to static width values - and they don't display right when the browser window is not wide open. Folk with an 800 width resolution will never see your site correctly, so if I were in your shoes, I'd seriously consider modding the skin correctly. :wacko:

[Guest vrakas]

Hi markscarts,

suggestion

Excelent job

Is this for Legend skin only?

Could you repost this mod with all the details so we can follow it step by step?

I didnt get the part

In the template file, I added a table, with one row and three cells for left, center and right columns, and set the table and cells to cellpadding=no cellspacing=no valign=top.

When you are finished i also suggest you post it in the Minor mods (download area) where i am sure a lot of people will get this file.

Thanks for all your efforts

Check the amount of views on this topic :blink:

[markscarts]

Vrakas, I'll get to that soon. I left enough hints - it is not difficult to do, and I don't mind making tutorials either.

I underwent surgery for a painful hernia recently, am for the most part bedridden, have no laptop, the pc monitor is to the left of my bed and I have to rest a day or two from the crick in my neck. So be patient.

Also, I have years of experience with CSS and HTML but have not yet learned php. I plan to offer minor mods and skins, and illustrated tutorials that will be easy for newbies, for about $0.99 to $1.99 and free for registered users. But this may be awhile in coming.

I'm glad if my comments above can help someone . . .

EDIT: You can review how the Legend skin works with these modifications at this test site. Please note that I will be working on this skin, so it is subject to go haywaire or disappear entirely as I make various changes. At present, it is based on the Legend and has full screen functionalility regardless of width of screen.

http://leather-furniture-repair.com/sales/

[Guest]

Vrakas,

Sorry to hear about your op, get well soon, your health is more important than any coding or tutorials, so get yourself well first, and thanks for your help so far, i am sure everyone will wait and wish you well.....so dont strain yourself.

[Guest vrakas]

markscarts get well soon

Your comments always help someone

PS i saw your example and figured it out.

Now i have Legend and Classic in Full screen

Thanks :)

[Guest sunshine]

Hi Markscarts,

Thinking of you and hope you get well fast.

LOL your skin site