Method Divi Child Theme

Header Style Customization

Logan has a ghost header style on specific pages. When using this style, you have 2 versions of the logo. A light or white logo used in the ghost style and the full color logo for the fixed menu.

Logo

Logo for Ghost Header – Set this logo in the Divi Theme Options

Logo for fixed menu – This has to be changed in the CSS.

The CSS Code can be copied and pasted to the Divi CSS box in the Customize or Divi Options section.

This is the code you need to change the white version of your logo that is placed over the hero image. Add your logo to the Media Library, then copy the url to the section of this code for background-image.

.hero-dark .logo_container a::before{
	content:"";
	background-image: url("https://your-logo-url.com");
	background-repeat: no-repeat;
	height:77px;
	display:inline-block;
	width:237px;
	background-size:100%;	
	position: relative;
        top: -35px;
}

Ghost Style for Pages

To create a new page with the Ghost style header, create your page and find the “Classes” box on the lower right side and enter “hero-dark” in the Body Class field.

 

Menu Hover & Current Menu

Code snippet to change the hover and current menu item color:

#et-top-navigation .current-menu-item a,.et_header_style_left #et-top-navigation nav>ul>li>a:hover,.et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a:hover,.hero-dark.et_header_style_left #et-top-navigation nav>ul>li>a:hover,.hero-dark.et_header_style_left .et-fixed-header#main-header #et-top-navigation nav>ul>li>a:hover,.page #top-menu ul.sub-menu li.current_page_item a,.et_header_style_left #et-top-navigation #top-menu li.current-menu-ancestor.current-menu-parent>a{
	background-color:#001022!important;
	color:#fff!important;
}

Telephone Number

Code snippet to change the telephone number background and hover color:

#et-info{
	background: #001022 !important; 
	color: #FDCF2F; 
	
}
#et-info:hover{
	background: #1276b1;
}

Contact Forms

Logan use the Caldera Forms plugin. The form export is included in your child theme package. If your form is missing after you have installed the theme and demo content, you can import the file.

To import the file:
1. Look for Caldera Forms from the links on the left side of the dashboard.
2. Select the “Import” button
3. Upload the contact form .json file the Exports folder in the child theme package.

To change the Submit button in Caldera, change the hex colors in the following code:

/* Caldera Forms  */
.caldera-grid .btn-default {
	color: #fff !important;
	background-color: #FDCF2F !important;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	padding-right: 30px;
	border: none !important;
	width: 100% !important;
	text-transform: uppercase;
	font-size: 18px;
}

/* Hover Colors */
.caldera-grid .btn-default:hover {
	background-color:  #001022 !important;
}

Modules

Portfolio

To change the border color and background color of the Portfolio Title:

/* Porftolio Title Background */
.method-portfolio .et_pb_portfolio_item h2 {
	border: 1px solid #FDCF2F;
}

Custom Tabs

To change the border color and background color of the Portfolio Title:

/* Change the Color of the Title Text */
.method-nav-tabs .et_pb_tabs_controls li a{
	color: #001022;
}

/* Change Color of the Triangle */
@media only screen and (min-width: 981px){
	.method-nav-tabs .et_pb_tab_active:after{
		color: #001022; 
	}
}

/*  Change the Active Tab Text Color */
.method-nav-tabs .et_pb_tabs_controls li.et_pb_tab_active a{
	color: #fff !important;
}

/* Change the Border Color of the Text Area */
.method-nav-tabs .et_pb_tab{
	border: 4px solid #d9d9d7;
}

Vertical Text

You may need to make adjustments to the large vertical text featured on the home page. To move the text to the right, lower the left value. Copy this code with your preferred value to the Divi CSS box.

/* Adjust the Position of the Large Vertical Text */
.vertical-text {
top: 50% !important;
left: -97% !important;
}