Hi Yigit
the code works, but not fully as intended. I want to force the word “Kostenlos” in the sidebar widget to have a different font-size.
Enfold

BR
MAnfred
Hey!
You should add following code to Quick CSS
.jobs-menu > a > span.avia-menu-text:after {
content: "1";
font-size: 9px;
color: #FFF;
background: #42A0BD;
line-height: 17px;
width: 17px;
display: inline-block;
text-align: center;
border-radius: 100px;
position: relative;
top: -9px;
left: 2px;
}
And then go to Appearance > Menus and click “Screen options” and check “CSS classes” and then add “jobs-menu” to your menu item on which you would like to display bubble :)
Regards,
Yigit
Hi!
Your code seem to be working fine on my end
#top.single-product .price, #top.single-product .price span, #top.single-product del, #top.single-product ins {
font-size: 20px!important;
line-height: 18px;
font-weight: bold;
}
Please flush browser cache and refresh your page a few times
Regards,
Yigit
Hi MarkusJonas!
du kannst folgenden Code im Quick CSS Feld verwenden:
.main-title.entry-title {
text-transform: uppercase;
font-size: 19px;
}
passe deinen Wünschen entsprechend an.
Gruß!
Andy
Thanks Elliott for your reply.
I sorted this one out myself and changed content / sidebar ratio in the Options menu.
But I have another one:
On my single product page I changed the font-size of the product price. When doing that it changed also the font-size of the word “Kostenlos” (ins) in the sidebar widget for the recently viewed products, what should be avoided.
I tried several codes but none of them worked. This is the code I used to change the font-size of the product prize, just on the single product page:
#top.single-product .price, #top.single-product .price span, #top.single-product del, #top.single-product ins {
font-size: 20px!important;
line-height: 18px;
font-weight: bold;
}
http://www.deboman.com/Wordpress/?product=testartikel-11
Thanks in advance for your help
-
This reply was modified 10 years, 3 months ago by
deboman.
Hey!
Please add following code to Quick CSS
#footer p {
font-size: 15px!important;
}
If that too does not help, please create a temporary admin login and post it here privately
Regards,
Yigit
The size of my icon and the title next to it looks really large. Additionally, the title next to the icon is not the same font height as the icon.
I would like for it to appear as in the demo. http://kriesi.at/themes/enfold/shortcodes/iconbox/
I have imported this demo. Then changed my H1 then realized that maybe this was controlling the icon title so I changed the H1 back to the default settings but it didn’t fix it. Additionally, the titles in my footer became really large also.
Thank you for your assistance.
Hey JTV Digital!
Add this to your custom CSS.
.template-blog .post-title { font-size: 20px; color: red; font-family: verdana; }
.template-blog .entry-content { font-size: 20px; color: red; font-family: verdana; }
Regards,
Elliott
Hi turistai!
try this code:
.textwidget {
font-size: 10px;
}
If that does not work then please provide us a precise link to the website in question.
Regards,
Andy
Hi turistai!
Please try adding following code to Quick CSS
#footer .widgettitle + * {
font-size: 16px !important;
}
If that does not help, please post the link to your website
Regards,
Yigit
Hi team
I am trying the change the font size in all the widgets in the footer. I tried a CSS quick code I found in the forum but it did not worked:
#footer .footer-widgets {
font-size: 10px !important;
}
What’s the error?
Thanks a lot for your support!
Hey!
try this code:
a.asc_linkedin.asc_multi_count .social_widget_icon:before {
color: green;
background-color: red;
font-size: 20px;
}
and adjust as needed.
Regards,
Andy
Hey!
Please try changing the code to following one
/**
* Function for posts of type quote: title is wrapped in blockquote tags instead of h1
*/
function avia_quote_content_filter($current_post)
{
if(!empty($current_post['title']))
{
//$current_post['title'] = "<div class='". avia_offset_class('meta', false). "'><h1 class='first-quote'>".$current_post['title']."</h1></div>";
$current_post['title'] = "<h1 class='first-quote' ".avia_markup_helper(array('context' => 'entry_title','echo'=>false))."><a href='".get_permalink()."' rel='bookmark' title='". __('Permanent Link:','avia_framework')." ".$current_post['title']."'>".$current_post['title']."</a></h1>";
}
return $current_post;
}
and then add following code to Quick CSS in Enfold theme options under General Styling tab
.entry-content-header h1.first-quote {
font-size: 19px;
}
Cheers!
Yigit
I am sorry but i can’t not get it work.
Where do i have to put the code in i got from font squirrel? In the Custom.css or in the style.css?
I also tried with this method :
https://kriesi.at/support/topic/various-headingssizescolors-of-text-in-same-text-block/
And i do not only want to have a complete section with this font but have it mixed with the normal font in one sentence / section – so i need the html as well.
Thanks Simon
Hello,
What is the quick CSS for amending the fonts only for the blog section?
Examples:
– change font type, size and colour for the blog post titles
– change font type, size and colour for the blog post body text
Thanks
Hi Kriesi & Co,
Wanting to do that blue bubble you have on my site and I have read the instructions here but it didn’t give me enough to do it on my site.
Please tell me… should I go to Enfold >> General Settings >> Quick CSS??
Do i copy the code into Quick CSS? Because I did so and it didn’t work. It could be that i am not replacing jobs with the right word??
.jobs-menu > a > span.avia-menu-text:after {
content: "1";
font-size: 9px;
color: #FFF;
background: #42A0BD;
line-height: 17px;
width: 17px;
display: inline-block;
text-align: center;
border-radius: 100px;
position: relative;
top: -9px;
left: 2px;
}
This is normal you don’t see any quote. Because, as mentionned, I have requested in this resolved thread to make the Quote posts’ titles normal, llike all others. So, Ismael gave me this code :
/**
* Function for posts of type quote: title is wrapped in blockquote tags instead of h1
*/
function avia_quote_content_filter($current_post)
{
if(!empty($current_post['title']))
{
//$current_post['title'] = "<div class='". avia_offset_class('meta', false). "'><h1 class='first-quote'>".$current_post['title']."</h1></div>";
$current_post['title'] = "<h1 class='first-quote' ".avia_markup_helper(array('context' => 'entry_title','echo'=>false)).">".$current_post['title']."</h1>";
}
return $current_post;
}
And now I got this result — image
So I’d like the right code to make this title looking like others — with a link and the same font size, please.
Hi!
We added this code in the Quick CSS field:
@media only screen and (max-width: 768px) {
.only_desktop { font-size: 15px !important; }}
Again, it might be better if you hide the slider on mobile.
Best regards,
Ismael
Hi AnjiG!
Add this to your custom CSS.
.slide-entry-title { font-size: 20px !important; }
.blog-categories { display: none !important; }
Best regards,
Elliott
Hi!
Please try using following codes
#main .main_color a,#main .alternate_color a {
text-decoration:underline !important;
}
.specialheading-font-size h1 {
font-size: 50px!important;
}
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 300px !important;
}
Cheers!
Yigit
Hi
I have used Blog Grid element on posts with category “Articles”. I have 2 questions:
How do I change the size of the font of the title (it’s too large).
How do I get rid of the categories (although I’ve put display title only it gives the category and author )
I have looked at other comments and used some of the CSS suggested but nothing works.
I’ve also deactivated all plugins and activated again and it doesn’t change anything.
Thanks
Anji
Hello,
Can you tell me how can I put diferent fonts on sidebar? I want to diferent fonts . One for main pages and second font for sidebar. Is it possible to change size?
Thank you!
Hi,
i tired to add a custom font without success.
I read several posts but could not manage it.
WHat it did is: created a new folder in the enfold folder named “font”. Loaded the two fonts in it.
Then i put this code in the custom.css
/* Spezial Schrift Honey Script Light */
@font-face {
font-family: Honey Script Light;
src: url('myurl/wp-content/themes/enfold/font/HoneyScript-Light.ttf');
}
/* Spezial Schrift Honey Script SemiBold */
@font-face {
font-family: Honey Script SemiBold;
src: url('myurl//wp-content/themes/enfold/font//HoneyScript-SemiBold.ttf');
(Later i tried to put it in the style.css in of the child theme folder. -which is the right one?)
Then i put this code in quick css
h4 {
font-family: Honey Script Light;
font-size: 16px;
}
…without success.
i tired to make some sentences with this font in html in the layout builder
<p style="Honey Script Light;">This is a paragraph.</p>
…but this also failed. Now i need some help please. Thanks Simon
Hey Justin!
Please add following code to Quick CSS
#top #header .av-main-nav > li > a:hover {
height: 90px;
margin-top: 0px;
opacity: 1;
transition: all 300ms;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
}
#top #header .av-main-nav > li > a {
color: #555;
font-size: 18px;
height: 75px;
background: white;
margin-top: 15px;
opacity: 0.7;
transition: all 300ms;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
}
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Happy new year to you too!
Cheers!
Yigit
Hey asomi!
Please add following code to Quick CSS
.avia-featureimage-slider-wrap a { color: orange !important; font-size: 18px; }
If that does not help, please post the link to your page
Best regards,
Yigit
Hi
I am not so good at English.
So please be good to understand my awkward English.
I want to change the caption title font sized of “Featured Image Slider”.
I want to change the caption title font color of “Featured Image Slider”.
I want to change the caption title margin(Right, Left) sized of “Featured Image Slider”.
How to enter the “Quick CSS” ??
Please advise.
Thx
Hey!
Did you make any changes to the custom css it was messing the breadcrumbs. I have removed all the css below to avoid conflict.
Perhaps check out the site now it looks much better anyhow since i have removed the below css from enfold Quick css some of the changes you have made will be lost if you need to add it back you can copy and paste the below css one by one to Quick CSS.
If you need further help please send us a mockup image of the current issue and how you want the finished design to look.
.avia_transform .avia-icon-list .iconlist_icon {
opacity: 1 !important;
-moz-transform:scale(1) !important;
-webkit-transform:scale(1) !important;
-o-transform:scale(1) !important;
transform: scale(1) !important;
}
.avia_start_animation .iconlist_icon{
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
animation: none !important;
}
.avia-menu a {
font-size: 18px !important;
}
span.text-sep.text-sep-date {
display: none;
}
.widgettitle {
text-transform: none !important;
}
.main_color .textwidget { color: #e5650a; }
.avia_codeblock .title_container {
background: transparent !important;
}
#after_section_1 .av-extra-border-inner {
display: none;
}
.title_container .breadcrumb {
right: auto;
left: 0;
font-size: 13px;
}
Cheers!
Vinay
Hi Gene,
1. That should not be happening, could you link to a page where the hover is not working please?
2. Please try the following in Quick CSS under Enfold–>General Styling:
.page-id-571 .iconbox_content_container p {
font-size:16px !important;
}
Remove .page-id-571 if you’d like the change to apply for the entire site.
Best regards,
Rikard
Hi!
Please replace the code with this:
// Fix Enfold from using 1500px wide image and use the full-size image instead
add_action( 'init', 'ssi_woocommerce_full_width_category_images', 50 );
function ssi_woocommerce_full_width_category_images()
{
remove_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner', 11 );
add_action( 'ava_after_main_container', 'avia_woocommerce_parallax_banner_child_theme', 11);
function avia_woocommerce_parallax_banner_child_theme($bg, $overlay, $opacity, $description, $font)
{
if(is_numeric($bg))
{
$bg = wp_get_attachment_image_src($bg, 'full');
if(is_array($bg) && $bg[0] != "") $bg = $bg[0];
}
if($font) $font = "style='color:{$font};'";
if($bg) $bg = "background-image: url(".$bg.");";
$output = "";
$output .='<div id="av_product_description" class="avia-section main_color avia-section-large avia-no-border-styling avia-full-stretch av-parallax-section av-section-color-overlay-active avia-bg-style-parallax container_wrap fullsize" data-section-bg-repeat="stretch" '.$font.'>';
$output .='<div class="av-parallax avia-full-stretch" data-avia-parallax-ratio="0.3">';
$output .='<div class="av-parallax-inner" style="'.$bg.' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;">';
$output .='</div>';
$output .='</div>';
$output .='<div class="av-section-color-overlay-wrap">';
if(!empty($overlay))
{
$output .='<div class="av-section-color-overlay" style="opacity: '.$opacity.'; background-color: '.$overlay.'; "></div>';
}
$output .='<div class="container">';
$output .='<main class="template-page content av-content-full alpha units">';
if($description) $output .= "<h1>".$description."</h1>";
$output .='</main></div></div></div>';
return $output;
}
remove_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner', 11 );
add_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner_child_theme', 11 );
function avia_woocommerce_big_cat_banner_child_theme()
{
if(is_product_category())
{
global $wp_query, $avia_config;
if(isset($wp_query->query_vars['taxonomy']))
{
$term = get_term_by( 'slug', get_query_var($wp_query->query_vars['taxonomy']), $wp_query->query_vars['taxonomy']);
if(!empty($term->term_id))
{
$description = term_description() ;
$style = get_woocommerce_term_meta($term->term_id, 'av_cat_styling');
$attachment_id = get_woocommerce_term_meta($term->term_id, 'thumbnail_id');
$overlay = get_woocommerce_term_meta($term->term_id, 'av-banner-overlay');
$font = get_woocommerce_term_meta($term->term_id, 'av-banner-font');
$opacity = get_woocommerce_term_meta($term->term_id, 'av-banner-overlay-opacity');
if(!empty($style))
{
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_taxonomy_archive_description', 11 );
echo avia_woocommerce_parallax_banner_child_theme($attachment_id, $overlay, $opacity, $description, $font);
$avia_config['woo-banner'] = true;
}
}
}
}
}
}
Regards,
Ismael
Hi jeffreyvanoostrom!
1. Add this to your custom CSS.
#mobile-advanced #menu-item-3287 > a {
height: 52px !important;
}
2. You can use this CSS to target them on smaller screens.
@media screen and (max-width: 767px) {
.avia-layerslider span.av-icon-char {
font-size: 12px !important;
}
}
3. Add this.
.fallback-table-val {
visibility: visible !important;
}
Regards,
Elliott