Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 22, 2016 at 7:40 am #651953
    Dzimnikov

    Hey guys. I’m trying to put a border around a particular group of elements. Usually I am able to inspect, try out the css, and then quick edit css in general styling.

    The problem here is that the element I want to edit is named exactly the same as other similar elements.

    Thus, when I enter this css command:

    .post-entry.post-entry-type-page.post-entry-10{

    border-width: 5px;
    border-style: dashed;
    }

    it effects elements I don’t want borders around. For some reason, they are all named post-entry-10. I figured these containers would act like avia-builders, which give a new number identifier to a new element, but they don’t.

    Honestly, if could change that one section to post-entry-11, or something like that, that would do the trick. I don’t know php at all, so I’m afraid to touch those documents. Finding the html files (inspect style) would be amazing, but after searching through hostmonster, I still can’t find em.

    I hope I’m not completely stupid, its very late, im 6 coffees in and my brain is shot. Please help!

    June 22, 2016 at 8:15 am #651965
    Jordan

    Hey Dzimnikov,

    Thanks for getting in touch with us!

    Which elements are you trying to add borders to? If they are Avia Layout elements then you can add a custom class to the ones you wish to add the border to following the instructions here – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Let me know how it goes :)

    Best regards,
    Jordan

    June 22, 2016 at 9:32 am #651992
    Dzimnikov

    Please see attached url for reference.

    I want to put a border around the contact form + the text to the left. Just around those elements, not the entire colored section (though i tried to give it a border with a specfiic name, as instructed in the link from your reply, but it didnt work).

    When you inspect, the name of the section is:

    “.post-entry.post-entry-type-page.post-entry-10”

    Which is also the name for several of the section above it. Thus, when I apply a border to it via CSS, the border applies to all the sections with the same name. If I could change the “10” to an “11”, or something to that nature, then the container would have a unique identifier, no? How would I go about doing that?

    June 23, 2016 at 4:05 pm #652639
    Günter

    Hi,

    Thank you for coming back.

    You have surrounding divs vith unique id’s.

    So you can use CSS like:

    
#contactform .post-entry-10{

.....
}

#av_section_2 .post-entry-10{

.....
}

    Hope, this helps you.

    Best regards,
    Günter

    June 27, 2016 at 1:13 am #653630
    Dzimnikov

    I can put sectional borders around each particular element, but thats a pain in the butt.

    In general, is there a way to access the inspect-like html code? Is there a way to change section identifiers? Or is it all done in PHP?

    Also, whenever I try to give sections (like colored sections) custom CSS names, it never works. I gave the order section section on the front page the name ContactForm, then put #ContactForm as the link for one of the buttons in the slider. No go!

    How does this work?

    June 28, 2016 at 9:47 pm #654489
    Dzimnikov

    Also, I’m running a parallax on the home page but it doesn’t work well on mobile. I want to change it to a solid background or possibly an image specifically for mobile.

    I tried:

    @media only screen and (max-width: 500px) {
    #love {
    background: blue; !important
    }
    }

    but it didn’t work. I named that specific colored section “love”.

    I don’t think it overwrote the parallax in general.

    How would I go about it?

    Thanks!

    June 29, 2016 at 7:27 pm #654968
    Vinay

    Hi,

    To target advanced layout builder elements with custom css class names please enable custom class name support for layout builder elements. http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

    You may also be interested in http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

    The parallax effect is disabled in mobile devices and it works as intended.

    Feel free to let us know if you have any questions.

    Best regards,
    Vinay

    July 3, 2016 at 4:12 am #656190
    Dzimnikov

    I added the debug code but it didn’t really do what I needed it to.

    I understand that the parallax is disabled for mobile, but whats left is a tiny version of the featured image with black around it. I would love to change the image in that section for mobile, either with a more vertical version of the image or with a straight background color.

    Can you please advice me of the CSS code I need to make this change. Or php code. Or a way I can access the html version.

    I’m sorry if I’m being too much of a bother, but I hope to make the site look perfect and learn a bit along the way.

    Cheers and happy holiday weekend.

    -Daniel

    July 5, 2016 at 12:21 pm #656977
    Andy

    Hi,

    you can make a version for mobile only if you want. Just use custom class and hide the elements on desktop only and vice versa. Use something like:

    @media only screen and (min-width: 767px) {
    .your-custom-class {
    display: none;
    }}
    to hide the elements on a screen size higher than 767px. Adjust as needed. You can also use (max-width: ) if you want. For more information about media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Feel free to hire a freelance developer if you need the job to be done by someone else: kriesi.at/contact/customization

    Best regards,
    Andy

    July 9, 2016 at 5:06 am #658696
    Dzimnikov

    I’ve been trying, trying, trying to use the @mobile stuff and its just not working.

    I don’t want to simply disable the parallax, I want to replace the parallax effect with a simple background (image or color) on mobile – while keeping the other elements there.I do not want to hide the entire section on mobile.

    According to you guys, the code automatically disables the parallax effect. This leaves a tiny version of the desktop image sandwiched in between two black boxes. Is there a way to get rid of this small image and black boxes and replace it with a different background? In theory, the code should be pretty simple, but its not working. I tried using your code from the previous message as a test and it didn’t work.

    At the moment, I would prefer not to hire a freelance developer. This is not a complicated issue. In the past, I’ve had theme support go into my site and make the changes for me. I’m even asking for that, but can you please help me get this done.

    Thank you

    July 9, 2016 at 7:11 am #658706
    Dzimnikov

    I figured out that you can make two sections, one that ill hide on desktops/tablets, one that ill hide on mobiles.

    I named the section socialjustice, but when I use .socialjustice as an identifier, it doesn’t work.

    Here is the code I’m using:

    @media only screen and (max-width: 728px) {
    .socialjustice {
    display: none !important;
    }}

    What a I missing here?

    July 10, 2016 at 1:00 pm #658946
    Rikard

    Hi,

    I couldn’t find a class called socialjustice on the page in private, but if you are using Color Sections then it’s the ID you should target like so: 

    @media only screen and (max-width: 728px) {
#socialjustice {
display: none !important;
}}

    Best regards,
    Rikard

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