-
Search Results
-
In reply to: show marker in certain pictures in portfolio grid
Thank you.
I am a bit stumped. I thought it is a quite easy fix, but I run into problems.My idea is to first figure out how to get anything shown on top of the image. Lets say ‘Test’ and then when that works make it so that it only displays when the portfolio item has a certain attribute. But I am already struggling to get “test” to show up.
Here is the code I found to change:
$image = get_the_post_thumbnail( $the_id, $image_size, $image_attrs ); if( ! empty( $image ) ) { $output .= '<div class="av_table_col portfolio-grid-image">'; $output .= "<{$link_markup[0]} data-rel='grid-" . avia_post_grid::$grid . "' class='grid-image avia-hover-fx'>{$custom_overlay} {$image}</{$link_markup[1]}>"; $output .= '</div>'; } $output .= '<footer class="entry-footer"></footer>'; $output .= '</article>'; $output .= '</div>';And here is the code I change it to:
$image = get_the_post_thumbnail($the_id, $image_size, $image_attrs); if (!empty($image)) { $output .= '<div class="av_table_col portfolio-grid-image">'; $output .= "<{$link_markup[0]} data-rel='grid-" . avia_post_grid::$grid . "' class='grid-image avia-hover-fx'>"; $output .= "{$custom_overlay} {$image}"; $output .= "<div class='overlay-text'>test</div>"; // Add this line for the overlay $output .= "</{$link_markup[1]}>"; $output .= '</div>'; } $output .= '<footer class="entry-footer"></footer>'; $output .= '</article>'; $output .= '</div>';I also added the following passage to my style.css
.grid-image { position: relative; display: inline-block; } .grid-image img { display: block; width: 100%; height: auto; } .overlay-text { position: absolute; bottom: 10px; left: 10px; background-color: rgba(255, 255, 255, 0.7); color: #dada21; padding: 5px 10px; border-radius: 5px; font-size: 16px; font-weight: bold; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }Unfortunately I dont get the text to show up.
Where is my mistake?In reply to: Reduction of the font size on mobile devices
Hey reqonsult,
Thank you for the inquiry.
Are you using the Fullscreen Slider element? Try to edit one of the slides, go to the Styling > Font Sizes panel and adjust the Caption Content Font Size and the Caption Title Font Size settings. It’s possible to set a custom font size for different screen sizes.
Best regards,
IsmaelIs it possible to reduce the font size on mobile devices only? We are satisfied with the font size in desktop devices, but some text is partially cut off in the mobile view. Thank you.
In reply to: Menu Items for mobile
Hi,
Try this css instead#top #header_meta .phone-info span { font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 900 !important; color: #000; }After applying the css, please clear your browser cache and check.
Best regards,
MikeIn reply to: Email field in mobile view in a different color
Hey Diana,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#top .main_color input[type='email'] { border-color: #ffffff; background-color: #f6f7f9; color: #1e242f; font-weight: 300; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.Best regards,
MikeIn reply to: Menu Items for mobile
Hi,
When I check now the font size is now 13px, try clearing your browser cache if you use Safari try following these steps for Safari and note step 4 where you will Clear the History.Best regards,
MikeIn reply to: Menu Items for mobile
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#header_meta .phone-info span { font-size: 13px; font-weight: bold; }adjust the font size to suit and after applying the css, please clear your browser cache and check.
Best regards,
MikeI started yet another (my 5th) Enfold web project (happy customer, mainly due to the awesome support that always helps me to tweak the theme). Each time I try to achieve an individual identity for the website and this time I’d like to tweak the main menu.
Basically what I’m trying to achieve is to wrap a ‘transparant box’ around the menu with an adjustable background and font colour. The logo needs to be on the left (with another background colour of that socket) and on the right a CTA (make appointment) with another background colour in that socket (which I guess will be a custom link in the menu using the coloured button option, though the button needs to have the same hight as the rest) . This applies for devices starting from a screen size of tablets. The menu is on top of the content of the page (i.e. a full width slider or image)
See https://drive.google.com/file/d/1twinJeP4c580lVkn9jbqnAKerd4e_bvd/view?usp=sharing for an example and find the url of a live example of another site in the private content.
looking forward to realize another awesome enfold site!
In reply to: 2 times drop down menu in left side bar menu
Hi Mike
I managed to change the font to rift in the burger menu and also could change the font size, so for now it’s good for me and i can go on…
Thank you for all your help!
Greetz Karin
Have a nice weekend!Meine Empfehlung wäre schon eher den Code für die functions.php zu nehmen.
siehe den Endkommentar meinerseits.Da post ids und page ids wohl offenbar bei Enfold mit als Klasse bei html geführt werden sollte es reichen nur diese aufzuführen.
Damit der Selector stärker wird solltest Du noch das html vor die Klasse setzen.
Pass auf, das alle selectoren durch Kommata getrennt sind, nur der letzte in der Reihe erhält kein Komma vor der eröffnenden Klammer.die variablen kannst du natürlich anpassen. Je nachdem, was du ersetzen willst. Die Liste was Enfold da anlegt bezieht sich auf die Einstellungen – siehe unten – die Farben bzw. anderen Werte entsprechen den Styling-Einstellungen
html.html_entry_id_777, html.html_entry_id_778, html.html_entry_id_779 { --enfold-header-color-bg: #eee; --enfold-main-color-bg: #eee; --enfold-footer-color-bg: #eee; --enfold-alternate-color-bg2: #eee; --enfold-header-color-bg2: #eee; --enfold-socket-color-bg: #eee; --enfold-socket-color-border: #eee; }Beispiel-Liste was alles von Enfold als variablen geführt werden.
:root { --enfold-socket-color-bg:#333333; --enfold-socket-color-bg2:#555555; --enfold-socket-color-primary:#ffffff; --enfold-socket-color-secondary:#aaaaaa; --enfold-socket-color-color:#eeeeee; --enfold-socket-color-meta:#999999; --enfold-socket-color-heading:#ffffff; --enfold-socket-color-border:#444444; --enfold-socket-color-constant-font:#333333; --enfold-socket-color-button-border:#dddddd; --enfold-socket-color-button-border2:#888888; --enfold-socket-color-iconlist:#333333; --enfold-socket-color-timeline:#333333; --enfold-socket-color-timeline-date:#000000; --enfold-socket-color-masonry:#444444; --enfold-socket-color-stripe:#ffffff; --enfold-socket-color-stripe2:#ffffff; --enfold-socket-color-stripe2nd:#bbbbbb; --enfold-socket-color-button-font:#333333; --enfold-footer-color-bg:#222222; --enfold-footer-color-bg2:#333333; --enfold-footer-color-primary:#ffffff; --enfold-footer-color-secondary:#aaaaaa; --enfold-footer-color-color:#dddddd; --enfold-footer-color-meta:#919191; --enfold-footer-color-heading:#919191; --enfold-footer-color-border:#444444; --enfold-footer-color-constant-font:#222222; --enfold-footer-color-button-border:#dddddd; --enfold-footer-color-button-border2:#888888; --enfold-footer-color-iconlist:#333333; --enfold-footer-color-timeline:#333333; --enfold-footer-color-timeline-date:#000000; --enfold-footer-color-masonry:#222222; --enfold-footer-color-stripe:#ffffff; --enfold-footer-color-stripe2:#ffffff; --enfold-footer-color-stripe2nd:#bbbbbb; --enfold-footer-color-button-font:#222222; --enfold-alternate-color-bg:#fcfcfc; --enfold-alternate-color-bg2:#ffffff; --enfold-alternate-color-primary:#719430; --enfold-alternate-color-secondary:#83a83d; --enfold-alternate-color-color:#666666; --enfold-alternate-color-meta:#8f8f8f; --enfold-alternate-color-heading:#222222; --enfold-alternate-color-border:#e1e1e1; --enfold-alternate-color-constant-font:#ffffff; --enfold-alternate-color-button-border:#507210; --enfold-alternate-color-button-border2:#61861b; --enfold-alternate-color-iconlist:#d0d0d0; --enfold-alternate-color-timeline:#d0d0d0; --enfold-alternate-color-timeline-date:#a0a0a0; --enfold-alternate-color-masonry:#eeeeee; --enfold-alternate-color-stripe:#93b652; --enfold-alternate-color-stripe2:#82a541; --enfold-alternate-color-stripe2nd:#94b94e; --enfold-alternate-color-button-font:#ffffff; --enfold-main-color-bg:#ffffff; --enfold-main-color-bg2:#fcfcfc; --enfold-main-color-primary:#719430; --enfold-main-color-secondary:#83a83d; --enfold-main-color-color:#666666; --enfold-main-color-meta:#919191; --enfold-main-color-heading:#222222; --enfold-main-color-border:#e1e1e1; --enfold-main-color-constant-font:#ffffff; --enfold-main-color-button-border:#507210; --enfold-main-color-button-border2:#61861b; --enfold-main-color-iconlist:#d0d0d0; --enfold-main-color-timeline:#d0d0d0; --enfold-main-color-timeline-date:#a0a0a0; --enfold-main-color-masonry:#ebebeb; --enfold-main-color-stripe:#93b652; --enfold-main-color-stripe2:#82a541; --enfold-main-color-stripe2nd:#94b94e; --enfold-main-color-button-font:#ffffff; --enfold-header-color-bg:#ffffff; --enfold-header-color-bg2:#f8f8f8; --enfold-header-color-primary:#719430; --enfold-header-color-secondary:#444444; --enfold-header-color-color:#333333; --enfold-header-color-meta:#808080; --enfold-header-color-heading:#000000; --enfold-header-color-border:#e1e1e1; --enfold-header-color-constant-font:#ffffff; --enfold-header-color-button-border:#507210; --enfold-header-color-button-border2:#222222; --enfold-header-color-iconlist:#d0d0d0; --enfold-header-color-timeline:#d0d0d0; --enfold-header-color-timeline-date:#a0a0a0; --enfold-header-color-masonry:#e7e7e7; --enfold-header-color-stripe:#93b652; --enfold-header-color-stripe2:#82a541; --enfold-header-color-stripe2nd:#555555; --enfold-header-color-button-font:#ffffff; --enfold-header_burger_color:inherit; --enfold-header_replacement_menu_color:inherit; --enfold-header_replacement_menu_hover_color:inherit; --enfold-font-family-theme-body:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; --enfold-font-size-theme-content:13px; --enfold-font-size-theme-h1:34px; --enfold-font-size-theme-h2:28px; --enfold-font-size-theme-h3:20px; --enfold-font-size-theme-h4:18px; --enfold-font-size-theme-h5:16px; --enfold-font-size-theme-h6:14px; --enfold-font-size-content-font:18px }In reply to: Slider at Header truncates text on a cell phone.
Hi,
Thank you for the info.
We edited the contact page and set the Styling > Font Sizes > Caption Title Font Size to 18px for mobile devices. The default custom size is 60px. You can also adjust the size for desktop and tablet in portrait/landscape modes. The font size should respond automatically if the Font Size default is set to the initial option, but since it’s set to a custom size (60px), you have to manually define the font size for all screen sizes. Please check the screenshot in the private field.
Best regards,
IsmaelIn reply to: Slider at Header truncates text on a cell phone.
HI.
Adjusting the font size affects the Desktop/Laptop adversely as well as the Cell mode.
This reply does not address why updates to the theme disrupted cell phone layouts.
Q: how do we retain our Desktop/Laptop layouts while regaining an elegant look for the cell mode in responsive Design?
Example pages:
https://www.stonecrafters.rocks/
https://www.stonecrafters.rocks/services/
https://www.stonecrafters.rocks/contact/
NOTE: we have not altered out layout since the initial rebuild of the site using Enfold theme. This site used to look perfect in responsive design.
Please advise. Note: I shared login credentials and you have permission to enter the site.
In reply to: Custom Fonts
Hey Mike,
I decided to use a different font family (Open Sans) for mobile and tablet and added this code:
@media only screen and (max-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { h1, h2, h3, h4, h5, h6 { font-family: 'Open-Sans', sans-serif; font-style: italic; } }Funnily enough, the Calibri is now displayed as the headline on the iPhone. And I can’t find the reference to the code why the browser finally understands that it should use “Calibri”.
So why it works now, I have no idea, but it works ;)Unfortunately, Calibri or Open Sans are not displayed on the tablet in Safari. I don’t understand this again…
And I also adjusted the .av-special-heading using CSS:
#top .av-special-heading .av-subheading.av-subheading_above { font-size: 32px !important; font-family: 'calibri' !important; color: #ff0044 !important; }Unfortunately the special heading font is not displayed on mobile in Safari… sorry i opened such a bottomless pit …
I hope your team finds a solution to help me out :’)
In reply to: Socket menue on left side
Hi,
Your screenshot looks like the socket is full width, but your site is smaller, so I recommend making the area full width and making the font smaller so there is enough room..responsive #socket > .container { max-width: 100%; font-size: 18px; } #socket .copyright { float: right; padding-left: 20px; line-height: 24px; }and then move the “title” on the right side over some in the css for it, currently you have:
#footer-title { font-size: 38px; font-family: zen-kaku-gothic-new; color: #000; font-weight: bold; float: right; top: -38px; position: relative; left: -15%; }change to:
#footer-title { font-size: 38px; font-family: zen-kaku-gothic-new; color: #000; font-weight: bold; float: right; top: -38px; position: relative; left: -5%; }Best regards,
MikeIn reply to: Non-uniform layout for multiple paragraphs in tables
Hey reqonsult,
Thank you for the link to your site, this is because the first paragraph is in the “td” and the others are in a “p” which has more specialty.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#top .all_colors td p { font-size: 13px; font-weight: 400; }After applying the css, please clear your browser cache and check.
Best regards,
MikeHello, on this subpage of our blog we have noticed that if there are multiple paragraphs or separate text units in the tables, the layout is different from the second paragraph onwards (please see attached screenshot). The font and font size are not the same as in the first paragraph.
We have of course made sure that all the text is added without being formatted. This cannot be the problem here.
How can this be solved? Many thanks for your support
Hey ballindigital,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#header_meta.av_extra_header_active > .container { display: flex; justify-content: center; } .phone-info { font-size: 14px; }Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.Best regards,
MikeIn reply to: Blog font size
Hey lauragrashoff,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field and adjust the font sizes to suit:#top.single-post #wrap_all #main .container_wrap_first h1 { font-size: 60px; } #top.single-post #wrap_all #main .container_wrap_first h2 { font-size: 30px; } #top.single-post #wrap_all #main .container_wrap_first p { font-size: 20px; }After applying the css, please clear your browser cache and check.
Best regards,
MikeTopic: Blog font size
Hey,
ich würde gerne andere Schriftgrößen für die Texte in meinen Blog-Einträgen verändern. Der Content der restlichen Website soll sich dabei nicht verändern.
Ich würde gerne die H1, H2 und den Fließtext in anderen Schriftgrößen darstellen.
Habt ihr einen CSS Code für mich, um das umzusetzen?Vielen Dank!
Hi Guenni,
i will do that now. Sould i keep or delete:/**** Feld Definitionen ********/ #top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text { grid-area: feld1 } /*** depends on if there is a link on the image or not ****/ #top .avia_textblock.img-with-caption-right .wp-caption > *:first-child { grid-area: feld2 } #top .avia_textblock.img-with-caption-right .wp-caption { border: 1px solid #cccccc; width: 100% !important; margin: 0; display: grid; grid-auto-rows: auto; grid-template-columns: 1fr 1fr; grid-template-areas: "feld2 feld1"; align-items: flex-end; } #top .avia_textblock.img-with-caption-right .wp-caption img { padding: 0 !important; } #top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text { display: block ; color: #222222; font-style: normal; font-size: 18px; font-family: inherit; width: 100%; padding: 0 1em; text-align: left; } .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text p { margin: 0 !important; } /*** Abstang über dem Rahmen ******/ #top .avia_textblock.img-with-caption-right .wp-caption img { margin-top: 70px } /**** for responsive case maybe:*****/ @media only screen and (min-width: 990px) and (max-width: 1051px) { #top .avia_textblock.img-with-caption-right .wp-caption { grid-template-columns: 1fr; grid-template-areas: "feld2" "feld1" !important; } }for css or just add your new css?
kind regards
JakIn reply to: Slider at Header truncates text on a cell phone.
Hi,
Thank you for the inquiry.
Have you tried adjusting the font sizes of the captions in the Styling > Font Sizes panel for each slide? It’s possible to set the font size for different screen sizes.
Best regards,
IsmaelBut The font does not seem to load completely when only the Latin fonts are used. At least it does not seem to load as slowly as the file size of the upload would suggest.
In reply to: How can i add a row with text above an image?
on the alb itself you got on styling options all you need : even the font color – and font-size.
The trick is that you can now use this class with different settings (backgrounds, font sizes and colours).
By the way – you are planning to use a chineese translation ? I do not really know why you are using such a performance hungry font for your page. I would at least set the English sentences in a similar Latin font.
For example from your page the comparison of zenkakugothicnew to (on Google Fonts) Hanken Grotesk:
In reply to: How to add a second title to the footer?
Hey Jak73,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#footer-title { font-size: 38px; font-weight: bold; font-family: arial; color: #222; float: right; top: -38px; position: relative; left: -10%; }Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:
function custom_script() { ?> <script> document.addEventListener("DOMContentLoaded", function() { var titleText = document.querySelector("h1.av-special-heading-tag").textContent; var footerTitleDiv = document.createElement("div"); footerTitleDiv.id = "footer-title"; footerTitleDiv.textContent = titleText; document.getElementById("socket").appendChild(footerTitleDiv); }); </script> <?php } add_action( 'wp_footer', 'custom_script', 99 );This is the expected result:
Best regards,
MikeHi,
i would like to add my title text to the footer, which should be formated in the following way (please see screenshot):
font-size: 38px;
font-weight: bold;
font-family: arial;
color: #222;
How can i do that?
kind regards JakIn reply to: Masonry layout
Hello,
the only css i have concerning Masonry are :` .main_color .container .av-inner-masonry-content,
#top .main_color .container .av-masonry-load-more,
#top .main_color .container .av-masonry-sort,
.main_color .container .av-masonry-entry .avia-arrow {
background-color: rgba(248, 248, 248, 0.6);
}
.av-fixed-size .av-masonry-entry .av-inner-masonry-content,
.av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
text-align:center;
padding: 0 10px 0 10px;
font-size: 16px;
font-weight:700;}
.av-inner-masonry {
box-shadow:10px 10px 5px 1px rgba(0,0,0,0.3);
}`I removed it and it changed nothing..
Concerning the script, it doesn’t change anything too.
In reply to: Add button into header under Social Icons
well the hook : ava_main_header is just under the header_meta – it is the first child inside header_main.
Position is perfect. The rest is styling and positioning.you can create a widget area there – or insert directly just your button:
f.e.:function custom_func() { ?> <div class="spezial"><div class="avia-button-wrap avia-button-right"><a href="#" class="avia-button av-link-btn avia-icon_select-yes-left-icon avia-size-medium avia-position-center avia-color-theme-color"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="fontelico"></span><span class="avia_iconbox_title">call to action …</span></a></div></div> <?php } add_action('ava_main_header' , 'custom_func');For a couple of days, and suddenly without actively updating anything from our side, the pages started to look odd and layout, mostly font size was wrong.
This is still as you can see on the website.
Do you have any idea why the English page is acting differently than the German one? Any recommendation how to fix this or find the source of this?
Topic: Notification Element
Hi,
I’m using an notification element for links (cause I think they look good as a highlight).
What does cookie_lifetime=’60’ mean and can I delete it?<a href="#verlustangsttest">[av_notification title='Test' icon_select='yes' icon='ue81d' font='entypo-fontello' close_btn='' cookie_lifetime='60' size='normal' color='custom' custom_bg='#ECE5DB' gradient_bg_direction='vertical' gradient_bg_1='#000000' gradient_bg_2='#ffffff' gradient_bg_3='' custom_font='#434F5D' nb_border='' nb_border_width='' nb_border_width_sync='true' nb_border_color='' border='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' sonar_effect_effect='shadow_hover_perm' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg=''] <strong>Teste dich: Wie stark ist deine Verlustangst und dein Klammerverhalten?</strong> [/av_notification]</a>Best regards
