I created a gallery from media elements, and i choose to show the caption only on mouse over.
How can i change that caption’s font size and make it align in the center of the frame?
Don’t know what happened but some styles or something has changed. There are no more icons in the icon lists and the font size/type has changed. I replaced style.css with no affect. Check out http://www.collabora365.com/unlimited-windows-web-hosting. The left side is an icon list and hopefully you can see that the font is not quite right. All pages are like this; the proper elements in avia builder are still there.
Any ideas on what can cause this?
Thanks
Dean
Hi,
Unfortunately they will go back to a default setting, most likely larger than your current setting. But you could try removing the advanced styling setting and add the following to Quick CSS to see if the settings for Special Headings will override it:
h1 {
font-size:20px;
}
Regards,
Rikard
UPDATE: found this thread but the solution didn´t work for me.
There´s something weird happening. It appears that my site it´s not loading the css changes I´ve made recently. I moved my site from a shared hosting to my own cloud server, I don´t know if there could be a problem related to this. This is my style.css form the child theme:
/*
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
*/
/* Every screen resolution*/
.single-post #menu-item-517, .single-post #menu-item-520, .single-post #menu-item-521, .single-post #menu-item-622, .single-post #menu-item-519, .single-post #menu-item-680 {
display: none!important;
}
.page-id-571 #menu-item-517, .page-id-571 #menu-item-520, .page-id-571 #menu-item-521, .page-id-571 #menu-item-622, .page-id-571 #menu-item-519 {
display: none;
}
.post-entry .big-preview{
display: none !important;
}
li.avia-pricing-row small, .pricing-table li.avia-pricing-row {
font-size: 40px;
}
.main_color .pricing-table.avia-highlight-col li.avia-heading-row, .main_color .pricing-table.avia-highlight-col li.avia-heading-row .pricing-extra { background-color: rgb(6, 93, 178); color: #ffffff; border-color: rgb(6, 93, 178); }
.main_color .pricing-table.avia-highlight-col li.avia-pricing-row { background-color: rgb(0, 110, 255);
color: #ffffff;
border-color: rgb(0, 110, 255); }
#menu-item-search {
display:none;
}
/* END OF every screen resolution*/
/*Big screens*/
@media only screen and (min-width: 1341px) {
div#mobilesld {
display: none;
}
}
/*END OF Big screens*/
/*Ipad y Tablets*/
@media only screen and (max-width: 1340px) and (min-width: 769px) {
.single-post .sidebar, .page-id-571 .sidebar {
width: 30% !important;
}
.single-post .content, .single-post #top .fullwidth .template-blog.content, .page-id-571 .content, .page-id-571 #top .fullwidth .template-blog.content {
width: 70% !important;
}
div#websld {
display: none;
}
.pricing-table>li {
font-size: 12px;
}
.responsive #scroll-top-link {
display: block!important;
}
.iconbox .iconbox_content .iconbox_content_title {
font-size: 14px!important; overflow: visible!important;
}
#top .iconbox_left_content .iconbox_icon, #top .iconbox_right_content .iconbox_icon {
height: 40px;width: 40px;line-height:40px;
}
#top .iconbox_content p{
font-size: 12px;
}
li.avia-pricing-row small, .pricing-table li.avia-pricing-row {
font-size: 30px;
}
}
/*END OF Ipad y Tablets*/
/*smartphones*/
@media only screen and (max-width: 768px) {
.single-post .content, .single-post #top .fullwidth .template-blog.content, .page-id-571 .content, .page-id-571 #top .fullwidth .template-blog.content {
width: 100% !important;
}
div#testimonials {
display: none;
}
li.avia-pricing-row small, .pricing-table li.avia-pricing-row {
font-size: 25px;
}
.iconbox .iconbox_content .iconbox_content_title {
font-size: 11px!important; overflow: visible!important;
}
.blogface .image-overlay {
background: #d82028!important
}
.blogface .image-overlay .image-overlay-inside {
display: none!important
}
.blog-categories.minor-meta, .text-sep.text-sep-cat, .blog-author.minor-meta {
display: none!important;
}
}
/*END OF para smartphones*/
I’m trying to change the font size of the mega menu drop down. None of the enfold font settings seem to be able to change it (and I wonder why you don’t offer that option in the font size settings?). Using Firebug I have been able to find the CSS elements that seem to control the font size. I can change the font size in firebug and the drop down menu font size changes. But when I paste that same code into the Quick CSS editor, it does nothing.
Here is the code I’m using:
#top #header .mega_menu_title a {
font-size: 20px !important;
font-weight: 400;
}
-
This topic was modified 10 years, 7 months ago by
mikehartrich.
Okay, thank you. I also wanted to mention that the fix for #1 does not work.
1. Change the width of the underline that appears under the main menu item? I realize it adjusts to the font size of the menu item, but I suspect there is padding on the sides and this is what I want to reduce. The solution you all gave me does change the width between the menu items but the underline just gets bigger to go with the wider space.
The solution you all proposed –
.av-main-nav > li > a {
padding: 0px 10px !important;
}
Hi lauriekorchinsky!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.av_one_half .av-countdown-time-label {
font-size: 11px;
}
Best regards,
Yigit
Hi studioinktvis!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.sidebar h3 {
font-size: 14px;
text-transform: uppercase;
}
.widget.widget_mgwoocommercebrands {
padding-top: 0;
}
Cheers!
Yigit
Hi,
It seems to only do that on smaller screens just before the mobile menu is activated, I think you will have to reduce the font size of the main menu or the sub items if you want to get rid of it. You can also activate the mobile menu at an earlier point, you can use the following to achieve that:
@media only screen and (max-width: 1024px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}
Edit the value 1024 to the pixel value you would like the mobile menu to activate.
Best regards,
Rikard
Hi,
Not sure what mistake you made, it’s difficult to say without seeing what you did. For the styling please try the following in Quick CSS:
#headertextlogo {
float: left;
margin-top: 45px;
font-size: 14px;
color: #2ea3f2;
font-family: 'Open Sans';
font-weight: normal;
}
Regards,
Rikard
I am using the blog widget to show all posts in a particular category (the MEMBERS). It’s also pulling in a PAGE that has the word “Members” in the name and slug. Maybe there is a coding error and the widget is not checking if things are posts or pages? Will this bug be fixed soon (we are launching in 2 weeks)? Is there an easy workaround for it? I don’t want to have to create a child theme and change code.
I also want to customize the display more than the blog widget allows me to. For example to remove the metadata for comments and date and have the excerpt move up into that space, change the font size, and display the posts alphabetically by title on just that specific page. How can I do this?
-
This topic was modified 10 years, 7 months ago by
mikehartrich.
Hey!
Use this:
#top .avia-caption-content {
font-size: 46px !important;
margin: 0 auto;
text-align: left;
}
@media only screen and (min-width: 767px) {
#top .avia-caption-content {
position: absolute;
top: -40px;
left: -35px;
right: 0;
}
}
.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title,
.avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
background: #000;
background: rgba(0, 0, 0, 0.2);
}
Regards,
Josue
OK I fixed it…
THX for help.
I added
body {
font-size: 14px;
}
.main_menu ul:first-child>li>a {
font-size: 14px;
}
to the custom.css file. logosize also fixed!
bye
wolkenlos
-
This reply was modified 10 years, 7 months ago by
wolkenlos.
Hi,
I have the following problems that I can’t sort out on my own – please see my site.
1. A grey line appears between the logo and the menu. How can I remove it?
2. A grey line appears between the logo and the menu. How can I move the menu to appear above this line?
3. When I scroll down, the logo shrinks, but half of it dissapears, how do I fix this?
4. When I change the font size of the content, the size of the social icons on the top bar menu also increase, how can I stop this from happening? They look huge now!
Kind regards,
John
Hi Kresei support!
Some clients just reported that they’re having trouble editing a bulleted list in a promo box using Enfold theme. I tested it out and it seems the each time the promo box is clicked to edit, an additional level of unordered list is added to each list item. So the original code:
<h3>Upcoming Ship Dates</h3>
<div style=”font-size: 80%;”>
Tue, August 25, 2015 (Sold Out)
Wed, August 26, 2015 (Sold Out)
- Tue, September 1, 2015
- Wed, September 2, 2015
- Tue, September 8, 2015
- Wed, September 9, 2015
</div>
Becomes the following code when the box is clicked to edit it:
<h3>Upcoming Ship Dates</h3>
<div style=”font-size: 80%;”>
Tue, August 25, 2015 (Sold Out)
Wed, August 26, 2015 (Sold Out)
</div>
On the next edit, the code becomes this:
<h3>Upcoming Ship Dates</h3>
<div style=”font-size: 80%;”>
Tue, August 25, 2015 (Sold Out)
Wed, August 26, 2015 (Sold Out)
</div>
Etc. Have you seen this before? Is there a fix?
Thanks for your help!
Jaci
hi yigit!
THX a lot!
I seems… the THEME update worked. BUT I have a new problem :-)
how to downsize the font of the main menu???
please HELP !!!
greets
Hey guys
How can I remove that space when hovering over my menu points? It should be attaching.
[URL=http://www.bilder-upload.eu/show.php?file=cf12f0-1440079284.jpg][IMG]http://www.bilder-upload.eu/thumb/cf12f0-1440079284.jpg[/IMG][/URL]
Also how can I have a text / website title (and be able to edit color, font-size and font-family) instead of the enfold logo?
[URL=http://www.bilder-upload.eu/show.php?file=b8f797-1440079670.jpg][IMG]http://www.bilder-upload.eu/thumb/b8f797-1440079670.jpg[/IMG][/URL]
Thanks.
Cheers,
Aline
Hey kimpomares,
Could you try using the !important statement to see if that works?
font-size:42px !important;
Regards,
Rikard
Hi!
Yes, it is :)
Please add following code to Quick CSS in Enfold theme options under General Styling tab
a#iphorm_fancybox_55d5ae51ddfcb {
background-color: #c72026;
color: #ffffff;
border-color: #a50004;
margin: 0;
padding: 16px 20px;
border-radius: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
font-weight: normal;
font-size: 12px;
min-width: 142px;
text-decoration: none!important;
}
Regards,
Yigit
Hi!
You can upload your own SVG icons on http://www.fontello.com/ and then download them and upload new font icons in Enfold theme options > Import & Export tab.
If you would like to use image instead, please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then give your element a custom CSS class and then add following code to Quick CSS in Enfold theme options under General Styling tab
.your-custom-class a.iconbox_icon.heading-color {
background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.your-custom-class a.iconbox_icon.heading-color:before {
content: '';
}
Cheers!
Yigit
Hello Josue:
I’ve used your code and works, in my case:
#top .avia-caption-content {
position: absolute;
font-size: 50px !important;
top: -40px;
left: -35px;
right: 0;
margin: 0 auto;
text-align: left;
}
But now I would like to:
a) change the color of frame (lighter color)
b) put all this code in a block of code of a specific page
c) Change size and position of caption-content for Responsive, because now es to big and very up
Thanks in advance.
b) put that cod
We created a child theme from Enfold.
The child theme places CSS for the advanced styling options is placed at the bottom of …/dynamic_avia/enfold_-_child.css?ver=…
#top #wrap_all .av-main-nav ul > li > a, #top #wrap_all .avia_mega_div, #top #wrap_all .avia_mega_div ul, #top #wrap_all .av-main-nav ul ul{font-size:15px;}#top #header .av-main-nav > li > a{font-size:16px;}#top #wrap_all .header_color h3, #top #wrap_all .main_color h3, #top #wrap_all .alternate_color h3, #top #wrap_all .footer_color h3, #top #wrap_all .socket_color h3{font-size:24px;}#top #wrap_all .header_color h2, #top #wrap_all .main_color h2, #top #wrap_all .alternate_color h2, #top #wrap_all .footer_color h2, #top #wrap_all .socket_color h2{font-size:30px;}#top #wrap_all .header_color h1, #top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1, #top #wrap_all .footer_color h1, #top #wrap_all .socket_color h1{font-size:42px;}
When we select a custom size for the special tag header in the Avia Layout it adds it as an inline style. See sample code below. Except the font-size is not being applied.
<div style="padding-bottom:20px;font-size:54px;" class="av-special-heading av-special-heading-h1 blockquote modern-quote modern-centered avia-builder-el-1 el_before_av_one_third avia-builder-el-first "><h1 class="av-special-heading-tag" itemprop="headline">More effective autism therapy</h1><div class="av-subheading av-subheading_below " style="font-size:30px;"><p>that you can do at home for only minutes a day</p>
</div><div class="special-heading-border"><div class="special-heading-inner-border"></div></div></div>
I believe that the inline code is overridden by the external style invoked by the h1 class. If the code could add inline styling to the h1 tag instead, I believe it would work, so that you can customize your h1 tags in the advanced styling theme options and still add a once-off custom size to the special heading tag in the Avia advanced layout.
That worked to get it floating, thanks! I wound up using all of this to display like the socket, and just applied to the desktop style.
#top #footer .widget_nav_menu li {
display: inline-block !important;
float: none !important;
clear: none !important;
}
#top #footer .widget_nav_menu li a {
padding: 6px 10px;
border-right: 1px solid #bbbbbb;
font-size:11px;
}
#top #footer .widget_nav_menu li:last-child a{
padding: 6px 0px 6px 10px !important;
border-right:none !important;
}
#top .widget_nav_menu li {
padding:0 !important;
}
#top .widget_nav_menu div {
margin-top:40px;
}
Hi!
Please go to Appearance > Widgets and create a new widget area and place your widget into that widget area then go to your page and add Widget Area element to your page and choose your widget area with font resizer – http://i.imgur.com/E2CkLhR.png
Best regards,
Yigit
Hi,
I think it would be better if you used the Special Heading element instead of using plain code if you want to set a custom size to it. But if you want to keep doing it that way you can use the following:
<h1 style="text-align: center; font-size:60px !important;">
Finally an ATS & CRM Built with
</h1>
Regards,
Rikard
I figured it out. The code needs to be:
#top .social_bookmarks.icon_count_3 {
font-size: 14px;
}
because I was using 3 icons.
Duh! Sorry to bother you!!!
Hi, I tried the following code to make the social icons in the header (in Enfold) larger and it didn’t work… can you help me.
I tried
#top .social_bookmarks li a {
font-size: 14 px;
}
Any help would be greatly appreciated!
Hey!
1. It looks like you got the padding sorted on your end, unless you wanted even more space?
2. Here is the exact shortcodes needed to replicate the grid row in teh shop theme:
[av_layout_row border='' min_height='0' color='main_color' mobile='av-flex-cells' id='collections']
[av_cell_one_fourth vertical_align='top' padding='0px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat']
[av_image src='http://kriesi.at/themes/enfold-shop/files/2015/03/winter-girl-small-495x400.jpg' attachment='551' attachment_size='portfolio' align='center' animation='no-animation' styling='no-styling' hover='av-hover-grow' link='product,66' target='' caption='yes' font_size='' appearance='' overlay_opacity='0.7' overlay_color='#6786a1' overlay_text_color='#ffffff']
NEW
WINTER COLLECTION
[/av_image]
[/av_cell_one_fourth][av_cell_one_fourth vertical_align='top' padding='0px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat']
[av_image src='http://kriesi.at/themes/enfold-shop/files/2015/03/couple-sitting-495x400.jpg' attachment='546' attachment_size='portfolio' align='center' animation='no-animation' styling='no-styling' hover='av-hover-grow' link='product_cat,15' target='' caption='yes' font_size='' appearance='' overlay_opacity='0.7' overlay_color='#6786a1' overlay_text_color='#ffffff']
LATEST
STREET CLOTHES
[/av_image]
[/av_cell_one_fourth][av_cell_one_fourth vertical_align='top' padding='0px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat']
[av_image src='http://kriesi.at/themes/enfold-shop/files/2015/03/girls-shopping-desat-495x400.jpg' attachment='549' attachment_size='portfolio' align='center' animation='no-animation' styling='no-styling' hover='av-hover-grow' link='product_cat,12' target='' caption='yes' font_size='' appearance='' overlay_opacity='0.7' overlay_color='#6786a1' overlay_text_color='#ffffff']
FRESH
SPORTSWEAR
[/av_image]
[/av_cell_one_fourth][av_cell_one_fourth vertical_align='top' padding='0px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat']
[av_image src='http://kriesi.at/themes/enfold-shop/files/2015/03/hipster-girls-working-495x400.jpg' attachment='554' attachment_size='portfolio' align='center' animation='no-animation' styling='no-styling' hover='av-hover-grow' link='product_cat,10' target='' caption='yes' font_size='' appearance='' overlay_opacity='0.7' overlay_color='#6786a1' overlay_text_color='#ffffff']
FUNKY
ACCECCOIRS
[/av_image]
[/av_cell_one_fourth][/av_layout_row][av_section min_height='' min_height_px='500px' padding='default' shadow='no-border-styling' bottom_border='no-border-styling' id='' color='alternate_color' custom_bg='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='']
3. It also looks like you created a regular submenu on your end.
Best regards,
Dake
Hey!
Please add the below css to your quick css section:
.page-id-541 .slide-entry-title .entry-title {
background-color: #6786a1 !important;
color: #ffffff !important;
border-color: #456480 !important;
padding: 25px 50px 23px !important;
font-size: 15px !important;
min-width: 200px !important;
text-align: center !important;
}
This will style the solo links to look like the buttons on clinical guidelines.
Cheers!
Dake