2: Re: CSS Templates (response to 1)
Posted by Voice Admin on

The easiest thing to do would be to look at the CSS from one of the standard themes. The markup for the custom theme is the same as that used in all themes other than Playtime and Darktones. (though if you particularly wanted to use the same markup as these themes then I could add this as an option).

So you can get to the CSS just by selecting an appropriate theme, viewing the source for the page, and then getting the URLs of the CSS files.

You'll find that the custom theme automatically includes positioning.css and shape.css which will give you a very basic layout (including the grid layout for the calendar, for example). You can then provide your own equivalent to the theme.css file.

In the standard themes, we use "theme.css" when the page is viewed in a browser, and "style.css" when in the WYSIWYG editor. Usually these are the same, so you can simply include one file from the other.

So, for example, if you want to base your theme on the theme "blue menu with green wavey header" then you want to start off with this CSS file.

Thanks

Voice Admin

3: Re: CSS Templates (response to 2)
Posted by Deleted User on

I could not get this to work. I downloaded the style.css file (from 'start off with this css file'), made a minor change, uploaded to assets library and configured the custon theme to this style sheet. When I display in browser I seem to get no theme at all - i.e. not reading the .CSS file. What should I have done, and how can I get Voice to look at a custom print.css as well.

Thanks

4: Re: CSS Templates (response to 3)
Posted by Voice Admin on

I just enabled this on your site (please put it back if you don't want it!). There was as far as I could see one small problem that you had the URL for the css file slightly wrong in the custom settings. If I reselected the file from the assets library then it works fine.

(note that the file in the assets library has the URL style-css and not style.css) - asset URLs never have dots in them.

So hopefully now you'll find that as you change your style.css you will see the changes appearing on your site!

You can't change which print.css file is included, but you should be able to add extra print rules into your CSS file by using the @media print { ...styles... } syntax. There's some information on this here and the official spec here.

(Note that I've not specifically tried this, so please do post your findings on here for others to learn from!)

Thanks

Voice Admin

5: Re: CSS Templates (response to 4)
Posted by Deleted User on

Thanks for that - syle.css seems to be read now, I can change stuff (colours, font sizes etc)

But  I put

/*change styles when printing*/ @media print {   h1 {font-size: 16px;}  }

into the style sheet. But when I print preview the H1 font is as large as on screen (26pt)

 

Phil

6: Re: CSS Templates (response to 5)
Posted by Voice Admin on

Being relatively new CSS it's only supported in modernish browsers, this page seems to say which ones:

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

Unfortunately there is (currently) no way to specify your own print CSS file which can be used with older browsers.

Thanks

Voice Admin

7: Re: CSS Templates (response to 6)
Posted by Deleted User on

I tried with several browsers and having this in the .CSS file

/*change styles when printing*/ @media print {   body {font-size: 12px;}   h1   {font-size: 115%;}   h2   {font-size: 110%;}   h3   {font-size: 105%;}   p    {font-size: 10px;}  }

But no change when I Print Preview

I know the .CSS is being read as other style changes are implemented.

Is my syntax wrong or can the print output not be manipulated (which would be a pity)

Phil

9: Re: CSS Templates (response to 7)
Posted by Voice Admin on

I think it is probably being read correctly by the browser, but the rules following your print section are overriding the styles.

Unless you specifically limit your other rules to screen only, then later rules will always override earler rules.

So either there are (at least) two approaches:

  1. put your screen styles into a @media screen { } block following your @media print { } block
  2. define your global styles at the top of the file and put your @media print { } section at the end of the file to tweak those rules by overriding the bits you want to change.

For maximum compatibility the first option is probably best, with your print styles defined first. That way if you use an old browser which doesn't understand print/screen rules then the later rules will override the earlier ones and they won't end up with looking at the print styles all the time.

Thanks

Voice Admin

11: Re: CSS Templates (response to 9)
Posted by Deleted User on

Thanks - that seesm to have done the trick

Phil

12: Re: CSS Templates (response to 11)
Posted by Deleted User on

This one seems to have resurrected itself!

I have a single style sheet with @media all [ lots of styles here } and @media print { a coupe of styles here} at the bottom. So general styles should be ober-ridden by the print styles at Print Preview.

The print style is not being read at all e.g. main style is Verdana but print shows as Times (the default). If I put the print styles in a specific page it works as expected.

Any idea what I am doing wrong?
Phil

Thanks 

13: Re: CSS Templates (response to 12)
Posted by Deleted User on

This may be a browser problem. I am using IE10

If I use Chrome the print styles are read correctly - but the screen font type is wrong!

I will investigate firther

Phil

8: Re: CSS Templates (response to 4)
Posted by Deleted User on

BTW I had input my STYL.CSS correctly (i have done so several times) but the software still shows as STYLE-CSS. It obviously si internally correct as the style changes work. Must be a display problem.

Phil

10: Re: CSS Templates (response to 8)
Posted by Voice Admin on

style-css is correct for the URL (all dots are converted to dashes). Though you will see style.css in the Assets Library since this is the name you have chosen to give the file.

Thanks

Voice Admin