Tried to add font zip file from fontello.com
This is what I get:
Warning: simplexml_load_string() [function.simplexml-load-string]: Entity: line 1: parser error : Premature end of data in tag h1 line 1 in /home/chris231/public_html/wordpress/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/php/font-manager.class.php on line 177
Warning: simplexml_load_string() [function.simplexml-load-string]: <h1 style=’color:#497A97;font-size:12pt;font-weight:bold’>404 – Not Found in /home/chris231/public_html/wordpress/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/php/font-manager.class.php on line 177
Warning: simplexml_load_string() [function.simplexml-load-string]: ^ in /home/chris231/public_html/wordpress/wp-content/themes/enfold/config-templa
Hey!
Please add following code to Quick CSS as well and adjust as desired
.avia-button.avia-size-large { font-size: 16px; }
Regards,
Yigit
Hi MatHom!
You can add this on your custom.css or Quick CSS:
body, body p {
font-size: 15px;
}
Cheers!
Ismael
Hi glozemedia!
What button? There are various button elements on the theme. Is it the button shortcode? The contact form button? Can you please give us a link to the page with the button element? You can try this on your custom.css or Quick CSS:
.avia_iconbox_title {
font-size: 20px;
}
Best regards,
Ismael
Hi there!
I want to change the font size on my blog and have read in the forum that I can “edit css / base.css, find the #Typography section”.
Since I am new to wordpress I was not able to find the base.css file.
The Qick.css entry:
body {
font-size: 15px;
}
didn´t work for me
thanks
Matthias
Hey Delphiine!
Please add following code to Quick CSS in Enfold theme options under Styling tab
div .avia_message_box .avia_message_box_title { font-size: 16px; }
.avia_message_box_content { font-size: 18px; }
Best regards,
Yigit
Hey Justin!
1) I believe you mean size of main menu. If so, please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as desired
.main_menu ul:first-child > li > a { font-size: 18px; }
2) You can add it manually to header.php file. Can you post a screenshot?
3) Can you post the link to your website?
4) Please add following code to Quick CSS and adjust as desired as well
.social_header .phone-info { font-size: 18px; }
Cheers!
Yigit
Hi Kriesie & team,
I have a problem, and that is my Headings (h1) wont resize when you scale the browser window. It’s the same problem as https://kriesi.at/support/topic/schriftart-wird-auf-dem-mobile-verandert/ I tried placing the code provided in the comments in my quick css but it didnt work.
Please check these screenshots to see the problem…
This is the desktop version

This is the mobile version

