How style.css works. Template improvements.    
This topic is closed by Eugene

--Admin--
Feb 16, 2012 07:59 AM
SeattleClouds made some essential page and template improvements. There are significant modifications in style.css.  
All templates have been modified to support Landscape / Portrait mode. All pages in all templates will use flexible HTML/CSS to align center in both modes (Portrait and Landscape)

To make page modifications easier you need to know the connection between a page and a CSS class.

On SeattleClouds each page has several corresponding CSS classes. To detect them, please go in your application Dashboard-> Design Properties->Edit" style.css" 

ex. If you have created Grid MENU page type, in your style.css classes with prefix gridmenu will be inserted (ex. .gridmenuimagecontainer).

for Button MENU page type in style.css will be inserted classes with buttonmenu prefix (ex. buttonmenuitemcontainer)


These classes will be inserted in style.css when you create a new page or when you convert an existing page to a specified page type. 

These injected classes affect only the pages of specified type.

style.css classes has been modified to support landscape/portrait mode.

Let's take for example Grid MENU page type. 

If you already created a Grid MENU page type in your app, it will not support landscape mode. Why? Because your classes related to a page have been already injected before. You need to replace these classes with new classes.

To repair this issue please follow these steps:

1.1 Go in your app Dashboard->Design Properties->Edit"style.css"
1.2 Find /*gridmenucssaddition*/ comment and delete all classes starting with   gridmenu prefix including  /*gridmenucssaddition*/ comment.
1.3 Go to your app Dashboard->Edit Pages
1.4 Create a new Grid MENU page, in your style.css will be inserted new gridmenu CSS classes.
1.5 Verify on your device the old Grid menu page, it should work like a new page supporting landscape mode, because it uses the new CSS classes.
1.6 Delete from your pages the last new Grid MENU page created.

!!! The second option may result in loss of page information.
2.1 Go to your app Dashboard->Edit Pages
2.2 Click on your existing Grid MENU page and convert it to Grid MENU page type. If you do not have /*gridmenucssaddition*/ in your file style.css, corresponding classes will be inserted in style.css when you convert your page to Grid MENU page type. If you have /*gridmenucssaddition*/ please follow steps 1.1 - 1.6



Feb 16, 2012 03:24 PM
Alice - Do we need to do this for GRID ONLY or for all menu/page types? Thank your for the step by step detail directions...awesomeness!

Also, off topic...but the memory game does not work when tested on devices. Is there something we need to do via the style sheet for that too?

Thanks!
Ellie


--Admin--
Feb 17, 2012 12:45 AM
Hi Ellie,

No, this example is not just for Grid MENU, you can do that for IMG MENU, Magazine MENU, Stripes MENU, Button MENU, Large Button MENU, Quiz Question.

Memo page type require SeattleClouds version 4.0.2


Feb 17, 2012 09:16 AM
Hi Alice - The app store shows the SC Version as 4.0.1 how do we get 4.0.2?


Feb 17, 2012 11:57 AM

I did exactly what you reccomended, deleted all the CSS classes pertaining to Webkitmenus, and created a new page which did indeed create new classes for all of my webkitmenus, but I fail to see how it aligned the center in my landscape mode?



--Admin--
Feb 19, 2012 05:23 AM
Go to design settings, click on Edit Style.css find body {...} class. See all attributes in body class and remove any attribute that says align:left

That is most probably the reason why it still aligns left. If you remove it and still doesn't work, please open a support ticket.


--Admin--
Feb 20, 2012 12:17 AM
SeattleClouds v4.0.2 is already in AppStore, you can update now SeattleClouds preview for iPhone and iPad


Feb 20, 2012 09:35 AM

Thanks. I deleted ALL of my body info, and created a new html page. This seemed to not work until I reset my ipod and logged back into the SC app. 75% of my worries are now gone :)



--Admin--
Feb 20, 2012 11:47 AM
There is a bug in iOS 5.0.1 which we hope will be soon fixed. This is a nasty issue which must be fixed by Apple, until then the only work around is to close the application and reopen it again. There is no need to uninstall the app. It is enough to close the app from background. 
Yeah, I figured it was some bug. Now I'm having a slight problem with my background image. It appears on most of the webkitmenu pages, but a few of them? Tried to solve it through the css and by looking at the html tags within the page. But it seems like the css controls parts of the script that are universal for pages....
But losing the background for a few of the pages, led me to consider not even having a background because it's not really needed. Decisions, decisions. :)


Feb 20, 2013 07:48 AM
How do I point my css to an image in the resource manager? rg

background-image:????;

Thanks


Feb 20, 2013 07:53 AM
background-image:url(background_image.png);

    1