Hi,
Please add this on your custom.css or Quick CSS
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 640px) {
/* Add your Mobile Styles here */
.template-page .entry-content h2, .av-special-heading h3 {
font-size: 15px;
}
}
Regards,
Ismael
Can I add content elements to the Avia layout builder?
In particular I need to use image_with_text_over title code
as in :
[image_with_text_over title=’BACKGROUND / HISTORY’ image_link=’http://nitzaflantz.com/wp-content/uploads/2013/07/02-history.jpg’]
What did I know about painting by then?
[button size=’tiny’ color=” background_color=” box_shadow=” font_size=” line_height=” font_style=” font_weight=” text=’MORE’ link=”http://nitzaflantz.com/background-history/”]
[/image_with_text_over]
Can I add content elements to the Avia layout builder?
In particular I need to use image_with_text_over title code
as in :
[image_with_text_over title=’BACKGROUND / HISTORY’ image_link=’http://nitzaflantz.com/wp-content/uploads/2013/07/02-history.jpg’]
What did I know about painting by then?
[button size=’tiny’ color=” background_color=” box_shadow=” font_size=” line_height=” font_style=” font_weight=” text=’MORE’ link=”http://nitzaflantz.com/background-history/”]
[/image_with_text_over]
Hi!
Please insert following code into the quick css field
.social_header .phone-info span{
font-size: 20px;
}
and change the font-size value.
Best regards,
Peter
Hi SGS_Marketing,
Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
.phone-info {
font-size: 14px;
}
Regards,
Devin
Hi,
Here is the snapshot of the page in question, http://www.clipular.com/c?13090040=Ny7LUHp01XCDd21TqFYCMjfLEEs&f=.png
It’s the third page on the Enfold admin vertical menu.
To control the font size you just need the very basic of basic css. However I will forward your request to Kriesi
body {
font: 15px/1.65em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
}
then drop it into Quick CSS on bottom of Enfold > (Theme Options) > Styling Layout … text are on bottom of the page… or into /css/custom.css
You can suggest anything you want on this thread which Kriesi has been using to make updates https://kriesi.at/support/topic/enfold-feature-requests
However if you want to do it yourself, you can always use Google Chrome dev tools, which are built into the browser to easily locate any css you want , then copy and paste it into Quick CSS , takes seconds and no need to know any coding.
Thanks,
Nick
Hi,
1. Please add this to /css/custom.css OR to Quick CSS
.flex_column .widget .widgettitle, .content .widget .widgettitle {
margin-bottom: 1em;
}
#top .widget ul {
list-style-type: none;
list-style-position: outside;
margin-left: 7px;
}
2. Here is the css that is used on the blue button on the page you linked to
.avia-button-wrap {
display: inline-block;
}
#top .main_color .avia-color-theme-color {
color: red; /*color of button text*/
}
body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);/*text shadow rgb, 0.1 transparent*/
}
.main_color .avia-color-theme-color{
background-color: #2D5C88; /*main button background color*/
border-color: #2D5C88;/*main button border color*/
}
.avia-button.avia-size-large { /*size, can change large to medium or small*/
padding: 13px 30px;
font-size: 14px;
min-width: 127px;
}
.avia-button.avia-position-left {/*position, can change left to right or center*/
float: left;
display: block;
}
body div .avia-button {
border-radius: 3px;
background-image: url("../images/layout/bg-button.png");
background-repeat: repeat-x;
background-position: 0 0;
padding: 10px;
font-size: 12px;
text-decoration: none;
display: inline-block;
border-style: solid;
border-width: 1px;
margin: 3px 0;
line-height: 1.2em;
position: relative;
font-weight: 600;
text-align: center;
max-width: 100%;
}
4) It’s a text font, so you would write it.( ♥ <— heart ) so just copy whatever you need to use by selecting it on a page and copy the glyph itself and paste it as you would paste any letter or word , and then style it with font size and color, etc..
Thanks,
Nick
Hey Guys,
I did a search and couldn’t find anything that directly related…
Is there a way to change the font size of the text within a blog post only? If I adjust the <p> font size it changes the font size in way more places than I’d like… hoping there is a way to target the blog post text only.
Thanks for your help!
Jon
Hi,
1) Insert following code into the quick css field
.post-entry .image-overlay {
display: none !important;
}
2) Use following css code
.entry-content .post-title {
font-size: 20px;
line-height: 1.3em;
}
3) Delete following code in footer.php
//display link to previeous and next portfolio entry
echo avia_post_nav();
Hi,
To clear things up, is this the font you’re trying to use?
http://www.google.com/fonts#UsePlace:use/Collection:Allura
Did you this bit of code on your header.php?
<link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
You should probably use:
h6.script_header {
font-family: 'Allura', cursive;
font-size:3.5em;
font-weight: 200 !important;
}
Regards,
Ismael
Hi, I’ve been reading along in these forums trying to find an answer that works to increase the size of my header font.
I added this code to custom CSS:
#menu-navigation li a {
text-transform: uppercase;
font-size: 25px;
}
But it hasn’t increased.
Help?
Nick, can you post an image of you theme panel? I’m just curious if I’m missing things, as there is not a single option that controls any sort of font size. One of the frustrating things with the admin panel for this theme….
Maybe if you just provided people with simple CSS breakdown of the headers and text, everyone would have an easy time.
Hey guys,
I’m not running compatibility mode in IE8, it’s simply how it is by default.
I went ahead with all of the custom css you recommended, Ismael (thanks for the help!). Some of it worked and some did not. Here are the remaining issues:
– Menu overlays logo
– Applying the img { max-height: 100% } broke my layer slider (images didn’t fit together anymore, things were off-center), so I didn’t use that
– The ‘You Might Also Like’ images on blog posts are stretched vertically
– The ‘Special Heading’ font is a bit too big/wide and makes several titles stretch into the sidebar, is there a way to reduce the size of these on IE 8 only?
– Most of the icons from the included icon font do not work and appear as 2 tiny rectangles
– My sidebar forms all seem to stretch off the page
– Images in the ‘Recent Posts’ widget only take up a portion of the image holder box
– Images on the ‘Meet the Team’ page go white/disappear on hover
– While there is now a hover effect on the buttons, I would prefer to use the gradients which were previously on the buttons. Is that possible? Or at least make it that way for non-IE8 browsers?
Thanks,
Tom
Thanks, Dude. You just gave me some energy back, as frustration had taken hold. Cheers! DT
Hi there,
Ive successfully implemented and using Bebas Neue on my website and it works on most browsers. Ive then attempted to use an additional google font (Allura) to do very occasional supplement titles. However, I just cant get it to work.
An example of it is in the parallax container on my home page (www.andypeck.co.uk) where ive added the words “A Bit on the side:”. Its fine on my Mac and laptop but it doesnt work on IOS or PC’s (chrome or Safari)
I gave it a class and called it up in the color container: thus…
<h6 class=”script_header” style=”text-align: left; margin-left: 150px; margin-top: -10px;”><span style=”color: #dcd6cb;”>A Bit on the side:</span></h6>
then in my CSS file I installed it thus:
@font-face {
font-family: ‘Allura-Regular’;
src: url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.oet’) format(‘truetype’),
src: url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.oet?#iefix’) format(’embedded-opentype’),
url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.woff’) format(‘truetype’),
url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.ttf’) format(‘truetype’),
url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.svg.svg#Allura-Regular’) format(‘svg’);
font-style: normal;
}
finally, I setup the parameters with the following:
h6.script_header {
font-family: Allura-Regular,Geneva,Arial,Helvetica,sans-serif !important;
font-size:3.5em;
font-weight: 200 !important;
}
Any suggestions as to why it wont work on PC & IOS? I’m guessing ive done something but I can’t see the wood for the trees.
Cheers as always
Andy
Hi!
You can change the font size with following code – insert it into the quick css field
.main_menu ul:first-child>li>a {
font-size: 16px;
}
Best regards,
Peter
Hi,
Please add this on your custom.css or Quick CSS to decrease the padding and the font size of the menu on iPad view:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 5px;
font-size: 11px;
}
.logo img {
padding: 30px 0;
width: 150px;
height: auto;
}
}
Regards,
Ismael
Can you please tell me how to adjust the size of the phone number in the Enfold Header?
Thanks
Just advising that I’ve solved the issue with the following tweaks.
I was able to identify the elements that needed tweaking:
1) Header block with logo and social/contact info above is now static and “sticky” by choosing Fixed heading in the theme settings. Following code was to fix.
#header {
position: fixed;
}
/* fix the height of the header block and lock it down */
#header_main .container {
height: 82px !important;
line-height: 82px !important;
}
2) Text colour was thru theme settings, but had to apply the following changes:
/* Social Icons & Contact
*/
/* put the icons on the right */
#top .social_bookmarks li {
float: right;
}
/* move the contact # left of the icons */
.sub_menu {
right: 70px;
}
.social_header .phone-info {
color: #5f5e5e!important;
font-size:1.2em;
font-weight:normal;
}
Thanks to the tips on the Avia Menu at https://kriesi.at/support/topic/avia-menu-repositioning#post-124971 I was able to place the menu block exactly where I wanted it, aligned to the bottom of the header block in line with the baseline of the logo. A few tweaks were needed to move the menu indicator as well through the .avia-menu-fx tag.
/* Main menu position
*/
.main_menu {
height:25px;
top:55px;
}
.main_menu ul li a {
height: auto !important;
line-height: 20px !important;
}
.main_menu ul:first-child > li > a {
padding:0 7px;
}
.main_menu .menu ul {
margin-top:8px;
}
.avia-menu-fx {
bottom: -8px;
}
Edit – screen shot of the result after the above tweaks.
Hey Ismael, thanks for the response.
I implemented the code you suggested, which did fix the blog previews and the buttons, although the menu issue did not change. Suggestions?
Also, I discovered a few more issues:
– The header logo is stretched vertically
– The ‘You Might Also Like’ images on blog posts are stretched vertically
– The ‘Special Heading’ font is a bit too big/wide and makes several titles stretch into the sidebar, is there a way to reduce the size of these on IE 8 only?
– Most of the icons from the included icon font do not work and appear as 2 tiny rectangles
– My sidebar forms all seem to stretch off the page
– Images in the ‘Recent Posts’ widget only take up a portion of the image holder box
– Links in the footer are randomly underlined and not underlined
– Images on the ‘Meet the Team’ page go white/disappear on hover
EDIT: Also, it seems that the buttons no longer have hover effects, in IE8 or Firefox/Chrome/Safari/etc. Is there a way to get those working again?
Hopefully all of these items are fixable, as a majority of my company uses IE8.
Thanks for your support,
Tom
Hi,
1.) To fix the buttons, use this on your custom.css or quick css, change the color value
.avia-button {
background: red !important;
}
2.) The menu padding and font size can be decrease on ie8.
.msie8 .main_menu ul:first-child > li > a {
font-size: 11px;
padding: 0 10px 0 10px;
}
3.) For the stretched image, try this:
.avia-content-slider .slide-image img {
width: 100%;
max-width: 100%;
}
Remove browser cache the reload the page.
Regards,
Ismael
Hi,
@mrkuji: Thanks for the tip. :)
@Sashmoolman: You can add this on your custom.cs or Quick CSS, for the menu:
.main_menu ul:first-child > li > a {
font-size: 20px;
}
this is for the headings, you can use this:
h1 {
font-size: 30px !important;
}
for h2
h2 {
font-size: 20px !important;
}
so on and so forth.
Regards,
Ismael
I have looked at page after page and thought I’d just reach out:
How to enlarge just the MENU FONT size in Enfold Theme?
By the way: terrific theme!
Thanks
you can do it in quick css like this:
/*top menu font & size*/
#top .main_menu .menu li > a {
width: 100%;
height: auto;
font-size: 20px;
font-weight: normal;
}
/*top submenu font & size*/
#top .main_menu .menu li ul a {
width: 100%;
height: auto;
font-size: 20px;
font-weight: normal;
}
or you can just install plugin : typography
and add elements for :
#top .main_menu .menu
select font and size etc
thanks and after I increase the font size, seems the problem solved.
Hi,
The menu and heading font sizes are a bit small so I am wanting to increase the size a bit. I have no idea how to code. So an easy answer would help tremendously.
Thanks,
Sash
1) Maybe you forgot to remove the http:// prefix? Make sure that the protocol is set to “mailto:”

