I am trying to remove the border in table and increase the font size and weight. I created a custom class to change background color (I would rather have it transparent), and the font weight is only effecting the first row. Please help with:
1. Eliminating border for the custom class (we are using a different table elsewhere)
2. Change background color to transparent
3. Increase font size & weight for all content in table
Thank you!
I’ve tried multiple layout options with columns as well as various Quick CSS (and my own variations) to try to get the icon list centred within a page.
I’ve had varying success as it doesn’t appear to ‘behave’ (being centred) in the same way as other columns on the same page are. I can get it centred on a computer’s browser but text was truncated on smaller screens. Using some CSS from another related topic I was able to reduce font size for smaller screens and avoid the truncation of text but I’m left with the entire Icon List being left-aligned on some mobile devices, particularly iPhone 6 landscape.
I would like to have the Icon List centred within a page on all devices (without text being chopped/truncated).
Current attempt to rectify this issue has led me to use an odd layout, different to the rest of the page elements: https://dl.dropboxusercontent.com/u/51435787/radio-layout.png
… as well as the following Quick CSS:
/* Repair truncated text in SC and FB icon links */
@media only screen and (max-width: 660px) {
.avia-icon-list .iconlist_title { font-size: 16px !important; }
}
.iconbox .entry-content-header {
text-align: center;
}
.iconbox .entry-content-header * {
float: none;
display: inline;
}
Could someone assist in resolving this, please? Many thanks for any info.
if you like to have icons from fontello font (third list with custom class “otherlistpoint”) :
.otherlistpoint li:before {
color: #090;
content: "\e871";
font-family: entypo-fontello;
font-size: 25px;
margin-left: -12px;
padding-right: 5px;
position: relative;
top: 5px;
}
the icon shortcode you can see : https://kriesi.at/support/topic/entypo-fontello-icons-unicode-ue-number/
but on css rules you have to get rid of the “u” so see example from
\ue871 will go to : \e871
-
This reply was modified 10 years, 2 months ago by
Guenni007.
look here: http://webers-testseite.de/enf02/2016/02/16/bullits/
what is the difference (these are two text elements with unorderd list inside.
the last alb element i gave a class : “noliststyletype”
The thing is that list style type belongs to the text (and text color)
so i set the list style type to none ! and ad via before a new content ( a list point)
This is now a new element and can be selected
.noliststyletype li:before {
color: #900;
content: "•";
font-size: 25px;
margin-left: -12px;
padding-right: 5px;
position: relative;
top: 5px;
}
.noliststyletype li {
list-style-type: none;
}
-
This reply was modified 10 years, 2 months ago by
Guenni007.
Hi! Same issue here, but with another plugin / shortcode.
Quoting @nontrepreneur
to put it different words independent from any plugins – how can I wrap a shortcode around elements in the Layout Editor
If shortcode wrap is inserted directly in the debug window, it works. But if any ALB element is edited, the shortcodes are automatically wrapped by Enfold [av_textblock] … [/av_textblock].
Making it clearer, suppose we need to wrap a shortcode in a page with a Special Heading. The debug window will be like:
[av_heading heading='My Heading tag='h1' style='' size='' subheading_active='' subheading_size='15' padding='10' color='' custom_font='' custom_class=''][/av_heading]
Then, we can wrap a shortcode around it directly in debug window:
[my_shortcode]
[av_heading heading='My Title' tag='h1' style='' size='' subheading_active='' subheading_size='15' padding='10' color='' custom_font='' custom_class=''][/av_heading]
[/my_shortcode]
If page is updated, it is saved exactly like that and everything works fine.
But, if we edit the Special Heading and save, the debug window will show:
[av_textblock size='' font_color='' color='']
[my_shortcode]
[/av_textblock]
[av_heading heading='My Title2' tag='h1' style='' size='' subheading_active='' subheading_size='15' padding='10' color='' custom_font='' custom_class=''][/av_heading]
[av_textblock size='' font_color='' color='']
[/my_shortcode]
[/av_textblock]
In my case, that breaks the [my_shortcode] wrap processing. The same happens if inserted in Code Blocks.
This way, is there any way to prevent ALB from changing the debug window code?
Thanks!
Hi Lauren!
Please add following code to Quick CSS
.iconbox_content_container {
font-size: 20px;
}
Regards,
Yigit
Hello,
Is there some code I can put in the settings to make the font size of the text in all of the icon boxes size 20?
Thank you,
Lauren
Hi Pas7o!
Please add following code to Quick CSS
.avia-table td {
font-size: 20px;
}
If that does not help, please post the link to your page where you have your table
Best regards,
Yigit
hi, i use the item table for my website. it’s possible have a css code for have the text automatically in 20px? thanks
URL: http://www.sumason.co.uk
Hi there,
I need a caption in Easy Slider BELOW the images, not as overlay.
I found Vinnies’s answer (see copied code below), inserted it into quick css – but nothing changes.
I also would need the font size only 11px and all in lower case & italic.
Please could you help? Thanks
/*Caption below image gallery*/
.avia-slideshow-inner, .avia-slideshow{overflow: visible!important;}
.avia-caption {
bottom: auto!important;
top:100%!important;
left:0!important;
padding:0!important
}
OK – so I am using the following code:
@font-face {
font-family: Aller;
src: url(‘http://scotiafishing.com/wp-content/themes/enfold/fonts/Aller_Rg.ttf’);
}
@font-face {
font-family: Aller_Light;
src: url(‘http://scotiafishing.com/wp-content/themes/enfold/fonts/aller_it-webfont.ttf’);
}
body { font-family: ‘Aller’, sans-serif!important; }
.home_statement p{
width:90%!important;
font-family: ‘Aller_Light’, sans-serif!important;
margin: 0 auto;
font-size:18px;
line-height:30px;
text-align:center !important;
}
I uploaded the fonts to the font folder.
The normal body font is working fine, but “Aller_Light” in .home_statement will not work, no matter what I do! Now if I comment out the @font-face declaration of both, Aller still works but Aller_Light still does not. Could it be that I declared them somewhere else, not in my custom css file?
I have been working on it for hours!
Hey Su!
Please do so and let us know!
You could also use font resizers. You could implement something like that and show font resizing options only on mobile.
Best regards,
Yigit
Hey!
Yes, you’re right. Please replace the code with this:
.togglecontainer:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
This code fixed the issue on our end. :)
Cheers!
Ismael
Hi Vinnie,
I understand it will be a single drop down menu, but the structure is not clear, because the font size and weight are all the same.
is there a way to customised this?
If you could refer to the visual I sent you, the page structure on the drop down menu is more clear. Meaning: the parent page is BOLD and the sub page is REGULAR WEIGHT.
hope this make sense..
You’re right, I forgot to put </p> tag at the end, but when I do, it doesn’t fix anything.
Like this:
I have put this code (with </p> tag)
<p style="text-align: center; font-size:20px;">میتوانید برای هر نوع نمایشگر<br />با هر ابعادی<br />تبلیغات و اطلاعات خود را طراحی کنید<br/></p>
But I can not see the result in the web page!
It seems if I use any html codes in the text field, it will not be shown. (actually I need to align texts in the center and there is no way in Layerslider to do that without using html codes)
Thanks in advance!
Hi Paul!
Seems like you forgot to close a curly bracket – http://i.imgur.com/FzuVicI.png. Custom CSS is not being applied. Please fix the issue and try using px for font-size value. If you need help, please create a temporary admin login and post it here privately so we can look into it
Cheers!
Yigit
Hello again,
sorry, but i’ve got now the problem with changing the font-size now:),
it funktion’s in the debugger,
.main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even) {
color: #919191;
font-size: 80%;
https://www.dropbox.com/s/d1yie25sz79600m/Screenshot%202016-02-15%2017.59.31.png?dl=0
but not in the quick css: i want the font-size down to 80%, to keep the tables in one line.
https://www.dropbox.com/s/d5cuwcrqgu1x7hf/Screenshot%202016-02-15%2018.02.45.png?dl=0
any idea?
thanks so much, regards,
paul
I was able to get this working by putting the following in the Quick CSS settings:
.html_header_left .av-main-nav ul {
left: 0;
top: 32px;
}
ul.sub-menu
{
opacity:1!important;
visibility:visible!important;
}
.html_header_left .av-main-nav ul
{
float: left;
top: 0;
left: 0;
position: relative;
width: 100%;
border: 0px;
padding: 0px;
box-shadow: none;
}
.html_header_sidebar #top .av-main-nav ul a
{
padding: 5px 25px 5px 25px;
border: none;
font-size: 14px;
}
.html_header_sidebar #header .av-main-nav > li > a
{
padding: 15px 0px 5px;
}
.html_header_sidebar #header .av-main-nav > li
{
float:left;
width:74%;
}
.html_header_sidebar #header .av-main-nav {
padding: 20px 0 30px;
float: left;
}
-
This reply was modified 10 years, 2 months ago by
rbates86.
Hey!
dann versuche die Schrift etwas kleiner zu machen:
.grid-entry-excerpt {
font-size: 11px;
}
Gruß,
Andy
Thanks Yigit
Please see the link in the private section.
Scroll down to “Where to find us”:
1. Note that the ‘+’ buttons has the same color of the background and therefor not seen (I don’t know how come since I never played with it…)
2. I would also like to increase the font size and change it’s color, of the selected tabs (the selected country)
Appreciate any help
Thanks!
Hey!
would be best for the forum to stick with one question/issue only and open a new ticket for more.
Basically you need to work with media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
So for your icons in portrait mode use this code:
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait) {
a.av-icon-char {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
line-height: 20px !important;
}}
and adjust as needed.
Regards,
Andy
Hi Kriesi-Team,
I am trying to put a sticky fullwidth submenu below a slider, so that it appears at the bottom of the screen and then moves up, when the page is scrolled.
I’ve tried simply moving up the container #top .av-submenu-container by 72px, which is the height I gave the container;
#top .av-submenu-container {
font-size: 15px;
height: 72px;
margin-top: -72px;
}
But naturally the container will then vanish those 72px under the header. I guess someone more knowledgeable could fiddle with the java script, but maybe there is an easier way?
Cheers,
Michael
Hi alexandernoe!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.special_amp {
font-family: inherit;
font-size: inherit!important;
font-style: inherit;
font-weight: inherit;
color: inherit!important;
}
Best regards,
Yigit
Hi,
I am not looking for a drop down menu in SINGLE COLUMN, not like mega menu.
but if this is not achievable, then we would consider MEGA MENU, if we can customised the size of the font.
this is what we’re looking for…
https://www.dropbox.com/s/cwfy2ej4cnjysmu/Epsilon_WebIssues_2016_01.jpg?dl=0
Hello,
we please need again your help.
We have entered the CSS code of Andy, but the subcategories are not displayed. Only when the white space to click.
We have to not find a solution in your forum found. Some CSS code by Peter tried but no change visible.
In the system we are sending the images.
For your help many thanks.
greeting
Jessica
(CSS code in the picture – is of ANDY – Access is still open for you)
-
This topic was modified 10 years, 2 months ago by
MATTIA.
Hi!
You can try the following code in the functions.php file.
// add go to link for mega menu items
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script>
(function($){
var $html = $('html');
$('.avia_mega_div .menu-item-has-children > a').each(function() {
$(this).append('<span class="mega-goto-link">Go to this page</a>');
});
$html.on('click', '.mega-goto-link', function() {
var href = $('.mega-goto-link').parent('a').attr('href');
window.location.href = href;
});
})(jQuery);
</script>
<?php
}
This code will go to the Quick CSS field:
.mega-goto-link {
font-size: 11px;
position: absolute;
right: 50px;
cursor: pointer;
}
@media only screen and (min-width: 989px) {
.mega-goto-link {
display: none;
}
}
The code above will append a “Go to this page” link which will redirect you to the parent page when clicked or tapped.
Regards,
Ismael

i try to give every link with new window (these are all my external links) or every mailto link an icon in front of the link.
here we go:
you can select those links via attribut. f.e. you want an acrobat icon before every pdf link ( unfortunately entypo-fontello haven’t one) so i uploaded an extra icon font for those icons)
a[target="_blank"]:before {
content: "\e822";
font-family: entypo-fontello;
font-size: 14px;
padding-right: 6px;
}
a[href$=".pdf"]:before{
content: "\e809" !important;
font-family: paragraph;
font-size: 14px;
padding-right: 6px;
}
a[href^="mailto"]:before{
content: "\e805" !important;
font-family: entypo-fontello;
font-size: 18px;
padding-right: 6px;
position: relative;
top: 1px;
}
etc. pp