slash25 code

  • Home
  • Work
  • Code
  • Github
  • WordPress Austin
  • Blog
You are here: Home / Archives for Code
August 24, 2012 By Pat · Leave a Comment

Customizing Gravity Forms CSS

August 24, 2012 by

Gravity Forms has its own CSS. You can over-ride those in your theme’s style sheet usually by copying what you see from Firebug or Chrome Inspector and adding something like “body” or “form” to them.

For example, a label element might have these styles in Gravity Forms default css:

.gform_wrapper .top_label .gfield_label {
margin: 10px 0 4px 0;
font-weight: bold;
display: -moz-inline-stack;
display: inline-block;
line-height: 1.3em;
clear: both;
}

If I want to change something, I would copy this into my style sheet and add the form tag to it:

.gform_wrapper form .top_label .gfield_label {

}

Now I can change things:

.gform_wrapper form .top_label .gfield_label {
margin: 10px 0 2px 0;
font-weight: normal;
display: block;
line-height: 1.5em;
clear: both;
color: #00a0ea;
font-size: 1em;
}

Tagged With: CSS

August 20, 2012 By Pat · Leave a Comment · (Updated: August 29, 2012)

Mobile theme switcher for Genesis child themes

August 20, 2012 by

Sometimes you just need two themes – one for non-mobile, one for mobile. A simple plugin to enable this is Mobile Theme Switch by Jonas Vorwerk. In my case, though, I didn’t want any chance of the plugin being disabled or someone accidentaly selecting the wrong theme (the plugin has an admin screen where you select the mobile theme from your active themes). So I copied the core of the plugin into my already-active core functionality plugin. You could also add this to your theme’s functions.php file:

Replace my-mobile-theme in line 43 with the name of your mobile theme’s directory (inside wp-content/themes).

The next thing you need to do is to place the links in the footer of both themes to enable the switching. In your mobile theme, you would add a link that looks like this:

<a href="/?mobile=off">View Non-mobile Site</a>

If you use the Genesis framework, in your theme’s functions.php file, you can add this code to place the link in your footer:

One last step – in the non-mobile theme, you’ll need to add a link for mobile users to be able to switch back. We don’t want this link to show up on desktop browsers, though, so we wrap it with the wp_is_mobile() function. In your footer, you’ll add this code:

For Genesis users, this would work:

Tagged With: Genesis, mobile

  • « Previous Page
  • 1
  • 2

copyright © 2020 slash25 code | privacy policy | pat on twitter