Hi,
I added the followining code to get the custom standard font and bold version on hover/active.
All good so far EXCEPT that the menu items seem to “jump” when you hover over them meaning that they are not static. The bold font on hover seems not to work in this way? Maybe it would be a solution to define absolute positions for the menu items?
What can I do?
Thanks
Carolin
#top #header .avia-menu-text {
font-family: Gilroy-Regular;
font-size:20px;
letter-spacing: 2px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
#top #header #avia-menu li.menu-item:hover > a > .avia-menu-text {
font-family: Gilroy-Bold;
font-size: 20px;
letter-spacing: 2px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
Hi Mike,
please have a look now. I resolved the issue of the & in the headline with the following code
.special_amp {
font-family: inherit;
font-style: inherit;
font-size: inherit;
line-height: inherit;
font-weight: normal;
color: inherit!important;
}
However, it is still not displaying correctly in the audio player: if you click on the second song, you can see the wrong “True & Blue” instead of “True & Blue”. I managed to fix it with the first song but changing a letter and then saving the song file again but I cannot do this for each song? Is there a problem with encoding?
Thanks
Carolin
Hi,
Thank you for the update.
Do you want to decrease the size of the slider arrows on mobile view? If so, then the following css code should help.
@media only screen and (max-width: 767px) {
#top .avia-layerslider .ls-nav-prev, #top .avia-layerslider .ls-nav-next {
width: 30px;
height: 30px;
line-height: 32px;
font-size: 18px;
margin: -14px 7px 0;
}
#top .avia-layerslider .ls-nav-prev::before, #top .avia-layerslider .ls-nav-next::before {
line-height: 32px;
}
}
Best regards,
Ismael
Hi mooshonov,
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
#top .price span {
font-size: 16px
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi,
Add this to quick css:
h3.avia-form-success {
font-family:Helvetica!important;
font-size:14px!important;
font-weight:normal!important;
}
Best regards,
Jordan Shannon
Hey gubano,
Add the following to quick css:
form h3{
font-family:Helvetica!important;
font-size:18px!important;
font-weight:normal!important;
}
#top div .av-dark-form .input-text, #top div .av-dark-form input[type='text'], #top div .av-dark-form input[type='input'], #top div .av-dark-form input[type='password'], #top div .av-dark-form input[type='email'], #top div .av-dark-form input[type='number'], #top div .av-dark-form input[type='url'], #top div .av-dark-form input[type='tel'], #top div .av-dark-form input[type='search'], #top div .av-dark-form textarea, #top div .av-dark-form select, div div .av-dark-form .button {
border-width: .9px !important;
}
input.button{
color:#000!important;
font-weight:bold!important;
}
You may need to go to contact.css and search and remove the following:
#top div .av-dark-form .input-text, #top div .av-dark-form input[type='text'], #top div .av-dark-form input[type='input'], #top div .av-dark-form input[type='password'], #top div .av-dark-form input[type='email'], #top div .av-dark-form input[type='number'], #top div .av-dark-form input[type='url'], #top div .av-dark-form input[type='tel'], #top div .av-dark-form input[type='search'], #top div .av-dark-form textarea, #top div .av-dark-form select, div div .av-dark-form .button {
border-width: 2px !important;
}
Best regards,
Jordan Shannon
Hello,
Please follow the link below:
Could you please help me to change font and size of “USE THE FORM BELOW TO CONTACT US OR SCHEDULE A COMPLIMENTARY CONSULTATION” to Helvetica 18 regular (not bold)?
Also, I’d like the frame to be not so harsh/bold. How to make it look regular/thinner?
And last question is about the button: how to change font color to #000000 and make it bold, so it matches the rest?
Thank you in advance!
I had this in the css and as soon as i took it out it went back to normal.
@media screen and (max-width:720px) {
h1 {
font-size: 23px;
}
h2 {
font-size: 20px;
}
i was using this for he font sizes on mobile.
Hi,
Add this to quick css:
@media only screen and (max-width: 767px) {
h1{
font-size:12px!important;
}}
Adjust font for whatever you need.
Best regards,
Jordan Shannon
Hi Jörg!
Das ist simples CSS und z.B. über Firefox und Web-Entwickler kannst du jede Class oder ID herausfinden.
Probiere mal das in deiner Qick-CSS: #socket {font-size: 20px!important;}
Schriftgröße 20px ist nur damit du mal den Unterschied siehst.
lg
Christian
Hi,
As stated I’d like to change Woocommerce price font size.
Couldn’t find a solution in forums search.
Thanks
Hey Carolin,
Thank you for the inquiry.
You can use the following css code to create the adjustments listed above.
div .products .product {
margin: 0 2% 2% 0;
width: 23.25%;
}
#top .price, #top .price span, #top del, #top ins {
font-size: 20px;
line-height: 30px;
}
.products .product h2, .products .product h3, .products .product h4, .products .product h5, .products .product h6, h2.woocommerce-loop-product__title {
font-size: 1.2em;
line-height: 1.4em;
}
We don’t see the value added tax text in the grid. Did you remove it?
Best regards,
Ismael
Hi,
Thanks for the code sample, but there were quite a few errors in it, I tried to put this together for you but I’m still unsure what icons you want to use. Please see the screenshot in Private Content area.
.family .toggle_icon:before {
content: "\e816";
font-family: entypo-fontello;
position: relative;
font-size: 28px !important;
}
.family .toggle_icon {
margin-top: -24px !important;
}
.family .activeTitle .toggle_icon:before {
content: '\e806';
font-family: entypo-fontello;
}
Please replace your current css with this and clear your browser cache, then let us know how to proceed.
Best regards,
Mike
Hello,
I added this code to add an icon before the title in the accordion, but instead of the icon it adds the text “uf101”
See the image:
https://monosnap.com/file/3QdcRKufwxWk1G0gAul0LLDN4Kjbom
Added code:
/ * Custom Accordion Icon * /
./* Tab title style * /
.family .toggler {
font-size: 24px;
font-family: 'Kreon', serif;
letter-spacing: .05em;
font-weight: lighter;
border-left: none;
border-right: none;
}
/ * Accordion icon * /
.family .toggle_icon: before {
position: absolute;
font-size: 18px;
top: 50%;
left: 0;
content: '\ uf101';
font-family: 'flaticon';
line-height: 0;
}
/ * Active tab icon * /
.family .activeTitle .toggle_icon: before {
content: ì \ uf101 ';
font-family: 'flaticon';
}
/ * Hide default icon * /
.family .toggle_icon {
border: none;
}
.family .toggle_icon .vert_icon,
.family .toggle_icon .hor_icon {
display: none;
}
Where is the error?
Hi Mike,
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
.single.single-product .product_meta * {
font-size: 16px;
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
.home h3.entry-title a {
font-size: 18px !important;
}
Best regards,
Rikard
This is an odd issue and the only area I can see may there is a problem is in the Quick CSS.
When I update the page the area that contains a catalogue completely vanishes (Area in White – Menu Items). I have had to go back to an older version to restore – than that stopped working – my new fix which still does not always comply is I made copy of the page and saved it as a template. I redid the page – thinking the original page had some unwanted code. Still occurring. Also note, when I made an update to the home page – the menu disappeared yet again from the menu page.
Here is the quick css I have on the site in its entirety – is there something there that would be causing this? If not, any other explanation? If needed, would give you access to the site too! Thank you for your support as always. I have spent an enormous amount of time on this and cannot find a fix.
@media only screen and (max-width: 767px) {
.av_textblock_section .avia_textblock p * {
font-size: 12px !important
}
.responsive #scroll-top-link {
display: block!important;
}
}
.textwidget {
font-size: 12px;
}
@media only screen and (max-width: 767px) {
.av-catalogue-price {
font-size: 11px;
}
.av-catalogue-title {
font-size: 10px;
}
.av-catalogue-content {
font-size: 10px;
}
Hi.
I would like to know if there is a possibility of inserting the css not inline. On my site the css modifications only work from the wordpress panel, they don’t work on your dashboard or even in the css file of the child theme.
My css is this
#top .logo-title {
transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
font-size: 15px;
position: absolute;
left: 80px;
top: -7px;
opacity: 1;
white-space: nowrap;
}
#top .logo-subtitle {
top: 7px;
}
#top .subtext {
float: left;
position: relative;
}
#top .header-scrolled .logo-title {
left: 42px;
}
.excerpt {
color: #ffffff;
left: 29%;
position: absolute;
top: 12%;
font-size: 12px;
font-weight: bold;
}
@media only screen and (max-width: 1140px) {
.excerpt {
display:none;
}
}
.entry-content img {
border-radius:2px;
height:auto !important;
max-width:100%;
display:block;
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, .4);
border: 1px solid #8a4419;
border-style: inset;
}
.entry-content strong {
font-weight: bold;
}
.main_color .template-archives .tabcontainer a, #top .main_color .tabcontainer .tab:hover, #top .main_color .tabcontainer .tab.active_tab{
color:#4ecac2!important
}
.content a {
font-weight: bold;
}
.entry-content a[target=”_blank”]:after {
font-family: ‘fontello’;
content: ” \f08e”;
}
.entry-content a {
font-weight: bold;
text-decoration: none;
}
.entry-content a:hover{background-size: 100% 2px;
background:-webkit-gradient(linear,left top,right top,from(#ff8a00),to(#e52e71));
background:linear-gradient(to right,#ff8a00,#e52e71);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-box-decoration-break:clone;}
Thanks
Best Regards
hello rikard,
thanks for your response.
the logic is fine and ok.
but i don´t get it how you managed it in your “enfold 2017” demo unter e.g. “portfolio”.
i want to have the small font-size, not the big one.
please have a look, below my credentials.
thanks a lot,
felixl
This reply has been marked as private.
This reply has been marked as private.
if this is all your Quick CSS – then why is clear for above reasons.
there are some closing brackets missing – each opening bracket must have a closing bracket.
@media only screen and (max-width: 767px) {
.av_textblock_section .avia_textblock p * {
font-size: 12px !important
}
}
@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block!important;
}
}
But because the media query is the same – you can combine them to:
@media only screen and (max-width: 767px) {
.av_textblock_section .avia_textblock p * {
font-size: 12px !important
}
.responsive #scroll-top-link {
display: block!important;
}
}
Edit
Actually I think as someone who wanted to help you with the solution I have a certain right to know if and how you solved the problem.
Unfortunately the topic was already closed – but maybe you’ll come back to read this.
This reply has been marked as private.
I removed all css and it did not make the fix in quick css:
@media only screen and (max-width: 767px) {
.av_textblock_section .avia_textblock p * {
font-size: 12px !important
}
@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block!important;
Any other thoughts?
it sound for me – as if you entered a css rule in quick css that is not well formated.
A missing closing bracket e.g. on a media-query rule could be happen easily.
If you can post your quick css – we can see what happens
My guess is based on the fact that on Enfold these setting below are just behind your quick css rules
if there is on top a missing closing bracket – every rule after that has no effect.
.container {width:100%;} .container .av-content-small.units {width:75%; }
.responsive .boxed#top , .responsive.html_boxed.html_header_sticky #header,
.responsive.html_boxed.html_header_transparency #header{ width: 1310px; max-width:90%; }
.responsive .container{ max-width: 1310px; }
#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{color:#404040;background-color:#cfcfcf;font-size:14px;}
#top #header .av-main-nav > li > a{color:#000000;}
#top #header .av-main-nav > li > a .avia-menu-text, #top #header .av-main-nav > li > a .avia-menu-subtext{color: #000000;}
and you see that jordans rule above is part of this enfold options css under the quick css.
if you had a top menu then the activation is done and that little snippet of avia_meta_header is unnecessary:
this you can erase : add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
the css will depend on the position of top menu – this here is for left position:
#header_meta .av-rotator-container {
font-size: 24px !important;
position: relative;
left: 50%;
float: left !important;
transform: translateX(-50%);
top: -10px;
}
.av_secondary_left .sub_menu {
width: 80%;
}
#header_meta span {
font-size: 30px;
}
there is a hook if the sub-menu is present.
– but if we don’t want sub-menu on top we can activate it nevertheless via filter:
add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
add_action('avia_meta_header', function() {
if(is_page(3)){
echo do_shortcode("[ av_headline_rotator before_rotating='' after_rotating='' interval='5' animation='' margin='' margin_sync='true' tag='h2' size='36' align='center' custom_title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' alb_description='' id='' custom_class='' av_uid='av-k1gw6wo0' admin_preview_bg='']
[ av_rotator_item title='today we offer abc' link='' linktarget='' custom_title='' av_uid='av-it587']
[ av_rotator_item title='but the whole week it is' link='' linktarget='' custom_title='' av_uid='av-egknj']
[ av_rotator_item title='⇒ another line to present' link='' linktarget='' custom_title='' av_uid='av-6u493']
[ /av_headline_rotator]");
};
});
a little css to position it:
#header_meta .sub_menu {
font-size: 24px !important;
position: relative;
left: 50%;
float: left !important;
transform: translateX(-50%);
top: 0;
}
#header_meta span {
font-size: 30px;
}
see testpage: https://webers-testseite.de/guenni/datenschutzerklaerung/
Please note: This post does not require an answer by your support. It would be great to be just read, forwarded and thought/discussed about.
VIDEO CONTROL OPTIONS
(It’s not a satisfying solution to modify parent theme PHP files)
With the starting point “video element” in mind there is no satisfying solution to have configurable options for essential video controls when it comes to embed videos on your website (external and self-hosted). Modifying parent theme files always is a workaround as you have to do this again after every theme update. I’d consider this a very urgent theme update to have this controls individually set for each embedded video, as videos on websites is a big issue. Options for shortcodes and the Advanced Layout Builder.
ADVANCED LAYOUT BUILDER <-> CLASSIC EDITOR (SWITCHING FORTH AND BACK)
When starting a page layout with shortcodes in the classic editor I can switch to the Advanced Layout Builder at any time and the layout is visually set up. Switching back to the classic editor deletes the whole page. Can you make that switchable forth and back at any time?
CSS FORMATTING TOO STATIC AND PREDEFINED
As parent theme files should not be modified at all, it would be great to rethink enfold’s CSS concept. In my opinion there are too many “style formats” predefined in the enfold/css folder. Especially the files base.css and layout.css should not contain any font-size, font-style, line-height or color formatting as this should be globally defined from the theme options or the child theme custom css. It will be lots of work to have my custom child theme the way it’s meant to be after a parent theme update. Lots of fiddling and code comparison I really want to avoid…
In general there is no other option than editing this files, because there are so many styles defined, that it would unnecessarily blow up the code when doing overrides in the child theme css or using jQuery functions to add or remove attributes, styles, etc… it always comes to “page flickering” when loaded the first time.
-
This topic was modified 6 years, 5 months ago by
Scorp1.
Ok, I’ve found a great option and have fixed this but want to share!
Instead of the default gallery (very minimal) I used a shortcode to use a masonry gallery instead and have adjusted a bit of css to make it look better, mainly because my client has captions of varying lengths. So all is well and this is done. Thank you :)
figcaption {
text-decoration: none;
font-size: 11px;
line-height: 14px;
font-style: italic;
color: #666 !important;
}
.main_color .container .av-inner-masonry-content {
background: #ebebeb !important;
min-height: 70px !important; /* this makes a nice equal height for short and long descriptions */
}