Cool mobile design tips with custom CSS

• We have recently made it a little easier to add your own CSS to the mobile sites. (Even though our drag-and-drop editor gives you quite a few design options, adding a bit of your own CSS code may be the easiest way to go in some situations, if you are tech-savvy).
• We’ll be posting a few articles on different ideas and things you can do with CSS on our platform, and here is the first one. In this post we’ll show you how to:

1. Add a semi-transparent background under the main content area

2. Remove the background under the headers and add a custom font

3. Add a glowing animation

4. Style an RSS feed widget

5. Create a cool “Hot Deal” button.

(Please note that we won’t go into any CSS or HTML training here. I am simply trying to give you a few ideas of what can be done.)

For comparison, here are a few before and after screenshots. (You can also take a look at the live mobile page here).

Note, the best way to add CSS to your mobile pages is by dragging a Custom HTML widget to the top of the mobile page, and then copying and pasting the CSS there. (You would write the CSS code in your favorite CSS editor first). You can add the custom HTML widget into your widget library if you plan on using the CSS on multiple pages on your site:

Next, when you are adding the style to any specific widgets on the page (and not to all elements, such as – all headers, or all buttons), assign a CSS class to that widget (and you can reference that CSS class in your CSS definitions). In this example, CSS class “grumpy-wizards” was assigned to one of the Text widgets, and CSS class “hot-deal-button” was assigned to the button:

Here is what we did on the above example:

1. Added a semi-transparent background under the main content area. (Sometimes the background image has too much contrast between color elements, which can make the text on it hard to read, and a solid color semi-transparent overlay can be useful to make the text more readable.)

And here is the CSS code we used to add the white semi-transparent background:

body .content-mobile > div {
margin:-30px 18px 0;padding-top:30px;
-moz-box-shadow: 0 0 30px rgba(255, 255, 255, 0.43);
-o-box-shadow: 0 0 30px rgba(255, 255, 255, 0.43);
-webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.43);
box-shadow: 0 0 30px rgba(255, 255, 255, 0.43);
-moz-border-radius:0 0 30px 30px;-o-border-radius:0 0 30px 30px;
-webkit-border-radius:0 0 30px 30px;border-radius:0 0 30px 30px;
background:rgba(255, 255, 255, 0.2);
}

2. Removed the blue background under the headers and added a custom font:

body .content-mobile .block .block-head.default-theme .wrapper, body .content-mobile .block .block-head.default-theme { background:none; }
body .content-mobile .block.grumpy-wizards .block-content .text-box p span, body .content-mobile .block .block-head h2 span {
font-weight:normal;font-family: 'Oleo Script Swash Caps', cursive !important;
}

Also, in the “Header HTML Insert” setting in the “SEO, CSS and Options” section, add the reference to Google’s web fonts library:

<ink href='http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Denk+One' rel='stylesheet' type='text/css'>

3. Added a glowing animation to the headers:

body .content-mobile .block .block-head h2 { -moz-animation-iteration-count:infinite;-moz-animation-duration:2s;-moz-animation-name:glowing;-moz-animation-delay:0;-moz-animation-timing-function:ease-in;-o-animation-iteration-count:infinite;-o-animation-duration:2s;-o-animation-name:glowing;-o-animation-delay:0;-o-animation-timing-function:ease-in;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:2s;-webkit-animation-name:glowing;-webkit-animation-delay:0;-webkit-animation-timing-function:ease-in;animation-iteration-count:infinite;animation-duration:2s;animation-name:glowing;animation-delay:0;animation-timing-function:ease-in; }
@-moz-keyframes glowing {
from {
text-shadow:none;
}
50% {
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
to {
text-shadow:none;
}
}
@-o-keyframes glowing {
from {
text-shadow:none;
}
50% {
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
to {
text-shadow:none;
}
}
@-webkit-keyframes glowing {
from {
text-shadow:none;
}
50% {
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
to {
text-shadow:none;
}
}
@keyframes glowing {
from {
text-shadow:none;
}
50% {
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
to {
text-shadow:none;
}
}

4. Added our own style to the RSS feed widget:

body .block-feed ul h3 {
padding:3px 5px 4px;
background:rgba(255, 255, 255, 0.5);
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px; }
body .block-feed ul h3 a { color:#003;text-decoration:none; }
body .block-feed ul .date {
margin-top:0;
padding:2px 5px 1px;
-moz-border-radius:0 5px 0 5px;
-o-border-radius:0 5px 0 5px;
-webkit-border-radius:0 5px 0 5px;
border-radius:0 5px 0 5px;
background:#003; }
body .block-feed ul li, body .block-feed ul li a, body .content-mobile .button-holder-image a span span span {
font-weight: normal;font-family: 'Denk One', sans-serif; }

5. Create a cool “Hot Deal” button.

body .content-mobile .block.hot-deal-button .button-holder-image a {
padding-top:10px;width:200px;
height:190px;
background:rgba(255, 255, 255, 0.5);
border-radius:100px;
-moz-box-shadow:0 2px rgba(0,0,0,0.6);
-o-box-shadow:0 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 2px rgba(0,0,0,0.6);
box-shadow:0 2px rgba(0,0,0,0.6); }
body .content-mobile .block.hot-deal-button .button-holder-image a img { display:none; }
body .content-mobile .block.hot-deal-button .button-holder-image a span span span {
font-size:50px;
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; }