Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 20, 2015 at 4:31 pm #431399
    mindator

    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 9 years, 8 months ago by mindator.
    April 21, 2015 at 11:18 am #431879
    Rikard

    Hi mindator!

    I guess it depends on what you want to achieve? If you’ve got a link to a live site we could have a closer look?

    Regards,
    Rikard

    April 22, 2015 at 3:05 pm #432850
    mindator

    Hi Rikard,

    it’s a general question. I don’t get how I should style my own custom icon box.
    For example:

    The headline in my custom icon box should be:
    text-transform: uppercase;
    font-weight: 600;
    line-height: 40px;
    font-size: 30px;
    text-align: center;

    The text inside the custom icon box should be:
    text-transform: none;
    font-weight: 400;
    line-height: 22px;
    font-size: 18px;
    text-align: left;

    How should I start building my own css class in this case? I just can define ONE custom css class from within the pagebuilder so I don’t know how to combine to different classes into one.

    Thanks in advance
    Bastian

    April 23, 2015 at 9:05 am #433307
    Rikard

    Hi!

    You can add as many as you like in Quick CSS under Enfold–>General Styling if you should need more. My advice though would be to inspect the element by right clicking and selecting Inspect Element in for instance Chrome. There you can see what classes or id’s the elements have and you can then target them with CSS.

    Cheers!
    Rikard

    April 23, 2015 at 10:53 am #433348
    mindator

    Hi Rikard,

    thanks for your answer. You got me wrong.

    I can assign 1 custom CSS class within the pagebuilder for my custom Icon Box.
    How do I combine the CSS for “Icon Box Header” with the CSS for “Icon Box Content” to get 1 CSS Class?

    Thanks in advance
    Bastian

    April 23, 2015 at 1:38 pm #433454
    Yigit

    Hi!

    You can use the code as following 

    .iconbox_header .iconbox_content_title { color: orange !important; }
.iconbox_header .iconbox_content_container { font-size: 20px; }

    Please keep in mind that you cannot have space in CSS selectors. “.iconbox header” is wrong so it should be “.iconbox_header”

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.