-
Search Results
-
In reply to: Enfold Header Font Size and Position
HI
Thank you for the reply.
An example page is my latest post here: https://blgenvironmental.com/sustainable-landscape-design-orlando/.
Note: Changing the H3 Tag does not affect the page here. I set it for 9px as a visual test for each screen setting. I am developing in Firefox on a desktop. https://tinyurl.com/29nlpg6v
The default says that it is 20px. I can visually tell by eyeballing the h2 tag and te h3 tag right underneath that these are both the same font size and not 28 px h2 and 20 px h3 respectively. https://tinyurl.com/24jgxgok
I’m resetting the h3 back to default after the test. Can you please enter the dashboard with the info that I provided at the outset of this ticket?
This setting also does not have an affect: https://tinyurl.com/2ycxfogv
Side note: I do not see the panel for font position: left, right, center, justify. Everything appears to be set to justify somewhere.
In reply to: Homepage Not Full Width
Hi,
Thank you for the info.
The site is broken because there is an invalid css rule in the Quick CSS field — a closing curly brace is missing.
/* -- Change font size in Main Menu Bar -- */ #header_main .avia-menu-text { font-size: 17px;We corrected the css code and set the Maximum Container Width to 1310px. The site should be displaying correctly now.
Best regards,
IsmaelTopic: Custom fontello icon issues
Hi there! It’s been a while but I’m back with some more issues regarding the centering of shortcode icons in an Avia text box, along with another issue with adding a custom fontello icon.
I will note: with all of these issues, I’ve cleared cache on the website, on my browser, used incognito windows and other browsers to cross check and troubleshoot.
Overview: I’ve uploaded an IMDB Fontello Icon as outlined in the Enfold documentation. I want to be able to use this icon in both the header & socket as well as within the Shortcode Icons options to use on pages within the site using the text block editor.
I have inserted the following CSS in the Quick CSS theme options section:
#top .av_textblock_section .av_font_icon { display: inline-block; float: none; }Issue #1 with a custom fontello icon:
When using in a standard text box and inserting the icons using shortcode, the icons do center align but they are staggered (the custom icon is lower than the Instagram icon that is already in there). See the link in the Private Content and scroll down to the bottom to see the result of that.Issue #2:
Header & footer icons are also misaligned, see screenshot link below.
As a result of changing the size of the icons in the header and footer as well, the mouseovers are off (on the Instagram specifically, the circle mouseover is not centering around the icon). Best way to see this is in the live link I’ve provided as well as the screenshots in the Private Content!Thank so much in advance!
In reply to: Enfold Header Font Size and Position
Hi,
The font size of the heading elements for different screen sizes can also be adjusted in Enfold > General Styling > Typography as shown in the screenshot below.
Best regards,
IsmaelMy Enfold post font size and position look terrible to the client. The H2 and H3 tags look the same size, everything is justified. They would like to know where to edit this to be font position left. Or at least have the controls. The GUI controls under Advanced Styling do not seem to work. Adding custom css does not override,’
Please instruct me on how to edit each H tag from1 to 6 in font size and the option to change from justify to position left for each element including main text font.
The font sizes for the <H1> and <H2> tags are much too large for my taste on a smartphone. How can I make them smaller without changing the font sizes for the computer screen?
In reply to: instagram icon beside navigation in normal colours
Hi,
Thank you for the update.
If you want to revert to using the default icon, please remove the previous modifications, then add this css code to enlarge the instagram icon and adjust the color:
#top #wrap_all .social_bookmarks .social_bookmarks_instagram a { background: linear-gradient(44deg, #ef1a88, #e6683c, #fa991f, #ee166c, #bc1888); -webkit-text-fill-color: transparent; background-clip: text; font-size: 50px !important; width: 100%; height: 100%; line-height: 80px; } .responsive #top #header .main_menu .social_bookmarks { margin-top: -40px !important; overflow: visible; }
Best regards,
Ismaelto have the title you only have to make it visible by:
#top .av-burger-menu-main .avia_hidden_link_text { display: inline; font-size: 20px; line-height: 0; color: var(--enfold-header-color-meta); margin-left: 5px !important; position: relative; top: 2px; /*=== just to center horizontally - adjust to your needs ===*/ }but for your header layout “Hamburger menu icon left, logo centered, search icon right” i would start from a different header layout – not the header centered – menü below .
btw. some topics under yours there is the same title of the topic “Hamburger menu icon left, logo centered, search icon right”
In reply to: TABS
I moved the tab section out of the color box, so I dont need to edit tab colors anymore, but I do need to edit font size and colors for :
Lonestar Roofing and Restoration LLC
Hours of Operation
Follow us on Facebook
Service Areas:Which are added via widget in the new footer page I am creating.
In reply to: TABS
I need to be able to edit all the css on the footer page, change font colors/sizes, background colors of the tabs etc.
In reply to: instagram icon beside navigation in normal colours
so because – the original insta logo is to complex to insert it as svg file to the social media icons.
I would place the normal instagram icon via font-icon !
and replace that by css .maybe you upload two versions of that logo:
and for hover style:
then to quick css:
#top #wrap_all .av-social-link-instagram a:focus, #top #wrap_all .av-social-link-instagram:hover a { color: unset; background-color: unset; } .social_bookmarks_instagram a { font-size:0 !important } .social_bookmarks_instagram a:before { content:""; background-image:url(/wp-content/uploads/Instagram_Glyph_Gradient.png); background-size:contain; display:inline-block; width:inherit; height:inherit; border-radius: 10px; background-position:center center; } .social_bookmarks_instagram:hover a:before { background-image:url(/wp-content/uploads/Instagram_Glyph_Gradient_invers.png); border-radius: 10px }see (the first in the row) https://basis.webers-testseite.de/
the second icon on the right is the svg icon (with its trouble to use the mask (or clipPath)In reply to: Change font size of Content Slider text on mobile
Hey Tanja,
You can change the font size directly in the editor. The toolbar is located just above the content.
Best regards,
RikardWhat is the Custom CSS to change the font size of text in the Content Slider?
These don’t seem to work:
.avia_textblock h2 {
font-size: 24px!important;
}
.slide-entry-excerpt entry-content h2 {
font-size: 24px!important;
}In reply to: instagram icon beside navigation in normal colours
Hi Ismael,
thanks a lot!
I put the following size inbetween, but nothing changed.width: 50px !important;
height: 50px !important;
font-size: 22px !important;Is there a way to make the symbol a little bit bigger?
Many regards rixi
Hi,
Thank you for the update.
Add the following code to your functions.php file to display an instagram icon next to the mobile menu:
add_action( 'ava_inside_main_menu', function() { $instagram_url = 'https://www.instagram.com/yourusername/'; echo '<a class="av-custom-header-icon" href="' . esc_url( $instagram_url ) . '" target="_blank" rel="noopener noreferrer">'; echo do_shortcode('[av_font_icon icon="instagram" font="svg_entypo-fontello" size="30px" av_uid="av-mhvfocn7"]'); echo '</a>'; });Then add this css code:
.av-custom-header-icon { position: absolute; left: 0; top: 20px; display: none; } @media (max-width: 768px) { .av-custom-header-icon { display: inline-block; } }Best regards,
IsmaelIn reply to: Add icons to a fullwidth submenu
see f.e. a test-page: https://webers-testseite.de/clippy-2/
( i set a custom ID to the sub-menu: submenu-with-icons )#submenu-with-icons .menu-item a .avia-menu-text:before { font-family: entypo-fontello; display: inline-block; position: relative; color: inherit; margin-right: 10px; line-height: inherit; font-size: 1.3rem; top: 2px; /*** just a correction if font-size is bigger than text ***/ } #submenu-with-icons .menu-item:nth-child(1) a .avia-menu-text:before { content: "\e82a"; } #submenu-with-icons .menu-item:nth-child(2) a .avia-menu-text:before { content: "\e82b"; }Thanks sir,
1. I know i cna make my own custome HTML,but that is why I asked about the refund. Making that much custom HTML defeats the purpose of having a template.
2. I have many test pages. They all do the same thing. login info below.
3-4. I did this as I stated. I appended the customer copyright with your shortcode. It’s there now. Has no effect.
5. I am sorry but I need a higher level of support. I can’t post screnshots here so I am not going to waste my time usng workarounds for support tickets to get you screenshots. If you want to email me directly I will give you screenshots. You don’t need this to check the footer.php file. Youwill see at the end it has this code: “‘ id=’scroll-top-link’ class=’avia-svg-icon avia-font-svg_entypo-fontello’ <?php echo $icon_top[‘attr’]; ?> tabindex=’-1′ aria-hidden=’true’>
<?php echo $icon_top[‘svg’]; ?>
<span class=”avia_hidden_link_text”><?php echo $icon_title; ?></span>
<div id=”fb-root”></div>”
6. what change was this supposed to have? I don’t see any change from this.
7. You can recreate this. Make color section rox. Add bg image. Next add columns to fill row. Pick any column and add a bg-image to the column. It displays the column under the row and not on top of it. When you modify the higlight option it pushed the bg image off the bottom of the screen.
8. You can check my home page. I have two independent color sections both with text blocks that have only hedings. The same exact headings. Yet it shows two differnt things. How is that even possible? If it won’t display the same code twice on one page I am noit sure what I can do.nearly every element I have to make custom inline because the global options to not seem to work. I really think I need to find a new theme. It’s not about getting used to it, right? It’s about this theme taking me more time to configure than it would be to just write the site from scratch, because the options are severely limited. I did not even know they made themes templates this limited.
Take a look. Tell me what you think after you see for yourself. Hopefully you can see what is wrong because I am wasting so much time with this theme I could have built three sites. Please sir. I made a mistake. I think it would be best to offer a refund as you do not have the resources to help me resolve this in a way that will work for it’s intended purpose. I can’t even modify image sizes or blog posts. It’s very frustrating. It’s my fault for buying the theme because I did not know it was missing the normal options you find in other themes. It’s great for your purpose, but I need a theme I can customize.
I can buy another theme and same myself over 70% of the labor costs your theme requires for basic styles. Let me know what you think. I am not trying to give you a hard time, I doubt you will fix any of this stuff and the answer will be the same -“make custome html”. I am just trying to be realistic. I feel like I lost a lot of money using this theme. Please help me cut my losses and move on.
Hey JennyGr,
We will need to login to your site to examine your H1 font sizes, there are a couple of places to change this.
You could view the Advised > Styling , if you have multiple H1 styles there the bottom one will take preference, removing all may help. If you have custom css, search for all H1 css code and remove it. These are good starting points. For your /visit-us/openday/ page what font size do you want the H1 “Open Days” to be? Is this an example that you ment?Best regards,
MikeHi I made some adjustments to font styling which I am struggling to amend:
I seem to remember making changes, not only in the Theme styling options, but also in custom CSS, but now would like to revert those changes in the custom CSS so I can more easily make any changes in the main Theme styling options.
The changes I am wanting to adjust were to do with heading sizes. I made the main H1 heading very large (too large really)
I think I also made some changes to relative size of fonts which made things like my button text and sidebar navigation terxt too small. But can’t remeber where I made this change. I had to add some custom css to get the sidebar navigation to show larger.
I”d like to roll back the changes I made so I can simply edit font size in the Theme styling options
In reply to: Grey line at the bottom of an image [solved]
see my edit above – posting the same time
try:
#top picture.avia_image { display: flex !important; }and maybe you like to have more contrast on hovering the images:
#top a.avia_image .av-image-caption-overlay-center { position: absolute; top: 50%; transform: translateY(-50%); display: grid; margin: 5px 25px; font-size: 1.2em } #top a.avia_image:hover .av-image-caption-overlay-center { color: #940000; background-color: rgba(255,255,255,0.6); backdrop-filter: blur(4px); } #top .av-image-caption-overlay-center p { margin: 10px 0 !important; }In reply to: Using CSS in header Central without Logo
the filter avf_logo_subtext is nice to have both Logo Image and Text
try instead:
function use_text_logo_only($logo){ $link = apply_filters( 'avf_logo_link', home_url( '/' ) ); $logo_tag = "h1"; $logo_heading = "Wayne Anderson"; $alt = get_bloginfo( 'name' ); $title = get_bloginfo( 'name' ); $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$title.'"><'.$logo_tag.'>' .$logo_heading.'</'.$logo_tag.'></a>'; return $logo; } add_filter('avf_logo_final_output','use_text_logo_only');and on quick css:
(maybe with your header setting – you had to adjust the css a little bit )#top .logo.text-logo { display: flex; justify-content: left; align-items: center; width: auto; } #top .logo.text-logo h1 { margin: 0 !important; font-size: 30px; /* adjust to your needs */ text-transform: uppercase !important; }PS: if you like to have different alt and title tags replace in the snippet above with hardcoded strings
$alt = "your alt attribute"; $title = "your title attribute";and if you do not like to have a h1 – just replace to a different tag ( h2, div, span etc. ) but then you had to adjust the css to that tag
see example page: https://webers-testseite.de/background-video/
In reply to: Upper Menu size
Hi,
link : https://pc-lab.fr/?bypass_code=FmUELDTcVMozUyFII’m refering to the small bar on top of the normal menu bar.
The menu item, “FAIRE UN DON“, as set in the secondary menu parameters should be coloured, and the “NOUS REJOINDRE” should be outlined.
Moreover, I’d like to try to increase their font size.
Hope I’m more clear.
BR
In reply to: Upper Menu size
Hi,
Please try the following in Quick CSS under Enfold->General Styling:
#header_meta { height: 50px; min-height: 50px; } .phone-info { font-size: 16px; }Best regards,
RikardIn reply to: Upper Menu size
OK seen, thanks,
But…I do not see where to make it bigger (higher) and increase the font size.
BrJM
In reply to: Blog Overview – Image left, copy right
Hi,
Thank you for the info.
We adjusted the code in the Quick CSS field a bit. It should be working correctly now.
@media only screen and (min-width: 769px) { /* Add your Desktop Styles here */ #top .fullsize .template-blog .big-preview { padding: 0 0 10px 0; width: 40%; } .av-alb-blogposts .post-entry { display: block; } .av-alb-blogposts .big-preview.single-big a { height: 100%; } .av-alb-blogposts .big-preview.single-big a img { object-fit: contain; } #top .fullsize .template-blog .post-title { text-align: left; font-size: 30px; padding: 15px 0; max-width: 800px; margin: 0 auto; } #top .fullsize .template-blog .post-meta-infos { text-align: left; } #top .fullsize .template-blog .post .entry-content-wrapper { width: 60%; float: left; } #top .fullsize .template-blog .blog-meta { display: none; } #top .fullsize .template-blog .big-preview { padding: 0 0 10px 0; width: calc(40% - 50px); float: left; margin-right: 50px; min-height: 200px; } } @media only screen and (min-width: 989px) { #top .fullsize .template-blog .big-preview img { min-width: 494px; } }
Best regards,
IsmaelTopic: Upper Menu size
Hi folks,
i’m looking how to have the currently small upper menu bar bigger and its font also. I mean the secondary menu bar.
I don’t see where it is.
ThanksHave a nice day
JM
In reply to: Sektion und Rasterzeilen reagieren nicht
In reply to: Sektion und Rasterzeilen reagieren nicht
In reply to: Edit sub-sub menu
Hi,
Thank you for the update.
Adjusting the line spacing of the text doesn’t seem to make a difference on our end, but we’re using a relatively small screen, which might be the reason. If you want to adjust the font size and also limit the height of the mega menu images, try this css code:
#top #header .avia_mega_div > .sub-menu > li > ul > li a .avia-menu-text { line-height: 10px; font-size: 10px; } #top #wrap_all .avia_mega_div img { height: 64px; object-fit: cover; width: 100%; }Result:
Best regards,
IsmaelIn reply to: Edit sub-sub menu