And these are the codes i have in the quick css
@media only screen and (max-width: 480px) { .av-special-heading h1 { font-size: 30px!important; }}
}
@media only screen and (max-width: 480px) { .responsive .container { width: 300px; }}
}
@media only screen and (max-width: 480px) { .entry-content-wrapper .post-title { font-size: 30px!important; }}
}
h1 { font-size: 66px; }
Hi hi,
Untill now I have been working locally, and today I have just moved the website for testing. You can check it.
http://14.192.65.20/~mymakna/test/home-3/
There are few sections that I will need help for. I would be very grateful if you find time to consider them.
1. Transfer problems with the images links: After I have transferred the website from localhost to the live page, I have used SQL update to change the links from localhost/wordpress to http://14.192.65.20/~mymakna/. Anyhow some of the pictures are displayed some are still keeping the old link. Can u pls tell me what might be the problem?
2.IE Issues:
-The font is different
– All the objects(buttons, pictures)who are suppose to have round squares are displayed as boxes.
– The width of the whole website is smaller
– The background picture of the buttons Volunteer and Donate is not displayed in full size. Mozila doesnt show them properly as well.
3. Chrome: Social bookmarks icons which are part of the header are not displayed on Chrome, even though I can see them in the code.
Thank you a lot for your help. Highly appreciated.
Hey theworldawaits!
Please try to add an important tag to your css code
p.verse { font-size: 9px !important; }
There’s no general tooltip feature at the moment but you can use the “icon” shortcode which supports a tooltip Enfold v2.4.1. Another solution would be the html5 abbr tag: http://www.w3schools.com/tags/tag_abbr.asp which can be used for a small tooltip box.
Best regards,
Peter
I’m wondering if you could help me with the button shortcode. I need to make it responsive.
As you can see in the screenshots below, I’ve added the large button shortcode, inside of a text widget, in the sidebar of the product page. I’ve increased the size of the button with:
.avia-button.avia-size-large {
padding: 13px 30px;
font-size: 16px;
min-width: 760px;
}
and styled it with:
#top #main .single-product-main-image .sidebar, #top #main .single-product-main-image .inner_sidebar {
border: 1px;
margin: 0;
padding: 0px 0 0 0;
width: 100%;
min-height: 0;
}
body div .avia-button {
border-radius: 3px;
padding: 10px;
font-size: 12px;
text-decoration: none;
display: inline-block;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-top-style: solid;
border-top-width: 1px;
margin: 0px 0;
line-height: 1.2em;
position: relative;
font-weight: normal;
text-align: center;
max-width: 100%;
}
Desktop View
https://dl.dropboxusercontent.com/u/17031532/live-view-button-desktop.png
Tablet Portrait View
https://dl.dropboxusercontent.com/u/17031532/live-view-button-tablet-portrait.png
Phone Portrait View
https://dl.dropboxusercontent.com/u/17031532/live-view-button-phone-portrait.png
I’ll send info in a private message.
Thanks,
Ben
I have a couple of questions about the enfold theme custom styling, I hope you can help me.
1. I would like to change the main menu hover color (and also when the menu item is selected) to a specific color. (#f0fffb). I also want the menu font color to be white, I managed to that with .header_color .main_menu #avia-menu > li > a { color: #FFFFFF; }
2. I would like to increase the font size of the whole theme by 2 pixels. I increased the body font size, but I just can’t figure out how to change the heading font sizes.
3. I would like to completely remove all borders from the theme.
Thank you in advance! You can check the site I’m working on at http://kaitravel.is/?page_id=734
Daniel
Hi Ishmael,
thanks! The code doesn’t seem to be populating a color bg to the button. what am I doing wrong? here’s the code i modified:
[av_button label='Click me' link='https://remote.decadesgroup.com/Remote/logon?ReturnUrl=%2fremote' link_target='_new' color='theme-color' custom_bg='#0087c5' custom_font='#000000' size='small' position='left' icon_select='yes']
Here’s how it looks (see footer, under Employees Only)
Hey mgma!
Please add following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (max-width: 480px) {
.main_color #js_sort_items { font-size: 16px; }}
Regards,
Yigit
Hi!
You can adjust the left and right padding then decrease the font-size:
.main_menu ul:first-child > li > a {
padding: 0 8px !important;
font-size: 12px;
}
Regards,
Ismael
Hi ksiarza!
Use the Text widget then copy the button shortcode.
[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='']
Regards,
Ismael
Hey there,
I am trying to adjust some text on my site. It’s a simple enough task, but I can’t seem to figure it out within Enfold. Basically I have some text that I would like to be smaller than normal paragraph text.
I created a class in the custom styling
p.verse { font-size: 9px; }
And in the text-box I called the class
<p class="verse">This should be smaller</p>
However, the text remains the same.
I also noticed that Enfold has tooltip functionality. Is there a way to implement this within text? For example, if there is text that says “Genesis 1:1” it would show a box on rollover saying “In the beginning, God created the heavens and the earth.”.
Thanks so much!
Jason
Hey!
Can you please give the text block a unique css selector?
<span style="color: #000000;">Breathe Cleaner Air in Your Home</span>
Replace it with:
<span style="color: #000000;" class="text-breathe">Breathe Cleaner Air in Your Home</span>
You can now use media query to change text size on different screens:
@media only screen and (max-width: 767px){
.text-breathe { font-size: 12px; }
}
@media only screen and (min-width: 768px) and (max-width: 989px) {
.text-breathe { font-size: 16px; }
}
Cheers!
Ismael
This reply has been marked as private.
Hi finessecreative!
Please add following code to Quick CSS as well
@media only screen and (max-width: 480px) { .social_header .phone-info { top: 99px; font-size: 18px; left: 10px; }}
Best regards,
Yigit
I’m referring to the slider area where it says “Breathe Cleaner Air in Your Home”. I’m trying to have it re sized automatically from that large font to a smaller font as it goes from tablet to mobile. I see the theme does it for some h1 tags if the font size is not altered.
Hey!
1) Please add following code to Quick CSS in Enfold theme options under Styling tab
.title_container .breadcrumb { display: none; }
2) Can you elaborate? How you would like to style them?
3) You can add following code to Quick CSS and adjust as desired
#header .mega_menu_title, #header .mega_menu_title a { font-size: 20px; color: red; }
4) You can add following code as well and adjust it to center your menu
.main_menu { right: 30%; }
Best regards,
Yigit
Hi glozemedia!
Do you want to re-size the phone number at the top? If yes use following code
@media only screen and (max-width: 767px){
#top .phone-info.with_nav span a{ font-size: 10px !important; }
}
Phones and mobile devices with small screens (767px width or lower) will change the font size to 10px. You can change the font size and/or max-width value if my code doesn’t give you good results.
Best regards,
Peter
Hey sschiller!
Can you please give us a link to the website? What type of header style do you have right now? 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 7px;
font-size: 11px;
}
}
Best regards,
Ismael
Hey krear!
You can add this on your custom.css or Quick CSS:
sup {
font-size: .6em;
position: relative;
top: -5px;
}
sub {
font-size: .6em;
position: relative;
bottom: -1px;
}
Best regards,
Ismael
Hey!
Add this code to the Quick CSS:
.avia-button.avia-icon_select-yes.avia-color-green.avia-size-large.avia-position-right {
background: #349acd;
border: 0 !important;
}
.av_promobox h2 {
color: #349acd;
text-transform: none !important;
letter-spacing: 0px !important;
font-size: 24px;
margin-bottom: 0;
}
.av_promobox p{
margin-top: 0;
margin-bottom: 5px;
}
.av_promobox {
background: #fff !important;
padding: 15px;
border: 10px solid #f2f2f2 !important;
}
Result:

Cheers!
Josue
Hi!
I have some text than need <sup> and other <sub>
In edit mode this show ok! but when you go online is not working!
I add some css in theme options for try and don’t work too!
.sup {
font-size:xx-small;
vertical-align:top;
}
How can I fix this!?
Thank you so much!
Pablo
I don’t have a solution to your problem but have to say you’ve created a very nice site ;-) – the only problem ist the font on the homepage, which you used for the citation. If you resize the window to mobile-phone size the text becomes unreadable…
Hi Yigit,
That only moved the position of the smiley, it’s still “floating” on top of the text which doesn’t work since if you resize the window it ends up in the wrong place (in the line of text that is).
Is it possible to make it into some kind of “inline element” with the text? (I’m not a web programmer so my language and terms might be totally wrong but I hope you understand what I mean)
Cheers,
Peter
Hi!
You can use this media query to target resolutions between 768px to 989px. Example is for the social icons below.
@media only screen and (min-width: 768px) and (max-width: 989px) {
.iconbox_content_container h3 {
font-size: 15px;
}
}
There is something wrong with the markup. Why do you need to separate these two?
<h3>LIKE TANYA</h3><h3>ON FACEBOOK</h3>
It should be
<h3>LIKE TANYA ON FACEBOOK</h3>
Best regards,
Ismael