Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 3, 2020 at 4:45 pm #1200570
    federicotriana

    Hi, I’m very happy using the enfold theme as it really flexible, but now I have a problem with this new site where the design requires a fullwidth image background over which all other elements (header, main content area, footer) are transparent, with only some specific widget with some opacity or background color.
    in the private content the link to an example of the design.
    I thought it would be easy to set it up with just some css but until now I have been unsuccessful.

    April 3, 2020 at 5:22 pm #1200581
    federicotriana
    This reply has been marked as private.
    April 5, 2020 at 4:40 am #1200903
    Rikard

    Hi,

    Thanks for the screenshot. I’m not sure exactly what you need help with though, could you try to be a bit more specific? Also please post a link to the actual site so that we can have a closer look.

    Best regards,
    Rikard

    April 6, 2020 at 2:50 pm #1201239
    federicotriana

    Hi Rikard,
    I’ll try to be more specific and clear. My main issue is that I need to set a transparent background for all the main site elements (header, main content, footer). I already achieved that by setting the background color of each element to #ffffff00 in the general style options, but I have read that is not advisable as not all browser may support this setting. Is there another way to achieve this?

    I’ll send you access codes to the site in private.
    Thanks for the help you may provide.

    Federico

    April 14, 2020 at 4:59 am #1203438
    Rikard

    Hi Federico,

    I’m very sorry for the late reply. I was hoping one of the other moderators would understand what you mean, but it doesn’t seem like that is the case unfortunately.

    I still don’t understand what you are looking to achieve unfortunately, or did you manage to do it already maybe?

    I’m not familiar with this format of hex:

    #ffffff00

    As far as I know a hex code can only have six characters after the hash?

    Best regards,
    Rikard

    April 15, 2020 at 5:26 pm #1204063
    federicotriana

    I’m sorry that I don’t have been able to explain my self clearly, my english has obvious limits :|.
    However I’ll try again.
    In the site I’m developing I have set a fullwidth image background, okey?
    Then I used the ‘enfold general settings’ to set the characteristics of header, main content, footer and socket. Among the properties available from the general settings there is the background color, where you can pick any color, but you cannot set it to TRANSPARENT, right? As I want to see the text all over the page superimposed to the fullwidth image I have set, I need to set the background color of all the ‘containers’ to transparent.

    If you don’t still understand what I’m looking for (maybe because the solution is so obvious to you that you don’t image that I’m really asking that), imagine that the site I want is just made of a fullwidth image in background and some text over that image, without covering it with a colored box or whatsoever. How you would set enfold to do something like that? As I said before I tried using the custom.css but the enfold architecture is now quite complex and didn’t manage to have the result I’m looking for.

    Best regards,
    Federico

    ps: the eight digit hex code adds two digits to the normal hex code to set the opacity, 00 is zero opacity = transparent

    April 20, 2020 at 8:36 am #1205416
    Ismael

    Hi,

    Thank you for the clarification. Looks like you have already managed to set the background transparency or color of the main containers to #ffffff00. Do you need more help with this?

    You can also try this css code.

    .main_color, .main_color .site-background, .main_color .first-quote, .main_color .related_image_wrap, .main_color .gravatar img .main_color .hr_content, .main_color .news-thumb, .main_color .post-format-icon, .main_color .ajax_controlls a, .main_color .tweet-text.avatar_no, .main_color .toggler, .main_color .toggler.activeTitle:hover, .main_color #js_sort_items, .main_color.inner-entry, .main_color .grid-entry-title, .main_color .related-format-icon, .grid-entry .main_color .avia-arrow, .main_color .avia-gallery-big, .main_color .avia-gallery-big, .main_color .avia-gallery img, .main_color .grid-content, .main_color .av-share-box ul, #top .main_color .av-related-style-full .related-format-icon, .main_color .related_posts.av-related-style-full a:hover, .main_color.avia-fullwidth-portfolio .pagination .current, .main_color.avia-fullwidth-portfolio .pagination a, .main_color .av-hotspot-fallback-tooltip-inner, .main_color .av-hotspot-fallback-tooltip-count {
    background-color: transparent;
}

    Best regards,
    Ismael

    May 14, 2020 at 5:21 pm #1212985
    federicotriana

    Thank you for your reply, I tried the css code you sent. At the beginning it didn’t work, but I added some other IDs and classes and somehow I managed to make it work. I also added the !important property.

    Thank you!
    Best regards,
    Federico

    May 14, 2020 at 9:21 pm #1213057
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

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