Hi Rikard,

it’s a general question. I don’t get how I should style my own custom icon box.
For example:

The headline in my custom icon box should be:
text-transform: uppercase;
font-weight: 600;
line-height: 40px;
font-size: 30px;
text-align: center;

The text inside the custom icon box should be:
text-transform: none;
font-weight: 400;
line-height: 22px;
font-size: 18px;
text-align: left;

How should I start building my own css class in this case? I just can define ONE custom css class from within the pagebuilder so I don’t know how to combine to different classes into one.

Thanks in advance
Bastian

OK FOUND IT!!! I really like to thank you work on other messages, because I needed to check a lot of messages to get full answer. so many parts in different messages.
So if any one wants to build a menu like this :

code is here :

/*Add your own styles here:*/
.header_color .sub_menu > ul > li > a, .header_color .sub_menu > div > ul > li > a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
    color: #888888;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}
.avia-menu-fx {
opacity: 1;
visibility: visible;
}
#menu-item-3230 .avia-menu-fx {
background-color: green;
}
#menu-item-3231 .avia-menu-fx {
background-color: blue;
}
#menu-item-3232 .avia-menu-fx {
background-color: orange;
}
#menu-item-3233 .avia-menu-fx {
background-color: red;
}

#menu-item-3230:hover .avia-menu-fx {
background-color: #ffffff;
}
#menu-item-3231:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3232:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3233:hover .avia-menu-fx {
background-color: #ffffff;
}

.av-main-nav > li > a {
border-left: 1px solid #444444;
}

.av-main-nav> li:last-of-type  > a {
padding-right: 13px !important;
border-right: 1px solid #444444;
}

.html_header_searchicon_disabled #top .main_menu .menu>li:last-child>a .avia-menu-fx {
left: 0!important;
}

You can close, except if you think my code can be improved. Thanks a lot for your support section, was 3 weeks I was working on that….

OK, I think I’m finally finding the real problem.
It concerns the avia-menu-fx.
Used with the search icon, it works well.
But when I disable the search icon, there is a alignment problem. You can see it there:

this is my code now:

/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

/*Add your own styles here:*/
.header_color .sub_menu > ul > li > a, .header_color .sub_menu > div > ul > li > a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
    color: #888888;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}
.avia-menu-fx {
opacity: 1;
visibility: visible;
}
#menu-item-3230 .avia-menu-fx {
background-color: green;
}
#menu-item-3231 .avia-menu-fx {
background-color: blue;
}
#menu-item-3232 .avia-menu-fx {
background-color: orange;
}
#menu-item-3233 .avia-menu-fx {
background-color: red;
}

#menu-item-3230:hover .avia-menu-fx {
background-color: #ffffff;
}
#menu-item-3231:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3232:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3233:hover .avia-menu-fx {
background-color: #ffffff;
}

.av-main-nav > li > a {
border-left: 1px solid #444444;
}

.av-main-nav> li:last-of-type  > a {
padding-right: 15px !important;
border-right: 1px solid #444444;
}

sorry for the big number of messages. I want to do it by myself, but always encountering new problems.

Ok I’ve been a little further on the code. But something goes weird and I don’t know why. Just looking the menu, you will see I have a problem on the right….
Here is the code :

/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

/*Add your own styles here:*/
.header_color .sub_menu > ul > li > a, .header_color .sub_menu > div > ul > li > a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
    color: #888888;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}
.avia-menu-fx {
opacity: 1;
visibility: visible;
}
#menu-item-3230 .avia-menu-fx {
background-color: green;
}
#menu-item-3231 .avia-menu-fx {
background-color: blue;
}
#menu-item-3232 .avia-menu-fx {
background-color: orange;
}
#menu-item-3233 .avia-menu-fx {
background-color: red;
}

#menu-item-3230:hover .avia-menu-fx {
background-color: #ffffff;
}
#menu-item-3231:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3232:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3233:hover .avia-menu-fx {
background-color: #ffffff;
}

.av-main-nav > li > a {
border-left: 1px solid #444444;
}

.av-main-nav> li:last-of-type  > a {
border-right: 1px solid #444444;
}

Can you explain to me what thing I am using wrong? looks like avia menu fx and av-main-nav are not centered just for the last Item. I don’t know how to solve this.

Yes. If I paste the form code into a regular text block in the text tab and hit save it doesn’t ever close out that popup window like it would with regular text. But its working fine with regular text…?

Here’s a stripped down portion of my code if that helps :

<form id="form" action="http://url.com...." method="post" class="useFormBg">

<input type="hidden" value="POST" name="PostForm">                                                
		<fieldset>
			<legend>For more information, please fill out the form below:</legend>
			<ul id="crmform">
				<li>
					<label for="First Name">First Name<font color="red">*</font></label>
					<input class="validate[required]" type="text" name="firstName" id="firstName" value="" size="30" />
				</li>
				<li>
					<label for="Last Name">Last Name<font color="red">*</font></label>
					<input class="validate[required]" type="text" name="lastName" id="lastName" value="" size="30" />
				</li>
				<li>
					<label for="Date of Birth">Date of Birth<font color="red">*</font></label>
					<input class="validate[required,custom[date]]" type="text" name="Dob" id="child1Dob" value="" size="30" />
					<script>
						$(function() {
							$( "#child1Dob" ).datepicker();
						});
					</script>
				</li>
			</ul>
		</fieldset>
	<button type="submit" class="submit" >Send</button>
</form>

Thanks for your help!

hey Elliot!

yes, I mean default font size ‘body’ in the text block. I suppose you mean something else because you code snippet doesnt work.

This is the text I’m referring to http://imgur.com/op8zVBr (page http://www.soapmarine.com/jpgoffin/services/)

thank you!