Skip to content

Commit

Permalink
fix welcome pages for 5.9 (BoldGrid#131)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesros161
jamesros161 authored Jan 11, 2022
1 parent 71703c9 commit 07c6bb1
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 58 deletions.
72 changes: 52 additions & 20 deletions css/pro-features.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,66 @@
width: 20px;
}

.welcome-panel-column .crio-welcome-button.button.button-hero {
.bgtfw-welcome-panel-column .crio-welcome-button.button.button-hero {
display: block;
text-align: center;
margin: 2em 0;
}
.welcome-panel-column-container .learning-item {
.bgtfw-welcome-panel-column-container .learning-item {
display: grid;
grid-template-columns: 79px 1fr;
grid-gap: 10px;
align-items: flex-start;
}

.welcome-panel-column-container .learning-item .learning-image {
.bgtfw-welcome-panel-column-container .learning-item .learning-image {
margin: 1.33em 0 0;
}

.welcome-panel {
.bgcrio-about-wrap .bgtfw-welcome-panel {
padding: 30px 10px;
}

.welcome-panel-content {
.bgcrio-about-wrap .bgtfw-welcome-panel {
position: relative;
overflow: auto;
margin: 16px 0;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
background: #fff;
font-size: 13px;
line-height: 1.7;
}

.bgcrio-about-wrap .bgtfw-welcome-panel h2 {
margin: 0;
font-size: 21px;
font-weight: 400;
line-height: 1.2;
}

.bgtfw-welcome-panel-content {
margin-right: 13px;
margin-left: 13px;
max-width: 1500px;
}

.welcome-panel-column-container .wrapper {
.bgtfw-welcome-panel-content {
margin-top: 1em;
}

.bgtfw-welcome-panel-column-container .wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
background-color: #fff;
}
.welcome-panel-column-container .wrapper p.box {
.bgtfw-welcome-panel-column-container .wrapper p.box {
margin-top: 0;
margin-left: 89px; /* 79px image grid width + 10px grid padding. */
}

.welcome-panel-column-container .box {
.bgtfw-welcome-panel-column-container .box {
border-radius: 5px;
padding: 0 20px;
}
Expand Down Expand Up @@ -71,16 +95,24 @@
margin-top: 0px;
}

.welcome-panel-column h2 {
text-align: left;
.bgtfw-welcome-panel-column h2 {
text-align: left;
margin: 0;
font-size: 21px;
font-weight: 400;
line-height: 1.2;
}

.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column {
float: left;
}

.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:first-of-type {
.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:first-of-type {
width: calc( 50% - 15px);
padding-right: 15px;
}

.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:nth-of-type(2) {
.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:nth-of-type(2) {
width: 50%;
}

Expand All @@ -92,7 +124,7 @@
text-align: left;
}

.bgcrio-about-wrap .four-col .welcome-panel-column {
.bgcrio-about-wrap .four-col .bgtfw-welcome-panel-column {
min-width: unset;
width: 21%;
padding: 2%;
Expand All @@ -105,7 +137,7 @@
display: inline-block;
}

.welcome-panel > .welcome-panel-content:not(:first-child) {
.bgtfw-welcome-panel > .bgtfw-welcome-panel-content:not(:first-child) {
margin-top: 15px;
}

Expand Down Expand Up @@ -302,11 +334,11 @@ p#boldgrid_api_key_notice_message {
}

@media only screen and (max-width: 782px) {
.bgcrio-about-wrap .four-col .welcome-panel-column {
.bgcrio-about-wrap .four-col .bgtfw-welcome-panel-column {
width: 46%;
}
div.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:first-of-type,
div.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:nth-of-type(2) {
div.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:first-of-type,
div.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:nth-of-type(2) {
width: 100%;
padding: inherit;
}
Expand All @@ -327,12 +359,12 @@ p#boldgrid_api_key_notice_message {
margin-top: 15px;
margin-bottom: -20px;
}
div.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:first-of-type,
div.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:nth-of-type(2) {
div.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:first-of-type,
div.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:nth-of-type(2) {
width: 100%;
padding: inherit;
}
.bgcrio-about-wrap .four-col .welcome-panel-column {
.bgcrio-about-wrap .four-col .bgtfw-welcome-panel-column {
width: 100%;
}
.bgcrio-about-wrap .four-col img {
Expand Down
74 changes: 53 additions & 21 deletions css/welcome.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,55 @@
width: 20px;
}

.welcome-panel-column .crio-welcome-button.button.button-hero {
.bgtfw-welcome-panel-column .crio-welcome-button.button.button-hero {
display: block;
text-align: center;
margin: 2em 0;
}
.welcome-panel-column-container .learning-item {
.bgtfw-welcome-panel-column-container .learning-item {
display: grid;
grid-template-columns: 79px 1fr;
grid-gap: 10px;
align-items: flex-start;
}

.welcome-panel-column-container .learning-item .learning-image {
.bgtfw-welcome-panel-column-container .learning-item .learning-image {
margin: 1.33em 0 0;
}

.welcome-panel {
.bgcrio-about-wrap .bgtfw-welcome-panel {
padding: 30px 10px;
}

.welcome-panel-content {
margin-right: 13px;
.bgcrio-about-wrap .bgtfw-welcome-panel h2 {
margin: 0;
font-size: 21px;
font-weight: 400;
line-height: 1.2;
}

.welcome-panel-column-container .wrapper {
.bgtfw-welcome-panel-content {
margin-right: 13px;
margin-left: 13px;
max-width: 1500px;
}

.bgtfw-welcome-panel-content {
margin-top: 1em;
}

.bgtfw-welcome-panel-column-container .wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
background-color: #fff;
}
.welcome-panel-column-container .wrapper p.box {
.bgtfw-welcome-panel-column-container .wrapper p.box {
margin-top: 0;
margin-left: 89px; /* 79px image grid width + 10px grid padding. */
}

.welcome-panel-column-container .box {
.bgtfw-welcome-panel-column-container .box {
border-radius: 5px;
padding: 0 20px;
}
Expand Down Expand Up @@ -71,16 +84,35 @@
margin-top: 0px;
}

.welcome-panel-column h2 {
text-align: left;
.bgcrio-about-wrap .bgtfw-welcome-panel {
position: relative;
overflow: auto;
margin: 16px 0;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
background: #fff;
font-size: 13px;
line-height: 1.7;
}

.bgtfw-welcome-panel-column h2 {
text-align: left;
margin: 0;
font-size: 21px;
font-weight: 400;
line-height: 1.2;
}

.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column {
float: left;
}

.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:first-of-type {
.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:first-of-type {
width: calc( 50% - 15px);
padding-right: 15px;
}

.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:nth-of-type(2) {
.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:nth-of-type(2) {
width: 50%;
}

Expand All @@ -92,7 +124,7 @@
text-align: left;
}

.bgcrio-about-wrap .four-col .welcome-panel-column {
.bgcrio-about-wrap .four-col .bgtfw-welcome-panel-column {
min-width: unset;
width: 21%;
padding: 2%;
Expand All @@ -105,7 +137,7 @@
display: inline-block;
}

.welcome-panel > .welcome-panel-content:not(:first-child) {
.bgtfw-welcome-panel > .bgtfw-welcome-panel-content:not(:first-child) {
margin-top: 15px;
}

Expand Down Expand Up @@ -152,11 +184,11 @@ p#boldgrid_api_key_notice_message {
}

@media only screen and (max-width: 782px) {
.bgcrio-about-wrap .four-col .welcome-panel-column {
.bgcrio-about-wrap .four-col .bgtfw-welcome-panel-column {
width: 46%;
}
div.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:first-of-type,
div.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:nth-of-type(2) {
div.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:first-of-type,
div.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:nth-of-type(2) {
width: 100%;
padding: inherit;
}
Expand All @@ -177,12 +209,12 @@ p#boldgrid_api_key_notice_message {
margin-top: 15px;
margin-bottom: -20px;
}
div.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:first-of-type,
div.bgcrio-about-wrap .welcome-panel .two-col .welcome-panel-column:nth-of-type(2) {
div.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:first-of-type,
div.bgcrio-about-wrap .bgtfw-welcome-panel .two-col .bgtfw-welcome-panel-column:nth-of-type(2) {
width: 100%;
padding: inherit;
}
.bgcrio-about-wrap .four-col .welcome-panel-column {
.bgcrio-about-wrap .four-col .bgtfw-welcome-panel-column {
width: 100%;
}
.bgcrio-about-wrap .four-col img {
Expand Down
4 changes: 2 additions & 2 deletions inc/boldgrid-theme-framework-config/config.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -499,8 +499,8 @@ function boldgrid_prime_framework_config( $config ) {
$config['customizer-options']['colors']['dark_text'] = '#333333';

// Button Classes
$config['components']['buttons']['variables']['button-primary-classes'] = '.btn, .btn-color-1';
$config['components']['buttons']['variables']['button-secondary-classes'] = '.btn, .btn-color-2';
$config['components']['buttons']['variables']['button-primary-classes'] = '.btn, .btn-color-1, .button-primary';
$config['components']['buttons']['variables']['button-secondary-classes'] = '.btn, .btn-color-2, .button-secondary';

// Set all pages to be in a container by default.
$config['customizer']['controls']['bgtfw_pages_container']['default'] = 'container';
Expand Down
30 changes: 15 additions & 15 deletions inc/partials/welcome.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@
</p>
</div>

<div class="welcome-panel">
<div class="welcome-panel-content">
<div class="welcome-panel-column-container two-col">
<div class="bgtfw-welcome-panel">
<div class="bgtfw-welcome-panel-content">
<div class="bgtfw-welcome-panel-column-container two-col">
<?php if ( get_option( 'fresh_site' ) ) : ?>
<div class="welcome-panel-column">
<div class="bgtfw-welcome-panel-column">
<h2><?php esc_html_e( 'Getting Started', 'bgtfw' ); ?></h2>
<p>
<?php echo wp_kses_post( __( 'Welcome to BoldGrid Crio! In order to give you a head start editing and designing, we have provided starter content for you to customize. You may edit any part of the content to suit your needs or delete content and pages you don\'t find valuable. Our starter content works best with the <a href="https://wordpress.org/plugins/post-and-page-builder/" target="_blank">Post and Page Builder</a> by <a href="https://www.boldgrid.com/" target="_blank">BoldGrid</a>.', 'bgtfw' ) ); ?>
Expand All @@ -66,27 +66,27 @@
</p>
<?php endif; ?>
</div>
<div class="welcome-panel-column">
<div class="bgtfw-welcome-panel-column">
<img style="width:100%;" src="<?php echo esc_url( get_template_directory_uri() ) . '/screenshot.jpg'; ?>" />
</div>
<?php else : ?>
<div class="welcome-panel-column">
<div class="bgtfw-welcome-panel-column">
<h2><?php esc_html_e( 'Crio - The Theme with More', 'bgtfw' ); ?></h2>
<p>
<?php echo wp_kses_post( __( 'Welcome to BoldGrid Crio! Crio means "I Create" in Portuguese and this is our aim: To give you the most powerful site creation tools you can use! Visit <a href="https://www.BoldGrid.com/" target="_blank">BoldGrid.com</a> to learn about all the resources we offer. Be sure to install the recommended Post and Page Builder. Crio\'s unique Customizer was designed to integrate with the <a href="https://www.boldgrid.com/wordpress-page-builder-by-boldgrid/" target="_blank">Post and Page Builder</a>, so you can easily use your fonts and colors from the visual editor.', 'bgtfw' ) ); ?>
</p>
</div>
<div class="welcome-panel-column">
<div class="bgtfw-welcome-panel-column">
<img style="width:100%;" src="<?php echo esc_url( get_template_directory_uri() ) . '/images/welcome/bg-crio-pro.png'; ?>" />
</div>
<?php endif; ?>
</div>
</div>
</div>

<div class="welcome-panel">
<div class="welcome-panel-content">
<div class="welcome-panel-column-container">
<div class="bgtfw-welcome-panel">
<div class="bgtfw-welcome-panel-content">
<div class="bgtfw-welcome-panel-column-container">
<h2><?php esc_html_e( 'Learning Resources', 'bgtfw' ); ?></h2>
<div class="wrapper">
<div class="box a">
Expand Down Expand Up @@ -136,17 +136,17 @@
</div>
</div>
<?php if ( ! class_exists( 'Crio_Premium' ) ) : ?>
<div class="welcome-panel">
<div class="welcome-panel-content">
<div class="welcome-panel-column-container two-col">
<div class="welcome-panel-column">
<div class="bgtfw-welcome-panel">
<div class="bgtfw-welcome-panel-content">
<div class="bgtfw-welcome-panel-column-container two-col">
<div class="bgtfw-welcome-panel-column">
<h2><?php esc_html_e( 'Go Pro', 'bgtfw' ); ?></h2>
<p><?php esc_html_e( 'Looking for more? Upgrade to Crio Pro today to get over 150 additional Customizer controls, including Custom Page Headers and White Labeling options. For only $3.25 a month (billed annually) you can design your site with professional level confidence.', 'bgtfw' ); ?></p>
<p>
<a href="https://boldgrid.com/wordpress-themes/crio/?utm_source=Appearance_-_Crio&utm_medium=Button&utm_campaign=Crio_FTP&utm_content=Get_Crio_Pro" target="_blank" class="button button-primary button-hero"><?php esc_html_e( 'Get Crio Pro', 'bgtfw' ); ?></a>
</p>
</div>
<div class="welcome-panel-column">
<div class="bgtfw-welcome-panel-column">
<img style="width:100%;" src="<?php echo esc_url( get_template_directory_uri() ) . '/images/welcome/custom-page-headers.png'; ?>" />
</div>
</div>
Expand Down

0 comments on commit 07c6bb1

Please sign in to comment.