Builder CSS Guide - Revision history

Sridhar: /* How to set up and use custom.css */

2013-05-09T09:09:09Z

How to set up and use custom.css

Sridhar: /* How to set up and use custom.css */

2013-05-09T04:11:37Z

How to set up and use custom.css

Sridhar: /* Miscellaneous */ Added === How to set up and use a `custom.css` ===

2013-05-09T04:11:04Z

Miscellaneous: Added === How to set up and use a <code>custom.css</code> ===

Sridhar: /* Image Module */ Added === How to center image in Image Module ===

2013-04-29T03:33:12Z

Image Module: Added === How to center image in Image Module ===

Sridhar: /* To remove gap between each module */

2013-03-15T01:49:38Z

To remove gap between each module

Sridhar at 14:11, February 26, 2013

2013-02-26T14:11:03Z

Sridhar: /* Introduction */ Added === Builder CSS Video Tutorials ===

2013-02-26T05:19:44Z

Introduction: Added === Builder CSS Video Tutorials ===

Sridhar: /* How to hide title on homepage only */

2013-02-19T03:52:16Z

How to hide title on homepage only

Sridhar: /* How to hide titles on all Pages */

2013-02-19T03:51:29Z

How to hide titles on all Pages

Ronald: /* If you are using a WordPress 3 custom menu */

2012-10-16T22:16:21Z

If you are using a WordPress 3 custom menu

@@ Line 961: / Line 961: @@
 If you would like to place all your custom CSS code in a separate file named, say, <code>custom.css</code>, do the following.
-The advantages of doing this over editing the styles inline in style.css or writing at the end of style.css is that all your CSS customizations will be in one file. This file can easily be backed up and used again as needed when updating the child theme (Note that 99 times out of 100, one does not update child themes). Also it will help the support personnel help you better as the style changes will all be in one place and not inline.
+The advantages of doing this over editing the styles inline in style.css or writing at the end of style.css is that all your CSS customizations will be in one file. This file can easily be backed up and used again as needed when updating the child theme (Note however that 99 times out of 100, one does not update child themes). Also it will help the support personnel help you better as the style changes will all be in one place and not inline.
 '''1.''' Create a file named <code>custom.css</code> and upload it to active theme directory.
@@ Line 973: / Line 973: @@
 add_action('wp_enqueue_scripts', 'my_custom_styles');
 </pre>
 '''3.''' Place your custom CSS code in custom.css. This file will be available for editing at Appearance -> Editor.
