Hi Andy,
You could try using the ‘special heading’ shortcode and style it the way you want with CSS:
.av-special-heading-h3{
background: blue;
font-size: 3.5em;
color: white;
padding-top: 20px;
padding-bottom: 0;
}
.av-special-heading-h3 h3{
font-size: inherit !important;
color: inherit !important;
}
.av-special-heading-h3 .special-heading-border{
display: none;
}
I tested locally and achieved something like this:

Regards,
Josue
Hi there,
Ive successfully created font changes by using a p.tag but im struggling to make a class work within the page builder shortcode like the colour section.
I want to create a dedicated 50px height header for all my pages (not home) with a blue background, 20px padding at the top and to have my font size to be 3.5em. The font is Bebas Neue which ive already installed and had working.
Ive tried all sorts to get this working but it just gets ignored and nothing happens. Any example to show me how i should be setting up a class for your shortcodes in the builder would be helpful
cheers
Andy
Hi,
You can find Enfold.pot file in Enfold > Lang folder. As i remember you are using Enfold in Chinese without an issue, you only had to increase font size in some sections and that’s all
Regards,
Yigit
Thanks, that did it. I appreciate your help.
Chris
Hi,
Please add following code to Quick CSS that is in Enfold theme options under Styling
@media only screen (max-width: 480px) { .social_header .phone-info span { font-size: 14px!important; } }
Until 480px it looks fine so this will switch text and phone numbers font size to 14 when displayed on screens smaller than 480px.
Regards,
Yigit
Hi Chris,
Please replace previous CSS code with following one
.header_color .main_menu ul:first-child > li > a { font-family: "freight-sans-pro", sans-serif; font-size: 18px!important; font-weight: 300!important; color: red!important; font-style: normal!important; }
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, .header_color .main_menu ul:first-child > li.active-parent-item > a, #top .header_color .main_menu .menu ul .current-menu-item > a { color: pink!important; }
ul.sub-menu { font-family: "freight-sans-pro", sans-serif; font-weight: 300!important; color: red!important; font-style: normal!important; }
#top .main_menu .menu li>a { color: red; font-family: "freight-sans-pro", sans-serif; font-weight: 300!important; font-style: normal!important; }
#top .header_color .main_menu .menu ul li>a:hover { color: green; }
#top #menu-item-search.menu-item-search-dropdown>a { font-family: 'entypo-fontello' !important; }
You just need to change color hex values.
This code will increase padding under social only on screens smaller than 767px
@media only screen and (max-width: 767px) { .responsive #header .social_bookmarks { padding-bottom: 20px!important; } }
Regards,
Yigit
Hi,
Please add following code to Quick CSS in Enfold theme options under Styling
div.entry-content { font-size: 18px!important; }
Regards,
Yigit
How can I change the paragraph or text font size for post?
Hi guys, sorry about so many posts. On the top menu I just applied a span class to that to change the font. In responsive though and I noticed in demo also that the social icons stack right on top of the phone number and links. What code do I edit to add some padding in responsive mode between social icons and phone number / link area in top header?
Thanks much,
Chris
Hi also, what css do I use to change font in fixed header with social icons and additional navigation. The above worked for the main menu but not the subpages or the top menu navigation. I appreciate your help.
Thanks much,
Chris
Thanks Yigit, that code worked for parent page but not subpages. What do I edit for the subpages to have same settings?
Thanks much,
Chris
Hi Chris,
Please try adding following code to Custom CSS in theme options under Styling
.header_color .main_menu ul:first-child > li > a { font-family: "freight-sans-pro", sans-serif; font-size: 18px!important; font-weight: 300!important; color: #333!important; font-style: normal!important; }
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: #6ab165!important; }
Regards,
Yigit
Hi,
Yes and this is the shortcode you should add in content section of tab
[av_video src='https://www.youtube.com/watch?v=R6-8DwT6_xg' format='16-9' width='16' height='9']
[av_dropcap1]H[/av_dropcap1]ello
[av_font_icon color="" icon="2" size="40px" position="left" link="" linktarget="no"]
You can switch to Default Editor and add shortcodes then copy and paste them in your tab content
Regards,
Yigit
Hi,
Please add following code to custom.css file or into Quick CSS section in Enfold theme options page under Styling
.avia-icon-list .iconlist_title { font-size: 20px; }
.main_color .iconlist_content { font-size: 14px; }
.avia-icon-list li { padding: 0 0 10px 0; }
Regards,
Yigit
It would be nice if there was some additional flexibility in choosing the Font, Font Family, Weight, Size, etc, for the various headings. For example, I would like to set my H1 font to use a certain font size and weight. Same for H2, H3, body, etc. Some themes have this as part of the Admin area. Sure, it could be done in the css file, but seems like it should be part of the theme settings. It would be nice to be able to select different font styles for certain elements, like the new Content Slider. How about a new element that let’s you set text to any font and any style. Thanks.
Hey,
You can add this on your custom.css or Quick CSS:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 8px;
font-size: 12px;
}
.logo.bg-logo {
width: 200px;
margin-top: 20px;
}
}
You can adjust the size of the logo.
Regards,
Ismael
You’ve added some media queries at the end of the theme’s layout.css. This block specifically is changing the menu at min-width: 1650px:
.main_menu ul:first-child > li > a{
display:block;
text-decoration: none;
padding: 0 0px 0px 41px;
font-weight: normal;
font-size:12px;
font-weight: 600;
font-size: 13px;
background-image: url('http://uprisetestdomain.co.uk/paramount/wp-content/uploads/2013/06/bullet.png');
background-repeat: no-repeat;
background-position: 18px 12px;
}
Its very bad practice to modify the theme’s css files directly. Instead you should only edit the custom.css file or add your css into the Quick CSS field in the theme’s Styling tab.
Hi,
thanks to all your kind help for http://www.musikzentrale.net, so i could figure out different settings to get the responsive design working.
But all of a sudden, the responsive menu is gone and i do not have a glue, why? where?
Here are my settings from custom.css:
/* Add your Mobile Styles here */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 6px;
font-size: 11px;
}
.main_menu {
margin-right: -50px;
}
.logo img {
width: 120px;
padding-top: 0px
}
@media only screen and (min-width: 768px) and (max-width: 989px) {
#menu-item-1357 > .avia_mega_div {
width: 700px;
}
#header .avia_mega_div{
left: -150px;
}
Thanks for helping me out … again ;-)
Regards, Sebastian.
Hi,
You can’t use the Advance Layout Editor and the Default Editor simultaneously. You need to pick which one you want to use. Although, you can switch the Advance Layout Editor to debug mode. The actual shortcode will be rendered below the Advance Layout Editor.
To switch your theme to debug mode. Edit function.php, find this code:
if(isset($avia_config['use_child_theme_functions_only'])) return;
Below, add this code:
//set builder mode to debug
add_action('avia_builder_mode', "builder_set_debug");
function builder_set_debug()
{
return "debug";
}
You will be able to see the actual shortcode below the builder. Shortcodes can be combine then, like this example. A combination of Promobox shortcode plus the Button shortcode:
[av_promobox button='yes' label='Click me' link='single' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='no' icon='25']
Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!
[av_button label='Click me' link='' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='small' position='center' icon_select='yes' icon='25']
[/av_promobox]
Regards,
Ismael
Hi Marssolutions,
You can add in a shortcode for a button at a layer. Just add the shortcode data directly into the Div/video field. Eg:
[av_button label='Click me' link='manually,http://google.com' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='small' position='center' icon_select='no' icon='25']
Regards,
Devin
Thank you, Yigit! It works! :)
Ich habe auf http://www.marcobehrens.com/home ein Layer Slider mit Kontakt Form erstellt.
Das Formular ist so aufgebaut:
“<font color=”white”><span style=”font-size:0.5em”>Deine E-M@il-Adresse*</span>
[email* your-email][submit “Ketten sprengen!”]”
Warum ist im Layer Slider der “Ketten sprengen!” Button NICHT rechts neben dem E-Mail Feld SONDERN unter ihm?
Hi,
Please try adding following code to Quick CSS in Enfold theme options
html[lang="zh-hans"] #socket .sub_menu_socket { font-size: 21px }
Regards,
Yigit
Thank you, Josue. It works! :)
Sorry I forgot to ask about the footer menu. It, too, is very small. How can I change the footer font size?
Hey,
You can add a unique selector for each Avia Elements. Edit functions.php, find this code:
if(isset($avia_config['use_child_theme_functions_only'])) return;
Below, add this code:
add_theme_support('avia_template_builder_custom_css');
Edit any avia elements like Text Block then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “awesome-textblock”.
You can use something like this on your custom.css or Quick CSS:
.avia_textblock.awesome-textblock p {
background: blue;
padding: 10px;
font-size: 20px;
}
Regards,
Ismael
Hi Ismael,
This helps, but I only want it for certain textblocks. For example I’ll need multiple text blocks on a single page, but they’ll need to be different in size..
Is there an ID that I can assign?
How would the CSS look for that?
Thanks Ismael!
Hey,
You can add this on your custom.css or Quick CSS to change the font size of the Text Block element:
.avia_textblock p {
font-size: 20px;
}
Regards,
Ismael