Make compatible with Bootstrap 4:

- Change every 'col-' to 'owp-col-' (except WooCommerce releated stuff, because there are also col-1, col-2 classes -> woocommerce/woocommerce#15793) - Add max-width: unset and display: block to WooCommerce to make sure Bootstrap forms work - Add custom CSS to _navigation.scss to make navigation work with Bootstrap - Recompile style.css and woocommece.css
LORDofDOOM · Sep 23, 2018 · bb06520 · bb06520
1 parent eef5903
commit bb06520
Show file tree

Hide file tree

Showing 16 changed files with 534 additions and 161 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/css/style.min.css b/assets/css/style.min.css
diff --git a/assets/css/woo/woocommerce.css b/assets/css/woo/woocommerce.css
@@ -659,6 +659,7 @@
 
 .woocommerce form .form-row {
   padding: 3px 0;
+  display: block;
 }
 
 .woocommerce form .form-row label {
@@ -2273,11 +2274,13 @@
 .col2-set .col-1 {
   float: left;
   width: 48%;
+  max-width: unset;
 }
 
 .col2-set .col-2 {
   float: right;
   width: 48%;
+  max-width: unset;
 }
 
 @media only screen and (min-width: 481px) and (max-width: 768px) {

diff --git a/assets/css/woo/woocommerce.min.css b/assets/css/woo/woocommerce.min.css
diff --git a/inc/edd/edd-config.php b/inc/edd/edd-config.php
@@ -234,7 +234,7 @@ public static function add_download_classes( $classes ) {
 			// Counter
 			global $oceanwp_count;
 			if ( $oceanwp_count ) {
-				$classes[] = 'col-'. $oceanwp_count;
+				$classes[] = 'owp-col-'. $oceanwp_count;
 			}
 
 			return $classes;

diff --git a/inc/helpers.php b/inc/helpers.php
@@ -2392,7 +2392,7 @@ function oceanwp_post_entry_classes() {
 		// Counter
 		global $oceanwp_count;
 		if ( $oceanwp_count ) {
-			$classes[] = 'col-'. $oceanwp_count;
+			$classes[] = 'owp-col-'. $oceanwp_count;
 		}
 
 		// Apply filters to entry post class for child theming

diff --git a/inc/walker/init.php b/inc/walker/init.php
@@ -108,9 +108,9 @@ public function add_custom_fields( $id, $item, $depth, $args ) { ?>
 	        </label>
 	    </p>
 	    <p class="field-megamenu-columns description description-wide">
-	        <label for="edit-menu-item-megamenu_col-<?php echo esc_attr( $item->ID ); ?>">
+	        <label for="edit-menu-item-megamenu_owp-col-<?php echo esc_attr( $item->ID ); ?>">
 	            <?php esc_html_e( 'Megamenu columns (from 1 to 6)', 'oceanwp' ); ?><br />
-	            <input type="number" id="edit-menu-item-megamenu_col-<?php echo esc_attr( $item->ID ); ?>" class="widefat code edit-menu-item-custom" name="menu-item-megamenu_col[<?php echo esc_attr( $item->ID ); ?>]" min="1" max="6" value="<?php echo esc_attr( $item->megamenu_col ); ?>" />
+	            <input type="number" id="edit-menu-item-megamenu_owp-col-<?php echo esc_attr( $item->ID ); ?>" class="widefat code edit-menu-item-custom" name="menu-item-megamenu_col[<?php echo esc_attr( $item->ID ); ?>]" min="1" max="6" value="<?php echo esc_attr( $item->megamenu_col ); ?>" />
 	        </label>
 	    </p>                   
 	    <p class="field-megamenu-heading description description-wide">

diff --git a/inc/walker/menu-walker.php b/inc/walker/menu-walker.php
@@ -35,7 +35,7 @@ public function start_lvl( &$output, $depth = 0, $args = array() ) {
 	        $indent = str_repeat("\t", $depth);
 
 	        // Megamenu columns
-	        $col = ! empty( $this->megamenu_col ) ? ( 'col-'. $this->megamenu_col .'' ) : 'col-2';
+	        $col = ! empty( $this->megamenu_col ) ? ( 'owp-col-'. $this->megamenu_col .'' ) : 'owp-col-2';
 
 	        if( $depth === 0 && $this->megamenu != '' && 'full_screen' != oceanwp_header_style() && 'vertical' != oceanwp_header_style() ) {
 	        	$output .= "\n$indent<ul class=\"megamenu ". $col ." sub-menu\">\n";
@@ -251,7 +251,7 @@ public function end_el( &$output, $item, $depth = 0, $args = array() ) {
 				&& 'full_screen' != $header_style && 'vertical' != $header_style ) {
 				global $post;
 
-				$output .= "\n<ul class=\"megamenu col-4 sub-menu\">\n";
+				$output .= "\n<ul class=\"megamenu owp-col-4 sub-menu\">\n";
 
 					// Sub Categories ===============================================================
 					if ( $item->category_post != '' && $item->object == 'category' ) {

diff --git a/partials/footer/widgets.php b/partials/footer/widgets.php
@@ -92,30 +92,30 @@
 		} else {
 
 			// Footer box 1 ?>
-			<div class="footer-box <?php echo esc_attr( $grid_class ); ?> col col-1">
+			<div class="footer-box <?php echo esc_attr( $grid_class ); ?> col owp-col-1">
 				<?php dynamic_sidebar( 'footer-one' ); ?>
 			</div><!-- .footer-one-box -->
 
 			<?php
 			// Footer box 2
 			if ( $columns > '1' ) : ?>
-				<div class="footer-box <?php echo esc_attr( $grid_class ); ?> col col-2">
+				<div class="footer-box <?php echo esc_attr( $grid_class ); ?> col owp-col-2">
 					<?php dynamic_sidebar( 'footer-two' ); ?>
 				</div><!-- .footer-one-box -->
 			<?php endif; ?>
 
 			<?php
 			// Footer box 3
 			if ( $columns > '2' ) : ?>
-				<div class="footer-box <?php echo esc_attr( $grid_class ); ?> col col-3 ">
+				<div class="footer-box <?php echo esc_attr( $grid_class ); ?> col owp-col-3 ">
 					<?php dynamic_sidebar( 'footer-three' ); ?>
 				</div><!-- .footer-one-box -->
 			<?php endif; ?>
 
 			<?php
 			// Footer box 4
 			if ( $columns > '3' ) : ?>
-				<div class="footer-box <?php echo esc_attr( $grid_class ); ?> col col-4">
+				<div class="footer-box <?php echo esc_attr( $grid_class ); ?> col owp-col-4">
 					<?php dynamic_sidebar( 'footer-four' ); ?>
 				</div><!-- .footer-box -->
 			<?php endif; ?>

diff --git a/partials/header/style/medium-header.php b/partials/header/style/medium-header.php
@@ -50,7 +50,7 @@
 						$e_classes = array( 'top-col', 'clr' );
 
 						// Count
-						$e_classes[] = 'col-'. $count;
+						$e_classes[] = 'owp-col-'. $count;
 
 						// If logo
 						if ( 'logo' == $element ) {

diff --git a/partials/single/related-posts.php b/partials/single/related-posts.php
@@ -102,7 +102,7 @@
 				// Add classes
 				$classes	= array( 'related-post', 'clr', 'col' );
 				$classes[]	= oceanwp_grid_class( $oceanwp_columns );
-				$classes[]	= 'col-'. $oceanwp_count; ?>
+				$classes[]	= 'owp-col-'. $oceanwp_count; ?>
 
 				<article <?php post_class( $classes ); ?>>
 

diff --git a/sass/base/_main.scss b/sass/base/_main.scss
@@ -86,7 +86,7 @@ body .oceanwp-row {
  * Grid > Clear Floats.
  */
 .count-1,
-.col-1,
+.owp-col-1,
 .col.first {
 	clear: both;
 	margin-left: 0;
@@ -201,7 +201,7 @@ form.oceanwp-searchform {
 
 	/* turn 4 column masonry grids into 2 columns */
 	body .oceanwp-row {
-		.span_1_of_4.col-3.col,
+		.span_1_of_4.owp-col-3.col,
 		.span_1_of_4.col.product:nth-child(2n+3) {
 			margin-left: 0;
 			clear: both;

diff --git a/sass/components/header/_header-medium.scss b/sass/components/header/_header-medium.scss
@@ -23,16 +23,16 @@
 		-webkit-flex: 1 0 0%;
     	flex: 1 0 0%;
 
-		&.col-1 {
+		&.owp-col-1 {
 			text-align: left;
 		}
 
-		&.col-2,
+		&.owp-col-2,
 		&.logo-col {
 			text-align: center;
 		}
 
-		&.col-3 {
+		&.owp-col-3 {
 			text-align: right;
 		}
 	}

diff --git a/sass/components/header/_megamenu.scss b/sass/components/header/_megamenu.scss
@@ -54,25 +54,25 @@
  * Megamenu columns
  */
 .navigation li.megamenu-li .megamenu {
-    &.col-1 > li { width: 100%; }
-    &.col-2 > li { width: 50%; }
-    &.col-3 > li { width: 33.33333333%; }
-    &.col-4 > li { width: 25%; }
-    &.col-5 > li { width: 20%; }
-    &.col-6 > li { width: 16.66666667%; }
+    &.owp-col-1 > li { width: 100%; }
+    &.owp-col-2 > li { width: 50%; }
+    &.owp-col-3 > li { width: 33.33333333%; }
+    &.owp-col-4 > li { width: 25%; }
+    &.owp-col-5 > li { width: 20%; }
+    &.owp-col-6 > li { width: 16.66666667%; }
 }
 
 /**
  * Megamenu auto width
  */
 @media only screen and (min-width: 959px) {
     .navigation li.megamenu-li.auto-mega .megamenu {
-        &.col-1 { width: 320px; }
-        &.col-2 { width: 440px; }
-        &.col-3 { width: 660px; }
-        &.col-4 { width: 780px; }
-        &.col-5 { width: 980px; }
-        &.col-6 { width: 1080px; }
+        &.owp-col-1 { width: 320px; }
+        &.owp-col-2 { width: 440px; }
+        &.owp-col-3 { width: 660px; }
+        &.owp-col-4 { width: 780px; }
+        &.owp-col-5 { width: 980px; }
+        &.owp-col-6 { width: 1080px; }
     }
 }
 
@@ -185,7 +185,7 @@
 @media only screen and (min-width: 768px) and (max-width: 1280px) { 
 
 	/* megamenu */
-	.navigation li.megamenu.auto-width.col-6 > .sub-menu {
+	.navigation li.megamenu.auto-width.owp-col-6 > .sub-menu {
 		width: 980px;
 	}
 

diff --git a/sass/components/header/_navigation.scss b/sass/components/header/_navigation.scss
@@ -7,6 +7,11 @@
 		list-style: none;
 		margin: 0;
 		padding: 0;
+		position: relative;
+		top: auto;
+		display: block;
+		border: 0;
+		background-color: transparent;
 
 		> li {
 			float: left;

diff --git a/sass/woo/_woocommerce.scss b/sass/woo/_woocommerce.scss
@@ -511,6 +511,7 @@
 	form {
 		.form-row {
 			padding: 3px 0;
+			display: block;
 			label {
 				display: inline-block;
 				margin: 0 0 5px;
@@ -1836,10 +1837,12 @@
 	.col-1 {
 		float: left;
 		width: 48%;
+		max-width: unset;
 	}
 	.col-2 {
 		float: right;
 		width: 48%;
+		max-width: unset;
 	}
 }
 @media only screen and(min-width: 481px) and(max-width: 768px) {