Hello,
I would like to edit the styles for the Full Screen Slider module. Specifically, change the size, location, color and opacity of the black/transparent box where captions overlay. Also, the caption font css.
Also, I’m having an issue using a “strong” tag within the first Caption area when coupled with another font tag. See example below:
Who is<br/>Laurie <font color=”#c94e8e”>Spoon</font>?
In this example, the word “Spoon” is given the correct color but is not bolded. It seems I can’t use these two tags in line together in the sample caption line.
Thanks for your help!
– John
Hi!
muchas gracias por tus capturas.
Para tu pagina home usa este codigo en Quick CSS:
Mas distancia entre foto y titulo:
.slide-content {
padding-top: 15px;
}
Titulo mas grande:
header.entry-content-header {
font-size: 20px;
}
Para tu pagina Blog usa este codigo:
Mas distancia entre foto y titulo:
header.entry-content-header {
padding-top: 15px;
}
Titulo mas grande:
.entry-content-wrapper .post-title {
font-size: 25px;
}
Sobre el excerpt que necesitas mas largo, necesitamos acceso de administrador, para ver exacto como lo estas usando. Nos puedes mandar los datos aqui mismo, marcando el mensaje como privado.
Saludos!
Andy
Hey Soapmarine!
Do you mean the default font size? Try adding this to your custom CSS.
#top .avia_textblock p { font-size: 14px; }
Cheers!
Elliott
Hello,
I would like to know how to work with a custom CSS for a customized iconbox.
The function to add a custom CSS class from within the pagebuilder is already activated.
I ve started customizing the Header for my Iconbox. I got the following CSS:
.iconbox header .iconbox_content_title {
text-transform: none;
font-weight: 400;
line-height: 22px;
font-size: 16px;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
letter-spacing: 0px;
color: #0090d6;
}
Secondly I’ve changed the content inside the iconbox with:
.iconbox {
line-height: 18px;
font-family: Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
I see 3 different CSS classes here. So how should I combine them to get ONE custom class that can easily used as a custom CSS class from within the pagebuilder?
Thanks in advance
Bastian
-
This topic was modified 10 years, 11 months ago by
mindator.
Dropped the easy slider on to the home page (1/2), and have two images in there, the same size…. and they aren’t fading between each other. I’ve set them to 3 seconds… but it just stays static on the first image.
The problem slider is below the heading “What would make things simpler” featuring two guys drinking coffee
Also is there a way to add extra Google fonts into a theme?
I look forward to your comments
This reply has been marked as private.
I have a couple of problems.
1. How do I make the sub-menu drop down not be transparent (have tried all opacity options) i.e. text/images underneath do not show through the drop down menu
2. Also on the non-home pages, and on the responsive I get extra red lines around the Social icons
The Quick CSS I have use to date is
#header_main {z-index: 10;} /* Put logo on top */
#header_meta, #header_main, .avia-layerslider {border: none;}
#header_meta, #header_main {background-color: white !important; opacity: 0.7; margin:0; }
.logo {margin-top: -20px; }
.phone-info a {font-size: 16px; font-weight: bold; color: black !important}
.social_bookmarks a {font-size: 16px; font-weight: bold; color: black !important ; border: none !important; }
#menu-item-search a {color:black; !important; font-size: 36px; font-weight: bold; font-color: black !important}
.avia-menu-text {color:black; font-size: 16px}
.avia-menu-text:hover {color:red}
.sub-menu .avia-menu-text {font-size: 14px ;}
#top .av-main-nav ul a
{ padding: 10px ; line-height: 1.2em !important;
background-color: #eaeaea;
opacity: 1;
}
.sub-menu li { border-bottom: 1px solid #e2e2e2; }
Hi
Please add following code to Quick CSS as well
.sidebar a { font-size: 16px!important; }
Cheers!
Yigit
Never mind, i found the solution.
For the one who also want to get this looks:
div.tagcloud a {
float: left;
position: relative;
display: inline-block;
width: auto;
padding: .19em .62em;
margin: 2px 2px 0 0;
white-space: nowrap;
font-size: 1em !important;
background-color: transparent;
color: inherit;
border: 1px solid;
z-index: 0;
-webkit-transition: all .3s;
transition: all .3s;
}
div.tagcloud:hover a { opacity: .33; }
div.tagcloud a:hover {
border: 1px solid #ff8000;
background: #ff8000;
color: #ffffff;
text-decoration: none;
z-index: 1;
opacity: 1;
}
div.tagcloud a:before {
content: attr(title);
position: absolute;
display: none;
left: 100%;
top: -1px;
padding: .19em .62em;
pointer-events: none;
border: 1px solid;
color: #ff8000;
}
div.tagcloud a:hover:before { display: block; }
Hi dominiquehurley ;
I do know what is “a blog post I had issues with back in WP.com”; but it creates a >div> and >span> in your blockquote.
#1 if it’s possible try to paste your content in “text” mode in to your post,
otherwise use these lines of code (instead of those ones above)
blockquote {border:none !important;}
blockquote *{font-size: 16px !important; color: #000 !important; font-style: italic !important;}
The selector ” * ” selects all elements in the ” blockquote ” selector
PS:
You have your “gift” too; I mean your art
so no blessing to be or not something else
-
This reply was modified 10 years, 11 months ago by
begrafiks.
I saw some posts on “Add image or text at top of homepage between top logo and menu on right,” and I tried adding the functions.php code, but it didn’t work.
I would like to add this text “The Association of Record for Bid, Proposal,
Business Development, Capture and Graphics Professionals in California” to the right of my logo here: http://california-apmp.org/wp/
this is the font color #2c3a91; and size 140%
How can I do this, please?
thank you!
Hey!
Please see – http://kriesi.at/documentation/enfold/change-the-default-font-size/
To change heading sizes and main menu link sizes, please go to Enfold theme options > Advanced Styling tab
Cheers!
Yigit
Hey Linden_Mobile!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 500px) {
h1 { font-size: 40px !important; }}
Regards,
Yigit
Hi dominiquehurley ;
try to add these lines into your custom css file ;
blockquote {border:none !important;}
blockquote p{font-size: 16px !important; color: #000 !important; font-style: italic !important;}
Hi dominiquehurley ;
in order to reduce the size of h1 title of your blog post add this line into your custom css :
.entry-content-wrapper .post-title{font-size: 16px !important;}
and this one in order to reduce padding top of the blog post ***I’m not 100% sure of it***
.template-single-blog .content{padding-top:10px !important;}
adjust the sizes as you like
Hello,
This is the complete quick css code I have now. Sorry but it is not working. I works with the font size but not with the top and bottom margins between menu elements.
Please, check it.
——————–
div#avia_2_1 {
float: left;
}
p#element_avia_1_1 {
width: 6%;
}
#top #header .mega_menu_title a {
font-size: 11px !important;
line-height: 11px !important;
}
.mega_menu_title{
font-size: 11px !important;
line-height: 11px !important;
}
#top #header .avia_mega_div > .sub-menu > li {
padding-top: 10px !important;
}
#top .av-main-nav ul a {
min-height: 8px !important;
}
Hey!
Sorry I forgot a few details in my previous code, please change it to this instead:
.mega_menu_title{
font-size: 11px !important;
line-height: 11px !important;
}
#top #header .avia_mega_div > .sub-menu > li {
padding-top: 10px !important;
}
#top .av-main-nav ul a {
min-height: 8px !important;
}
Cheers!
Rikard
Hey There_Ltd!
Thank you for using Enfold.
Please set the default content font size on Enfold > General Styling > Fonts panel. Make sure that you enabled the right sidebar of the Sidebar on Single Post Entries in the Enfold > Sidebar Settings panel.
Best regards,
Ismael
Hello,
Do you happen to have a recommended css font sizes for easy reading ?
The default Enfold text in headers and links is very small.
I know I can change it manually, but can you provide some sort of recommended font size for most use text elements ?
Thanks
Hi there,
I’m trying to re-style the pricing table slightly (please see link included below). The problem is the background colour of the 4th and bottom rows. We would like them to be white, consistent with the rest of the table. I’ve used the code below but can’t get it right! Also I suspect I’ve duplicated and perhaps it’s far more messy than it needs to be? If you could possibly provide clean minimal Quick CSS code for this, it would be very much appreciated.
Many thanks
Robert
li.avia-heading-row .pricing-extra {
font-family: verdana;
}
.main_color .pricing-table.avia-desc-col li {
background-color: #ffffff;
color: #333333;
}
.main_color .pricing-table li.avia-pricing-row .pricing-extra {
background-color: #ffffff;
border-color: #f1f1f1;
color: #333333;
}
.main_color .pricing-table li.avia-pricing-row, .main_color .pricing-table li.avia-heading-row, .main_color .pricing-table li.avia-pricing-row .pricing-extra {
background-color: #007488;
border-color: #f1f1f1;
color: #ffffff;
}
.pricing-table li.avia-pricing-row {
font-family: arial;
font-size: 42px;
font-weight: 400;
}
.pricing-table > li {
font-family: verdana;
}
.main_color tr:nth-child(3n), .main_color .avia-data-table .avia-heading-row .avia-desc-col, .main_color .avia-data-table .avia-highlight-col, .main_color .pricing-table > li:nth-child(3n), body .main_color .pricing-table.avia-desc-col li {
background-color: #ffffff;
color: #333333;
}
Hi!
Please use the code as following
.av-masonry-image-container:before {
content: attr(title);
background: #8C62A4;
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 24px;
left: 0;
transition: all linear 0.2s;
}
.av-masonry-image-container:hover:before {
opacity: 0.75;
}

