Pictorial style sheet

[ukracer]

Hi this might sound stupid but it could be I am just tired however has any one everthought to produce a page of html that had the sections of the style sheet showing on the page.

 

 

For example I have just been searching in the style sheet fro the top bit above the grey bar in OS commerce that has the TOP, CATALOG, MY ACCOUNT, CART CONTENTS and CHECKOUT names in it. This white part also has the main OScommerce logo in it and also 3 other images. Now to describe that is a bit of a mothful and not certain you will follow where it points to BUT if this area was identified by an hlml page that had the names to look for in the style sheet that would make life so much easier for many people I suggest.

 

I will leave it at that for now and I will try and start one my self as I find out what each section actually is but it will take me many hours to find out all of this. If some kind person reads this I am sure they will know far more that I do and would be so much better to jot it all down.

 

Oh and yes I am reading the instruction manual but this is where I have got so confused :)

 

thanks in advance.

[rseigel]

Just view the source of the web page in your browser to find which one has to be changed. Nothing hard about that! :wink:

[Guest]

If you're that tired, first I would suggest some sleep. Then do a google search for CSS tutorial. You will find several sites that explain stylesheets and how they operate.

 

I'll give you a hint...the section of the site you're talking about is the HEADER...try looking for things that relate to it in the stylesheet.

[ukracer]

Just view the source of the web page in your browser to find which one has to be changed. Nothing hard about that!  :wink:

 

Nothing hard as long as you understand what is what and what is going on.

 

The fact is that you are changing a CC sheet and not a web page is alien to me and I suggest a lot of others.

 

A visual display of what sections are what would be of imense benfit to me anmd I suggest others. If I could load the OS main pages and see in a boc the name of teh tag that I need to alter in the CCS sheet would mean that I could get what I need to change done in a few mins.

 

doing it your way could take many hours......

[ukracer]

If you're that tired, first I would suggest some sleep. Then do a google search for CSS tutorial. You will find several sites that explain stylesheets and how they operate.

 

I'll give you a hint...the section of the site you're talking about is the HEADER...try looking for things that relate to it in the stylesheet.

 

For start I have read tutorials on style sheets I still don't understand them. I uaually need to get hands on a try it out before it sinks in.

 

Second there are a number of sections that relate to the header in the style sheet. My idea was that someone who knows OS and style sheets inside out could save us mere mortals masses of time and at the same time ensure we learnt what gets changed and why!

 

Its seems a very simple idea to look at the main page of OS commerce and see what each box is called or at least what the tag is celled. I think it would mean an increased learning experience for newbies and a less steep learning curve.

[Guest]

Well....When you find the OSC for Dummies Book, that explains every possible permutation of CSS, HTML, and PHP in the script....Let the rest of us know.

[ukracer]

Well....When you find the OSC for Dummies Book, that explains every possible permutation of CSS, HTML, and PHP in the script....Let the rest of us know.

 

You have lost me on this one Kim??

[VyReN]

I use (Sigh) M$ Frontpage to edit the stylesheets. It shows an example of what you are changing... That with viewing the source of my webpages usually makes things pretty simple. Then again -- I did destory my CCS about a dozen times.....

[mattice]

Andy,

 

whenever you load a page you can view the source (raw html) of the outcome.

 

Inthere look for a word that is close to the color / font changes like

 

Your name:

 

Then go back up until you find:

 

class="someName"

 

that someName will correspond with the classes in the stylesheet.

To make it easier next time you can actually write comments in the stylesheet like this:

 

/*

this is the stylesheet class for Your Name

on the whatever.php page...

What a cool multi line comment;)

*/

TD.someName {

color etc

... 

}

 

Hope that helps,

mattice

[ukracer]

Andy,

 

whenever you load a page you can view the source (raw html) of the outcome.  

 

Yeah found that one out mattice :) makes life slightly easier.

I am doing what I needed myself now. It will probably take me a coupel of days but I aint got much to do and nothing important is coming up is it? <smile>

 

Inthere look for a word that is close to the color / font changes like  

 

Your name:

 

Then go back up until you find:

 

class="someName"

 

that someName will correspond with the classes in the stylesheet.

To make it easier next time you can actually write comments in the stylesheet like this:

 

 

I had sort of found this out BUT whatever I chnaged did not seem to change what I expected. I think I know why BUT I will let you know later :)

/*

this is the stylesheet class for Your Name

on the whatever.php page...

What a cool multi line comment;)

*/

TD.someName {

color etc

... 

}

 

Hope that helps,

mattice

 

Sure thats superb. I will comment the style sheet and do a picture that should help the next newbie I hope :)

 

My main problem now is while I had a base ref listed all was ok I suspect it was still looking on the web for the images and CSS files?? But I did not wish to change the css file I had on line.

 

Now I have deleted the href the HTML file it does not seem to react to the changes in the css on my local drive and it no longer sees any images.

 

I think I can solve this by copying images to the same level as my HTML file (but in an images folder) but the css still does not seem to have any effect.......I will try more though.

 

Your advice was helpful though.

[ukracer]

Andy,

 

Can you tell me what Tr.header and Td.footer actually do.

 

If I change the TD the colours chnage and if I chnage the Tr nothing seems to happen??

 

also its pretty complicated in that now I have found that if I change the colour from default the round corners and in fcat the straight ends of te info boxes stay grey instead of changing colour. I cant follow if its an image of not!

[Ramesh]

Firstly,

The info box uses transparent gifs for the rounded corners and a style in the stylesheet for the fill color of the bar.

 

This lets the colour from the style show through. If you change the color of the bar at the top, you will have to change the color of the rounded images as well.

 

For anyone looking for a list of styles and what they relate to in OSC,

check out www.oscdox.com . If you download there short manual the last few pages have a list of styles.

 

Happy OSC'ing !

(Have I coined a new phrase ? )

[Guest]

TopStyle from http://www.bradsoft.com is the Style Sheet editor that I use, it shows the syles as you create/amend them. It costs, but there is a free trial and I think many 'puter mags have previous versions of TopStyle on their cover discs.

[asim0s]

well if your having problems with the css and stuff

 

ill recommend the best program around for css besides notepad :P

 

well its topstyle pro and i backup this program a 100% as the best around

 

 

and heres the site to download it www.bradsoft.com/topstyle/