css cheat sheet 2 - amazon s3cheat+sheet+2.1.pdfcss cheat sheet 2.1 9 contolling the margin of the...

CSS Cheat Sheet 2.1CSS Cheat Sheet 2.1

1

2

3

4

To center the header (or edit in Logo settings):

Menu background color (HEX values)

Menu Font Styles

Menu Transparency (shown at 100%)

#iHeader { text-align:center; }

.iMenu ul { background-color:#000; }

.iMenu ul li a, .iMenu li.icon span.a, .iList li.icon span.a { color:#bc9753; font-family: serif; font-size: 15px; }

.iMenu ul { opacity: 1.0; }

This code can change the font family and font styles on the Menus, but it does not affect the font styles on the text descriptions (generic contents). Font families can be sans-serif, serif fonts or other fonts supported by mobile browsers. Size of fonts could be changed into sizes supported by the browsers.

As shown in this example, the background for menu used a custom image. If the a custom image is not used, the background color can be edited by default. Note however that once there spacing on the links, this code will become invalid.

This code changes the opacity of the main menu sliders. Note that this code will be disabled once there are spacing between the menu sliders.

1

2

3

4


5 Menu Border Color and Thickness (HEX).iMenu ul li { border-color:#ff0000; }

This changes the border color of the default menu sliders.

6Menu Background Image

(Custom Slider Background Image)

.iMenu li { padding: 0px; margin: 0px; background: transparent url(INSERT URL HERE); width: 100%; border: 0px; background-repeat: repeat; }

This code allows the background sliders to have a custom image background. Just insert the URL where the image is uploaded in the “(INSERT URL HERE)” [Note: remove the quotation marks but not the parentheses].

5

6


7 Changing the Menu Radius Border

.iMenu li:first-child, .iMenu li:first-child a, .iPanel li:first-child, .iPanel li:first-child a { border-top-left-radius: 0; border-top-right-radius: 0; } .iMenu li:last-child, .iMenu li:last-child a, .iPanel li:last-child, .iPanel li:last-child a { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

This code changes the roundness of the corners of the menu panel. A value of 0 would give the corners a straight edge and the maximum value is 8, which would give the the edges a rounded shape. This code will not work if there are spaces in between the menu sliders.

7

8 Adding Custom Background on the Main Area

.ui-page { background-image: url(INSERT-URL-HERE); background-repeat: repeat; }

This code allows you to put an image to the background of the mobie website. Just insert the URL of the uploaded image on the INSERT URL HERE tag (in between the parentheses). If you have a custom sized background image and would not like the background image to repeat, change the “background-repeat:” variable from “repeat;” to “no-repeat;” Note: Do not forget the semi-colon at the end of each variable. A missing semi-colon means that the variable would not be executed or would not be read by the mobile browser.

8


9 Contolling the margin of the main menu bar.iMenu { margin: 20px 110px 20px 0px; }

This changes the margin of the menu bar relative to the left and right edges, and also from the bottom edge of the header area and from the top edge of the footer area. The first number is the space between the top edge of the menu bar and the bottom edge of the header area. The second number is the right margin while the third number is the space between the bottom of the menu bar and the top edge of the footer area. The fourth number is the left margin.

10Adjusting the height of menu

navigation bar.iMenu li, .iPanel fieldset li { border-style: solid; line-height: 1.175; }

This changes the height of the menu navigation bar. A higher number results to a bigger space or a higher menu navigation bar.

9

10


11 Adjusting the paragraph alignment of menu text on menu navigation bar

.iMenu .ui-li .ui-btn-inner a.ui-link-inherit, .iPanel .ui-li .ui-btn-inner a.ui-link-inherit { text-align: center; }

This changes the alignment of text in the main menu navigation bar. The variable on the “text-align” can be changed to left, center, right.

11

12

12Choosing the borderline style of the menu bar

or menu slider.iMenu li, .iPanel fieldset li { border-style: dashed; border-color : #000; border-width: medium; }

The variables available for the line “border-style:” are dashed, dotted and solid. “border-color:” is the color of the border line and border width is the thickness of the border.


15Custom menu background images on the secondary and tertiary sub-level sliders

.iList li { background: url(INSERT URL HERE) repeat scroll center center transparent; border: 0 none; margin: 0; padding: 0; }

This code snippet allows users to change the background of a secondary and tertiary sub-menu/slider. Just put the URL of the image that you wish to use as a background the sub menu slider in the (INSERT URL HERE) part [In between the parentheses]. The margins, borders, font size could also be edited according to the user’s preference.

13 Custom Background Image Header.ui-header { background-image: url(INSERT-URL-HERE); background-repeat: repeat; }

You can add a custom background image header together with your logo. Image should be 1x44 pixels and should have a transparent background. Insert the URL address in between the the parentheses..

14 Changing the Menu Arrow (chevron)

ul.iArrow li a, li.iRadio a { background-image: url(”INSERT-URL-HERE”); }

This changes the arrow of the menu to a different image. Image should be: 20x13 pixels and should have a transparent backround. Insert the URL address in between the parentheses.

13

15

14

16Changing the background

opacity/transparency of a sub-menu.iList { background: #fff; color: #000; opacity: .6; }

This code snippet changes the opacity of a sub-menu list (If a custom background image is not used). A value of .6 means the transparency is at 60%. A value of 1.0 is the default, wherein the opaqueness is set to 100%. Just change the value of the “opacity:” to a desired level. This changes the transparency of the block list thereby allowing you to see background while the block list of items is present.

17 Changing the font style and background style of a sub-menu

.iList li:not(.iMore) a:not(.iSide) { background: #fff; color: #000; font-family: serif; font-size: 16px ; opacity: .7 }

This code snippet allows the font and background styles of a sub-menu to be changed. If the “. iList” code snippet is not implemented, the opacity can be also be changed. But if it is implemented, the “opacity:” property can be eliminated as this would create no difference on the background. Again, the font-family can be sans-serif, serif, or other fonts supported by mobile browsers; font-size can be changed, relative or px sizes, 16px is the default font-size.

16

17

18 Change Sub-Menu Color.iList li:not(.iMore) a:not(.iSide), .iList li.m-li-static.m-li:not(.iMore) { background: #ff0000; color: #ebebeb; font-family: serif; font-size: 15px; }

This changes the colors of the background (if custom background image is not used), font color and at the same time the font family of the sub-menus

18



19

20

19 Controlling the style of the border of the map on Maps module

.map_canvas { background-color: transparent; border-radius: 0px 0px 0px 0px; text-align: center; padding: 0px; margin: 10px; } .map_canvas .ui-listview .ui-li { background-color: #ff0000; border-radius: 0px 0px 0px 0px; }

This allows users to add or remove the borders surrounding the Google maps image of the location of the establishment. In here, margins, background color, width of the map and the roundness of the corners of the borders can be changed. In the roundness of the corners, a value of 0px on all the four values would give a straight corner. A value of 8px on the other hand would give a rounded corner.

20 Adjusting the font size of the address in the Map menu

.iMenu li.location span { font-size: 10px; }

This allows the size of the font of the address on the map area to be adjusted accordingly.

21 Fixing the Address Bar if CSS code #6 is used

(custom menu slider background)

.iMenu li.icon a, .iMenu li.icon .ui-btn-inner a.ui-link-inherit { background-color: #f5234a; font-size: 14px; background: transparent url(INSERT URL HERE); background-size: cover; }

This code fixes the address bar in the maps area in case custom menu slider backgrounds are used. Since both menu sl iders and address bars share the same CSS id in the mobile CMS, this code would al low another background image to be inserted in the address bar only. Just add the URL of the image in the INSERT URL area (inside the parentheses).

21


23

22 Generic Content Frame Fill (HEX)

.iBlock { background-color: #700000; color: #fff; border-width: 2px; border-color: #ff0000; font-family: serif; }

This code snippet controls the background and the border thickness of the generic content frame. Note: Make sure there is enough contrast between background color and font color

22

23 Moving the social media buttons downward or upward

.m-social-media-links-part ul { list-style: none outside none; padding-top: 5px; }

This allows the social media buttons and the footer area to be moved downwards in case further menus are added in the website. Adjust the “padding-top” values to adjust the space between the social media buttons and the last menu slider.

24 Control the styles of “Switch to Desktop View” Text

.ui-footer .ui-title { color: #ff0000; font-size: 20px; font-weight: bold; text-align: center; font-family: serif } .ui-footer a:link { color: #fff; font-family: serif; }

This code allows the user to change the appearance or style of the “Switch to Desktop” link. The first batch of code is for the words “Switch to” and “version. The second batch of code is for the word ”Desktop” which is a link.

24


This code snippet changes the font styles of the description of the Menu items. For example, in the demo website WAGYU, the font of the description of the food item can be changed. The “color” property changes the font color, the “font-size” changes the size of the font, which can be relative size or in units of px. The default value for this is 13px. The “font-family” changes the style of the font, whether it may be sans-serif, serif fonts or other fonts supported by mobile browsers.

26 Changing the font-style on the text description of Menu(module) items

.iList li small { color: #ff0000; font-size: 15px; font-family: sans-serif; }

26

25 Changing the font style and background style of category bar in the Menu module

.iList h2 { font-family: serif; color: #000; background: #ffffff; opacity: .9; }

This code changes the font style and background of the category bar that appears in the item list in the Menu module and also the date area in the Events module. Also works on the category bar of the Menu module.

25

Automatic image width of photos in the Gallery module

div.m-singleimage img { width: 290px; }

This code changes the size of an image in the Gallery module, the default width that would fit into most mobile browsers is 290px. If the width of a photo that was uploaded is greater than 290px, this code will automatically resize the photos proportionally (the height would adjust automatically.

27


27

css cheat sheet 2 - amazon s3cheat+sheet+2.1.pdfcss cheat sheet 2.1 9 contolling the margin of the...

Documents