Cheers!
Yigit
Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 500px) {
.av-countdown-time-label { font-size: 12px; }}
If that does not help, please post the link to your website
Regards,
Yigit
Hi,
1.
When using 1/2, 1/3, 1/4, 1/5 etc. sections – displayed in responsive mobile – one below another.
But in my RTL Hebrew website the order is wrong: most right section should be first, and most left should be last – and it’s not so…
How can I fix it?
2. I can’t control H1 font size in responsive mobile.
I added CSS:
@media only screen and (max-width: 767px) {
h1 {
font-size:22px;
}
}
Thanks,
Yud
Ok, now the font size of the menu has the same size, but the problem is the top and bottom margin or padding between text menus that is very big.
I can not understand why is this not solve in the standard configuration because a menu with 2 levels I think is quite common.
Thank you.
Hey!
1.) Can you please provide a screenshot for this one? I’m sorry but I don’t understand it “Sidebar user page”.
2.) You can change the product title with this:
h1.product_title.entry-title {
font-size: 15px;
}
And the price with this:
p.price .amount {
font-size: 12px !important;
}
Best regards,
Ismael
Hey!
You can use something like this in a code or text block:
<ul class="icon-bullets">
<li>This is a sentence.</li>
<li>This is a sentence.</li>
<li>This is a sentence.</li>
</ul>
Add this in the Quick CSS field to change the bullets:
ul.icon-bullets li {
list-style: none;
}
ul.icon-bullets li {
padding-left: 8px;
}
ul.icon-bullets li:before {
content: '\2713';
font-family: 'entypo-fontello';
font-size: 23px;
font-weight: normal;
position: absolute;
left: 6px;
}
The content: ‘\2713’; is the character code for the check mark font icon. Refer to this link for more icons: http://web.archive.org/web/20140912210715/http://entypo.com/characters/
Cheers!
Ismael
Hey!
Please try adding the following as well:
.mega_menu_title{
font-size: 11px !important;
line-height: 11px !important;
}
#top #header .avia_mega_div > .sub-menu > li {
padding-top: 10px;
}
#top .av-main-nav ul a {
min-height: 8px;
}
Cheers!
Rikard
Hey!
Please firstly enable custom CSS class for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
then add following code to Quick CSS in Enfold theme options under General Styling tab
.your-custom-class .iconlist_title { font-size: 20px; }
.your-custom-class .iconlist_content { font-size: 15px; }
Best regards,
Yigit
Hi Rikard
Why do you need a link?
ts a Igeneral question
How can i alter the icon-size and font.size of an icon-list for a specific URL (not global)
Thanx