-
AuthorPosts
-
February 21, 2015 at 12:17 am #399951
I’ve looked through this forum and learned to put
add_theme_support('avia_template_builder_custom_css');
in functions.php
and “awesome-textblock” in a textblock
and `.avia_textblock.awesome-textblock p {
background: white;
padding: 10px;
font-size: 50px;
} `
in Quick CSS. But
1. how do I change font color? E.g. font-color:red; doesn’t work
2. how do I do the same kind of changes for say an icon list? I tried .avia_iconlist.awesome-iconlist p { etc and it doesn’t work.February 21, 2015 at 1:01 am #399962Hi deadpeasant;
most of the ALB elements lets you the possibility to change (color …) and to add a custom “id” to “that element”.
http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/in the css code what I see is : it should not start with a (.) point which is for “class” but an “#” which is for “id”.
Try this one :#awesome-textblock p { background: white; padding: 10px; font-size: 50px; }
- This reply was modified 9 years, 10 months ago by begrafiks.
February 23, 2015 at 6:19 am #400396February 24, 2015 at 4:16 am #401163No Rikard, @begrafiks’s suggestion doesn’t work. I originally followed Ismael’s advice here
https://kriesi.at/support/topic/text-block-font-size/
As I described in my op, I put this in Quick CSS (as Ismael recommends):
.avia_textblock.awesome-textblock p {
background: blue;
padding: 10px;
font-size: 20px;
}
This code works, but @begrafik’s code doesn’t work.So back to my original questions:
1. how do I change font COLOR? E.g. font-color:red; doesn’t work
2. how do I do the same kind of changes for say an ICON LIST? I tried .avia_iconlist.awesome-iconlist p { etc and it doesn’t work.February 24, 2015 at 4:55 am #401168I just want to specify the color of the headline on my frontpage.
- This reply was modified 9 years, 10 months ago by deadpeasant.
February 24, 2015 at 5:21 pm #401528Hey!
No, it is even easier, you should only click on the Colors tab on Textblock element and change the color – http://i.imgur.com/2b2O5Jg.png
If you would like to do it using custom CSS code, you should add following code to Quick CSS field after giving a custom CSS class to your element.avia_textblock.your-custom-class p { color: blue; }
Please point out the changes you would like to make on other elements and we will gladly help you :)
Regards,
YigitFebruary 25, 2015 at 6:47 pm #402277Thanks Yigit, I stupidly didn’t see that tab. My fault.
Here’s my other question for the third time:
2. how do I do the same kind of changes for say an icon list? I tried .avia_iconlist.awesome-iconlist p { etc and it doesn’t work.
How can I change the text in icon list titles? How can I prevent it from being all capitals, how can I change its colour, size etc?February 26, 2015 at 3:03 pm #402693Hey!
Icon list element has colors tab as well – http://i.imgur.com/zfwETlw.png
To change font size and disable all caps, please add following code to Quick CSS in Enfold theme options under General Styling tab.avia-icon-list .iconlist_title { text-transform: none; font-size: 25px; }
Cheers!
YigitFebruary 28, 2015 at 1:23 am #403768I finally found out that what I wanted to do was change the icon list TITLE. I found a solution from Ismael here:
https://kriesi.at/support/topic/header-and-footer-enfold-default-style/.avia-icon-list .iconlist_title { text-transform: none; }
But this solution will apply through the site. How do I use Custom CSS to change the titles of individual icon lists?
Also, how do I do this for other elements. E.g. I have inserted an Easy Slider where I have added the Custom Css class awesome-easyslider. Under Quick CSS I have inserted:
.avia-easy-slider. awesome-easyslider { text-transform: lowercase; font-size: 10px; text-align:center; }
Which doesn’t work. Is there a general syntax for doing this kind of thing?
March 2, 2015 at 5:08 am #404268Hi!
Custom css class attributes are usually added to the grand parent container or the first container of the element. You can use google inspector or firebug to get the proper css selector. This will probably work:
.awesome-easyslider { text-transform: lowercase; font-size: 10px; text-align:center; }
For the iconlist, if you use “custom-iconlist” as custom css class attribute, you can use something like this:
.custom-iconlist .iconlist_title { text-transform: none; }
Add the !important attribute next to the css value if it doesn’t work.
Best regards,
IsmaelMarch 2, 2015 at 11:36 pm #404848Thanks. I used Google Web Inspector and found avia-caption-title. I can affect the slider caption if I put this in Quick CSS:
.avia-caption-title { text-transform: lowercase !important; }
But this doesn’t work:
.avia-caption-title .awesome-avia-caption-title { text-transform: lowercase !important; }
(I also tried many alternatives to “.awesome-avia-caption-title”.) In other words, I can affect all caption titles, but I can’t change individual caption titles.
March 3, 2015 at 1:55 pm #405126Hey!
Please try the code as following
.awesome-avia-caption-title .avia-caption-title { text-transform: lowercase !important; }
Cheers!
YigitMarch 3, 2015 at 5:17 pm #405252Hey Yigit, works like a dream. THANKS so much.
March 3, 2015 at 5:25 pm #405258Hey!
You are welcome, glad we could help :)
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)Cheers!
Yigit -
AuthorPosts
- The topic ‘Change font color etc in ALB elements’ is closed to new replies.