Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 21, 2015 at 12:17 am #399951
    deadpeasant

    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 #399962
    begrafiks

    Hi 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, 9 months ago by begrafiks.
    February 23, 2015 at 6:19 am #400396
    Rikard

    Hi deadpeasant!

    Did you try @begrafiks suggestions and did they work out for you?

    Regards,
    Rikard

    February 24, 2015 at 4:16 am #401163
    deadpeasant

    No 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 #401168
    deadpeasant

    I just want to specify the color of the headline on my frontpage.

    • This reply was modified 9 years, 9 months ago by deadpeasant.
    February 24, 2015 at 5:21 pm #401528
    Yigit

    Hey!

    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,
    Yigit

    February 25, 2015 at 6:47 pm #402277
    deadpeasant

    Thanks 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 #402693
    Yigit

    Hey!

    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!
    Yigit

    February 28, 2015 at 1:23 am #403768
    deadpeasant

    I 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 #404268
    Ismael

    Hi!

    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,
    Ismael

    March 2, 2015 at 11:36 pm #404848
    deadpeasant

    Thanks. 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 #405126
    Yigit

    Hey!

    Please try the code as following 

    .awesome-avia-caption-title .avia-caption-title {
text-transform: lowercase !important; 
}

    Cheers!
    Yigit

    March 3, 2015 at 5:17 pm #405252
    deadpeasant

    Hey Yigit, works like a dream. THANKS so much.

    March 3, 2015 at 5:25 pm #405258
    Yigit

    Hey!

    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

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Change font color etc in ALB elements’ is closed to new replies.