2) Yes – insert following code into the quick css field and adjust the font size value
#top .social_bookmarks li a {
font-size: 30px;
}
3) You can use a plugin like http://wordpress.org/plugins/wp-google-fonts/ to install more fonts. However note that this can increase the page loading time and I’d recommend to stick with the default fonts (one font for headlines and one font for the body text).
4) Yes – Kriesi just hides it with css. Insert following code into the quick css field
@media only screen and (max-width: 767px){
.responsive #top #main .sidebar {
display: block !important;
border: none !important;
}
}
5) At the moment the layout builder is only bundled with the Enfold theme but we’ll release more themes in the future. Older themes (like Replete, Propulsion, Angular, Choices, Eunoia, etc.) come with a “Template Builder” which is similar to the layout builder.
Hi,
Please add the css below to the very bottom of your /css/custom.css file OR to Quick CSS located in Enfold > (Theme Options) > Layout styling at the page bottom.
1) Title of Post slider (current setting below. if font size becomes too big , adjust line height)
.avia-content-slider .slide-entry-title {
font-size: 14px;
line-height: 1.4em;
}
2) Overlays on hover for images (all set for you)
.avia-content-slider .image-overlay {
display:none !important;
}
.avia-content-slider .image-overlay:hover {
display:none !important;
}
.avia-content-slider .avia-font-entypo-fontello {
display: none;
}
3) Arrows (all set)
.avia-content-slider .avia-slideshow-arrows {
display: none !important;
}
4) Annoying vertical movement (all set but you may need to adjust the height based on your page specifics…)
.avia-content-slider .slide-entry {
height: 310px;
}
Thanks,
Nick
Hi,
1) You can use following code – insert it into the quick css field
.social_header .main_menu ul:first-child > li a {
font-size: 16px;
}
2) That’s imo not easily possible if you want a responsive website/menu. One solution would be to add a margin/padding to the link items or to increase the width of the main menu – however both solutions would break the responsive design.
3) You can use following code
.social_header .main_menu ul:first-child > li a {
letter-spacing: 0.2em;
}
1) Use following css code to change the bg color of the top navigation bar
.header_color .container_wrap_meta{
background: #f8f8f8;
}
2) For the link color use
.header_color .sub_menu>ul>li>a{
color: #f8f8f8;
}
3) That’s not possible. If the logo is transparent you’ll always see the bg color of the container behind the logo (eg by default white like here: http://kriesi.at/themes/enfold/homepage/home-v6-classic-4-column/ )
4) You can change the link bg color & the dropdown bg color with
.bottom_nav_header.social_header .main_menu ul:first-child > li a, #header_main_alternate, .bottom_nav_header.social_header .main_menu ul:first-child {
background: #f8f8f8;
}
5) Change the color with
.header_color .main_menu ul:first-child > li a:hover, .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{
color: #f8f8f8;
}
for the selected/active item and
.bottom_nav_header.social_header .main_menu ul:first-child > li a{
color: #f8f8f8;
}
for all other menu items.