Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 22, 2016 at 9:51 pm #676050
    BirgitteAlstrom

    I would like to customize the back ground color of an icon box in a specific section. The background color should be the same behind the content and the icon and have same hight as the highest part (either icon or text), but the background color of the icon should be different (see sample enclosed). It would also be great if the icon is smaller as shown in the sample enclosed. Please notice the icon box is without a title.

    August 24, 2016 at 4:57 am #676750
    Rikard

    Hey BirgitteAlstrom,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    August 24, 2016 at 8:01 am #676840
    BirgitteAlstrom

    Links sent as private content. On the same page I have the problem, that some of the H2 sentences are shown with UPPERCASE even though I have changed Enfold -> Advanced Styling -> H2 -> Text transform -> “None”

    August 24, 2016 at 3:57 pm #677067
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
    text-transform: none;
}

    It seems like you used following custom CSS code 

    #iconboxwhite .iconbox {
    background-color: #FFFFFF!important;
}

    Have you figured out icon box background color?

    Best regards,
    Yigit

    August 24, 2016 at 4:08 pm #677081
    BirgitteAlstrom

    Thanks, Yigit.

    Regarding h1 and h2 text-transform: none:
    Why do I have to use Quick CSS to handle this? Without using the Quick CSS, but only changed Enfold -> Advanced Styling -> H2 -> Text transform -> “None”
    the first two h2’s on the page are correctly changing to no uppercase, while the rest of the h2’s on the same page are not. Why are the other h2’s not changing?

    Reg. icon box background color: no, the custom CSS code I have entered is not working properly. Compare the look on this page with the sample I enclosed on how I would like it to look.

    August 24, 2016 at 4:57 pm #677119
    Yigit

    Hi!

    Please add following code to Quick CSS 

    #iconboxgrey .iconbox,#iconboxwhite .iconbox {
    min-height: 79px;
}

    Cheers!
    Yigit

    August 24, 2016 at 5:16 pm #677135
    BirgitteAlstrom

    Thanks, Yigit. It worked with the background of the icon box. Is there anyway to make the icon smaller as in my sample enclosed?

    August 29, 2016 at 2:09 pm #678897
    Andy

    Hi,

    not sure about which icon you’re talking about, cause there are so many on the link you’ve provided and I can’t see any icon at all on the screenshot you’ve send. However, try this code:

    .iconbox_icon.heading-color {
width: 50px !important;
height: 50px !important;
line-height: 50px !important;
}

    Best regards,
    Andy

    November 2, 2016 at 1:03 pm #707072
    BirgitteAlstrom

    What I am trying to achieve is the non-existing solution in the ALB Icon Box: “display small icon at the left side of the content” (instead of at the left side of the title), where the icon is horizontally aligned with the first line in the content area, and not using a title, and a long text is vertically starting at the same left place (instead of wrapping around below the icon)

    I have settled with the tweak of the Icon Box you can see on this page (see private data below). I have used the following code to Quick CSS:

    #iconboxwhite .iconbox {
    background-color: #FFFFFF!important;
    }

    #iconboxgrey .iconbox {
    background-color: #f8f8f8!important;
    }

    #iconboxgrey .iconbox,#iconboxwhite .iconbox {
    min-height: 15px; padding: 10px;
    }

    #iconboxgrey .iconbox_content_title,#iconboxwhite .iconbox_content_title, #iconboxlist .iconbox_content_title {
    font-family: inherit!important;
    color: inherit!important;
    font-weight: normal!important;
    text-transform: none!important;
    font-size: 15px!important;
    }

    which means I use the iconbox title to be able to use a small icon left to the text and have the small icon aligned with the first line in the text right to the icon. That leaves me with the two following issues:

    1) I want the text to look like paragraph text. Right now it seems like the letter-spacing between the characters in the text is larger with my Quick CSS, than there is in my default paragraph text.

    2) I don’t want a long text is wrapping around the icon (below the icon). I want all the text to start at the same left place next to the icon (like if you invisibly had a column for the icons and a column for the text)

    Is there any way to easier get to the result that ALB Icon Box: “display small icon at the left side of the content” (instead of at the left side of the title), where the icon is horizontally aligned with the first line in the content area, and not using a title, and a long text is vertically starting at the same left place (instead of wrapping around the icon)?

    Or how do I solve it within my existing tweaks?

    November 4, 2016 at 2:05 pm #708173
    Andy

    Hi,

    quite difficult for me to get what you mean and know what you want to achieve. Would be much easier for us if you use screenshots and mockups to make things clear for us (imgur.com, dropbox).

    Best regards,
    Andy

    November 4, 2016 at 2:18 pm #708180
    BirgitteAlstrom

    Okay, you can find a screenshot in the dropbox link provided below in the private content area.

    November 4, 2016 at 3:36 pm #708238
    Andy

    Hi,

    I think the problem is that the font you’re using right now is too big. Try this code:

    .iconbox_content_title {
font-size: 14px !important;
}

    Best regards,
    Andy

    November 4, 2016 at 3:55 pm #708265
    BirgitteAlstrom

    I tried, but that is unfortunately not the issue. Besides Enfold -> General styling -> Fonts -> Default content font size = 15px.

    November 7, 2016 at 7:46 am #709056
    Nikko

    Hi!

    Try to add this code in your Quick CSS:

    #top .iconbox_left .iconbox_content_title {
    letter-spacing: normal;
    line-height: 1.65;
    padding-left: 36px;
}

    Hope this helps :)

    Cheers!
    Nikko

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