-  Note: Make sure to take a back up of your customized custom.css when updating your active child theme.
+  Note: Make sure to take a back-up of your customized custom.css when [http://ithemes.com/codex/page/Builder_Child_Themes#How_to_update_a_child_theme updating your active child theme].
 Source: http://ithemes.com/forum/topic/36721-why-has-ithemes-not-upgraded-to-wordpress-35/#entry169383

@@ Line 957: / Line 957: @@
 That's it!
-=== How to set up and use a <code>custom.css</code> ===
+=== How to set up and use <code>custom.css</code> ===
 If you would like to place all your custom CSS code in a separate file named, say, <code>custom.css</code>, do the following.

← Older revision		Revision as of 04:11, May 9, 2013
Line 956:		Line 956:

	That's it!		That's it!
		+
		+	=== How to set up and use a <code>custom.css</code> ===
		+
		+	If you would like to place all your custom CSS code in a separate file named, say, <code>custom.css</code>, do the following.
		+
		+	The advantages of doing this over editing the styles inline in style.css or writing at the end of style.css is that all your CSS customizations will be in one file. This file can easily be backed up and used again as needed when updating the child theme (Note that 99 times out of 100, one does not update child themes). Also it will help the support personnel help you better as the style changes will all be in one place and not inline.
		+
		+	'''1.''' Create a file named <code>custom.css</code> and upload it to active theme directory.
		+
		+	'''2.''' Add the following at the end of active theme's <code>functions.php</code>:
		+
		+	<pre class="brush: php; gutter: false;">
		+	function my_custom_styles() {
		+	wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', '1.0.0', 'all' );
		+	}
		+	add_action('wp_enqueue_scripts', 'my_custom_styles');
		+	</pre>
		+
		+	'''3.''' Place your custom CSS code in custom.css. This file will be available for editing at Appearance -> Editor.
		+
		+
		+	Note: Make sure to take a back up of your customized custom.css when updating your active child theme.
		+
		+	Source: http://ithemes.com/forum/topic/36721-why-has-ithemes-not-upgraded-to-wordpress-35/#entry169383

← Older revision		Revision as of 03:33, April 29, 2013
Line 390:		Line 390:

	==Image Module==		==Image Module==
		+
		+	=== How to center image in Image Module ===
		+
		+	Before:
		+
		+	[[File:WordPress Dev Site - before.png\|800px\|thumb\|none]]
		+
		+	After:
		+
		+	[[File:WordPress Dev Site.png\|800px\|thumb\|none]]
		+
		+	Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
		+
		+	<pre class="brush:css; gutter: false;">
		+	.builder-module-1 .builder-module-element img {
		+	margin: 0 auto;
		+	}
		+	</pre>
		+
		+	Change 1 in <code>.builder-module-1</code> to the position of your Image module from the top in layout.

	==HTML Module==		==HTML Module==

@@ Line 138: / Line 138: @@
 </gallery>
-===To remove gap between each module===
+=== To remove gap between each module ===
-<pre class="brush:css;">
+Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 .builder-module {
-	margin-bottom: 0;
+<pre class="brush:css; gutter: false;">
+}
 </pre>
-<u>Note</u>: This only applies to Default child theme.
+<gallery widths=320px heights=199px>
+File:Holistic Nutrition By Lisa 2013-01-25 09-16-09.png|Before
-<gallery widths=200px caption="Before and After">
+File:Holistic Nutrition By Lisa 2013-01-25 09-15-19.png|After
-File:gap-between-modules-before.png
-File:gap-between-modules-after.png
 </gallery>
 ===To remove the top and bottom borders for all modules===

@@ Line 19: / Line 19: @@
 Because of the vast number of classes that Builder makes available, there are several ways of targeting the same element and hence the following is not the only way of going about it. There is more than one way to ''skin'' a cat.
-=== Builder CSS Video Tutorials ===
+=== Videos ===
-Please watch [http://ithemes.com/tutorial/category/builder-css/ Builder CSS Video Tutorials] in which you can learn how to use iThemes Builder and CSS to create unique customizations to your Builder sites.
+{{#ev:vimeo|59590792|640}}
 === CSS to target various elements of a Builder site ===

← Older revision		Revision as of 05:19, February 26, 2013
Line 18:		Line 18:

	Because of the vast number of classes that Builder makes available, there are several ways of targeting the same element and hence the following is not the only way of going about it. There is more than one way to ''skin'' a cat.		Because of the vast number of classes that Builder makes available, there are several ways of targeting the same element and hence the following is not the only way of going about it. There is more than one way to ''skin'' a cat.
		+
		+	=== Builder CSS Video Tutorials ===
		+
		+	Please watch [http://ithemes.com/tutorial/category/builder-css/ Builder CSS Video Tutorials] in which you can learn how to use iThemes Builder and CSS to create unique customizations to your Builder sites.

	=== CSS to target various elements of a Builder site ===		=== CSS to target various elements of a Builder site ===

@@ Line 837: / Line 837: @@
 When Builder 3.0 and a corresponding LoopBuddy compatible theme like the current (as of Monday, July 11, 2011) Builder child themes are being used, adding the following at end of child theme's style.css will hide Page title on homepage:
-<pre class="brush:css;">
+<pre class="brush:css; gutter: false;">
 .home .entry-title {
      display: none;
@@ Line 845: / Line 845: @@
 For pre-Builder 3.0, use this CSS:
-<pre class="brush:css;">
+<pre class="brush:css; gutter: false;">
 .home .title {
      display: none;

@@ Line 315: / Line 315: @@
 <u>Note</u>: In the above code, ''mainmenu'' must be replaced with the slug of your custom menu. Ex.: If the name of your custom menu is ''Primary Navigation'', then replace <code>.menu-mainmenu-container</code> with <code>.menu-primary-navigation-container</code>.
-''In most cases, this more generic (so independent of the menu name) code will accomplish the same:''
+'''In most cases, this more generic (so independent of the menu name) code will accomplish the same:'''
 <pre class="brush:css;">

Builder CSS Guide - Revision history

Sridhar: /* How to set up and use custom.css */

Sridhar: /* How to set up and use custom.css */

Sridhar: /* Miscellaneous */ Added === How to set up and use a custom.css ===

Sridhar: /* Image Module */ Added === How to center image in Image Module ===

Sridhar: /* To remove gap between each module */

Sridhar at 14:11, February 26, 2013

Sridhar: /* Introduction */ Added === Builder CSS Video Tutorials ===

Sridhar: /* How to hide title on homepage only */

Sridhar: /* How to hide titles on all Pages */

Ronald: /* If you are using a WordPress 3 custom menu */

Sridhar: /* Miscellaneous */ Added === How to set up and use a `custom.css` ===