Hi,
how can I change the font-size of “Kunden-Empfehlung” (TESTIMONIALS)?
And can I change the font-size for mobile view seperately? At the moment, the font-size on the smartphone is very large.
Regards
Anke
Hi,
Just add the color with it:
#top #header .mega_menu_title a {
font-size: 15px;
color:#000!important;
}
Best regards,
Jordan Shannon
Weird: I have the font for the header in the header widget set to:
<h1 style=”text-align: center;”><span style=”font-size: 30pt;”>urban healthy conscious</span></h1>
But this only applies to the startpage – not to the other pages. How can I set it to appear like that on ALL headers, not only on the startpage.
On the other pages the font appears fat and doesn’t show h1 font.
thanks Nora
Hi,
Thanks for the update.
You should add the actual iconbox shortcode inside the text block, then turn on the custom css class field so that we can target that specific text block or icon box element directly.
// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements
You can generate the iconbox shortcode from a separate post using the shortcode generator.
The content of text block should look something like this once you have included the iconbox shortcode plus the actual content that should wrap around the icon box.
[av_icon_box position='left' icon_style='' boxed='' icon='1' title='IconBox Title' link='' linktarget='' linkelement='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-29zeuo' custom_class='av_wrap_icon_box']
Icon Box Text
[/av_icon_box] Text block content lorem ipsum dolor sit amet i am so osamu andsamu haha
If you noticed, we added the custom_class parameter to the icon box shortcode and added the value “av_wrap_icon_box”. We can use that class attribute to change the style of the icon box.
#top .iconbox.av_wrap_icon_box {
width: 50%;
float: left;
}
Best regards,
Ismael
As I already mentioned:
Without the URL it is quite hard to say what’s wrong, I am sorry.
Maybe this helps:
.avia-content-slider .slide-entry-title {
font-size: 35px !important;
}
HI~
I try to use two icon list, and it’s style attribute will have problem in the second icon list.
Like below
<h4 class=’av_iconlist_title iconlist_title ‘ itemprop=”headline” style=’ style=’font-size:24px; ‘font-size:24px; ‘>List Title 1</h4></header>
https://screencast.com/t/tWYaLD9o
my version is enfold 4.5.5
-
This topic was modified 6 years, 10 months ago by
decode.
Hi mela1989
I think you can activate the option “Show element options for developers” if you go to Enfold => Layout Builder.
Afterwards you should be able to set a class for one slide only and target it with a bigger font-size like this.
I am not 100% if this works as I rarely use sliders.
if it does not work it would be great if you can share the website URL here so I can take a closer look.
Best,
Michael
Hello, When I placed this code
.avia-content-slider .slide-entry-title {
font-size: 35px;
}
It´s changed all my sliders titles, but I need only for one of them.
I placed a class to the content slider and is not working
Hey,
I just wanted to let you know that the CSS for “Accordion style-3″ is missing ” \ ” calling the icon as you can see below:
/*----------------------------------------
// CSS - Accordion style 3
//--------------------------------------*/
/* Tab title style */
.av-accordion-style-3 .toggler {
font-size: 18px;
font-weight: bolder;
border: none;
padding: 10px 15px;
text-transform: uppercase;
color: #fff;
background: #323b43;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.av-accordion-style-3 .activeTitle.toggler:hover,
.av-accordion-style-3 .activeTitle.toggler,
.av-accordion-style-3 .toggler:hover {
color:#FFF;
background: #ee4f4f;
}
/* Extra content in tab title */
.av-accordion-style-3 .toggler span.extra-content {
display: block;
clear: both;
font-size: 13px;
line-height: 1.5em;
font-weight: lighter;
opacity: .65;
padding: 5px 0;
text-transform: none;
}
/* Accordion icon */
.av-accordion-style-3 .toggle_icon:before {
position: absolute;
font-size: 18px;
top:50%;
transform: translateY(-50%);
left: 0;
content:"e875";
font-family: 'entypo-fontello';
line-height: 0;
}
/* Active tab icon */
.av-accordion-style-3 .activeTitle .toggle_icon:before {
content:"e873";
font-family: 'entypo-fontello';
}
/* Hide default icon */
.av-accordion-style-3 .toggle_icon {
border:none;
position: absolute;
left: auto;
right: 20px;
}
.av-accordion-style-3 .toggle_icon .vert_icon,
.av-accordion-style-3 .toggle_icon .hor_icon {
display:none;
}
/*Toggle content area */
.av-accordion-style-3 .toggle_content {
background: #fff9ea;
padding-top: 30px;
}
It should have been content:”\e873″; instead of content:”e873″;
Cheers
Hello! I have some problems with the glassy header on my Home page.
I use a sticky header that is shrinking when scrolling down. I also have a phone info bar on top.
1. I don’t want the phone info bar to be transparent. How can I change the transparency of it (only for the phone info bar, not the whole header)?
2. The other pages are not set to Glassy Header and seem to overlap the content and I can’t tell why. I only want the Header on the Home page to be Glassy. On the other pages I only want the shrunk header to be glassy/transparent (This works right now, the only problem is the overlap)
Here is all the CSS I haved used on my website so far:
.container.av-logo-container {
margin-bottom: 10px;
}
.container.av-logo-container {
margin-top: 10px;
}
#top .main_menu .menu li > a {
padding-top: 0px !important;
}
#top .social-bookmarks > a {
padding-right: 10px !important;
}
#top .social_bookmarks {
top: 0px !important;
}
.phone-info {
font-size: 17px;
}
.avia-caption-title, .avia-caption-content {
background: rgba(98,154,206,.8) !important;
padding: 20px;
}
.avia-caption-title{
display: inline-block !important;
}
.avia-caption-content{
width: 100%;
}
.avia-caption-content p{
margin: 0;
}
.caption_bottom .slideshow_caption{
bottom: 20px !important;
}
#slideshow_big .slideshow_caption {
width: auto;
}
.slideshow_align_caption {
text-align:middle !important;
}
.header-bg, .header_bg { opacity: 0.6 !important; background: white !important; }
Hi,
Try the following in quick css:
#top #header .mega_menu_title a {
font-size: 15px;
}
Best regards,
Jordan Shannon
Hi larias_transfiriendo,
https://imgur.com/a/jSo7ZC4 the text is centered under each image. It cannot be centered independently on the page.
Do you need something like this?
#top .av-tab-with-image .av-inner-tab-title {
font-size: 14px !important;
color: navy;
}
Best regards,
Victoria
Hey all,
we have set a standard heading font size with the advanced styling function. This looks great on the regular website where headings are only a couple words long.
In our blog however, heading tend to be long and very frequent. Hence, it looks a bit too much.
Is there a way to change the differentent heading font sizes within the blog/for certain pages only?
Cheers
Restube
Update: So I did whatever was needed but now I need to get the header widget to be centered in the middle from top to bottom of the header area – AND of course it needs to be responsive, so as soon as the header shrinks, the font must shrink too.
I added this code to the header widget:
<h1 style=”text-align: center;”><span style=”font-size: 44pt;”>urban healthy conscious</span></h1>
And added this code to quick CSS:
#top #header #header_main .widget{
width: 100%;
line-height: 35px;
color:#6786a1;
}
So maybe there is another way to make it centered from top to bottom instead of using the line-height? But this still doesn’t resolve the problem that the font doesn’t shrink as soon as I start scrolling.
AND: I updated the theme to it’s current version, because my the fullwidth submenu isn’t sticky (although I set it to be sticky), but the update didn’t help either. The menu fullwidth submenu is still not sticky although it’s set to sticky.
PLEASE HELP!
thanks nora
Hey Mike, thanks for your support and sorry for the late reply. I had to put the project on hold.
Here’s the screenshot showing that 1px white line on the first tab.
The CSS you posted doesn’t seem to help with that tab-titles-on-one-line (on mobile) issue.
I only have three CSS codes. One is supposed to change the font size and weight of the tab titles (when it worked that also solved the one line issue on mobile). One is supposed to customise the only fullwidth button there is on the page. The last one is the one you suggested.
All of them should affect items that are in http://www.moksashop.it/home
I’m gonna post my admin login, if you could help me I would much appreciate it!
Thanks
Hi Rikard,
thanks! This was the right hint! I’m so glad that Kriesi support is there, I will definitely keep buying Enfold for my customers:-)
The final code needed !important…:
.plp-ltblue {
line-height:20px!important;
font-size: 16px !important;
font-weight: bold !important;
background: lime !important;
}
.plp-lttrans {
line-height:20px!important;
font-size: 16px !important;
font-weight: bold !important;
background: transparent!important;
}
…and the other menu items need a similar but separate class to be ‘in line’…
One thing would be a “nice to have” with the Enfold theme: A list (or DB) of all standard classes used as a default.
Ticket solved, can be closed,
Best
Stefan
Hi allyson3,
Please try the code like this instead:
.page-id-1769 .avia-icon-list .iconlist_icon {
height: 84px;
width: 84px;
line-height: 88px;
margin-left: -10px;
font-size: 50px;
}
You need to check the file you uploaded. Make sure the zip is not corrupt.
Best regards,
Victoria
Hi guys,
how would I alter the css so the background color of the top menu item is having a padding …like 2-3px above and below the menu.
In this case I used lime to see clearly what I mean:
.plp-ltblue {
font-size: 16px !important;
font-weight: bold !important;
background: lime !important;
}
On this very page: http://dev1.plp-group.com
…any ideas?
best
Stefan
Hi JordanTH3,
Please try this css:
@media only screen and (max-width:767px){
#av_section_1 .av_textblock_section .av-small-font-size-55 p strong {
font-size: 24px;
line-height: 16px !important;
}
}
Best regards,
Victoria
Hey enfold,
Try this instead:
.btncomienza a {
font-size: 148px !important;
color: #808080 !important;
padding: 250px!important;
border-radius: 25px;
background-color: #CA2A1E !important;
}
Best regards,
Rikard
Can’t change font size with post draft.
Hi,
I want to change my menu to a “Mega Menu”, it worked but the font size of the dropdown links is way to big, the space between the links is to big and I also want to change the color.
I know that all can probably changed in “Advanced Styling” but everything I tried failed.
Ho can I change all this stuff?
The Mega Menu is currently not active on my Website (because I don’t like the look) so I cannot provide a link.
But I made a screenshot – how can I show it to you?
Thanks for help!
Frauke
Hi,
I have created a new button.
The button name is “COMIENZA YA”, and I give it a css class on ABL button contents “.btncomienza”
.
Then, I go to enfold css editor and add the class names and desired attributes:
.btncomienza {
font-size: 148px !important;
color: #808080 !important;
padding: 250px!important;
border-radius: 25px;
background-color: #CA2A1E !important;
}
But the button has no changes, font size does not increse, button color does not change (instead bg color change)
I need to modify just only button properties.
I appreciate your help
Regards
Santiago
Contentslider thing is fixed with the fix above. But i’ve still the issue, that the default font size which is set in general styling default font size doesn’t work. i can set it to 16px and still it runs with 13px. :(
Hi juanraubeda,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.html_elegant-blog #top .post-entry .minor-meta a {
font-size: 12px;
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Eikordo,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width:479px){
.avia_textblock p, .avia_textblock h1 {
word-wrap: break-word
}
.avia_textblock h1 {
font-size: 20px;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Rikard,
thank you very much for replying – please find below the pdf in the following folder (concerning hover-effect on images and sequence of galleries):
https://www.dropbox.com/sh/mrg95bop9eykki1/AAC5ARq4wuv5AdZSTSgcIEfHa?dl=0
Hope, you can derive it from there …
We do have some other problems with this project as well :-(
1. problems with size of LIGHTBOX – our client wants the images to be displayed very large – is it possible to enlarge the size of the Lightbox / something like “full width of image loaded”?
2. Hover-TITLE within galeries – can we change the font-size and -color (our customer wants the size to be displayed with 20px and maybe in another color – how can we change size and color of hover-title?)
3. Footer – we display an image (part of the clients logo) in the footer with the help of a widget – one column; is it instead of this possible to display this without any edges and distance above and below? There is a white line which we do not want to be displayed. Our client wants this to be displayed with maximum width.
THANK YOU VERY MUCH – this project is very complicated concerning the impatience of our client …
Hope, you can offer help quickly
Birgit
Hi, Jordan
I added this CSS in Child’s Quick CSS theme and can’t make it run. At the same time adding this code to custom.css using FTP works perfect. I can’t add this code uding Theme editor. So I believe there’s writing rules mistake.
.avia-icon-list .iconlist_icon {
height: 32px;
width: 32px;
line-height: 32px;
font-size: 20px;
}
.avia-icon-list .iconlist-timeline {
left: 17px;
}
.avia-icon-list .av-iconlist-empty .iconlist_title {
margin-top: 7px;
}
Regards, Vital
Hi JordanTH3,
You need to check the other section ids and add them to the code given above like so
@media only screen and (max-width:767px){
#av_section_1 .av_textblock_section p strong,
#av_section_n .av_textblock_section p strong,
#av_section_n .av_textblock_section p strong
{
font-size: 24px;
}
}
Where you change the n for the real number.
Best regards,
Victoria
Hi Andy,
Please add this code too:
@media only screen and (max-width:767px){
#top .av-woo-purchase-button .price span {
font-size: 20px;
}
}
Best regards,
Victoria