Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • August 7, 2016 at 2:33 am #669372
    navindesigns

    Hi,

    I need a little guidance on how to build this layout especially the right bar widgets

    Mockup – https://s7.postimg.org/izu4cp4kr/Admissions.jpg

    The biggest thing here is that I would like to use the right side green box (labelled “QUESTIONS”) and blue box (labelled “Key Admission Dates”) as a “sidebar”. The reason I would like to do that is because that green and blue box will be used on 3 other pages as well so for future updates, having it on a sidebar will work nicely because I can just update the sidebar and all the pages will be updated. How do I create that green box and then the blue box on the right bar widgets? I could easily do it with page builder but since this is a right bar widget, I am little lost.

    here is my page so far

    Admissions

    • This topic was modified 8 years, 4 months ago by navindesigns.
    August 8, 2016 at 9:50 pm #670052
    navindesigns

    Just an update on this.

    Just to summarize I need help with the following:
    1- I would like to use the right side green box (labelled “QUESTIONS”) and blue box (labelled “Key Admission Dates”) as a “sidebar”. The reason I would like to do that is because that green and blue box will be used on 3 other pages as well so for future updates, having it on a sidebar will work nicely because I can just update the sidebar and all the pages will be updated. How do I create that green box and then the blue box on the right bar widgets? I could easily do it with page builder but since this is a right bar widget, I am little lost.

    2- How do I create a full width section below the right sidebar and my contents at the bottom. If you look at my mockup. I would like the green bar section “CLICK HERE TO COMPLETE YOUR 2016-2017 APPLICATION.” and the 6 icon sections below it to span across the site below the after the right sidebar ends.

    Mockup – https://s7.postimg.org/izu4cp4kr/Admissions.jpg

    What I currently have – http://staging.wsmsnyc.org.s167849.gridserver.com/admissions/

    Thanks

    Please advise

    August 9, 2016 at 5:39 pm #670427
    navindesigns

    Update on this again. For #2, I used Widget Area element to act as sidebar so that worked fine. So I just need help with #1

    Thanks

    August 10, 2016 at 3:37 pm #670868
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #text-5 .widgettitle {
    color: white!important;
}

#text-5 {
    background: green;
    padding: 10px;
    color: white;
}
#text-6 .widgettitle {
    color: white!important;
}
#text-6 {
    background: blue;
    padding: 10px;
    color: white;
    margin-top: 20px;
}

    Best regards,
    Yigit

    August 10, 2016 at 4:15 pm #670909
    navindesigns

    That works great. thanks

    one more question

    how do I decrease the spacing between the 3/4 column and the 1/4

    screenshot – https://s9.postimg.org/cddio3r2n/spacing.jpg

    Mockup – https://s7.postimg.org/izu4cp4kr/Admissions.jpg

    Preferably making the 1/4 (sidebars) a bit wider to decrease that spacing or whatever you think is easier

    August 10, 2016 at 4:26 pm #670918
    Yigit

    Hi,

    Please edit your Color Section element and give it unique ID and then add following code to Quick CSS

    #your-unique-id .flex_column.av_one_fourth {
    margin-left: 2%;
    width: 24%;
}

    Best regards,
    Yigit

    August 10, 2016 at 4:32 pm #670928
    navindesigns

    Hmm.

    I tried that but nothing changed.

    I cannot edit my color section , I added the ID to my 1/4 which is my widget area. Is that correct?

    screenshot – https://s9.postimg.org/k26s03ze7/widget.jpg

    August 15, 2016 at 3:22 am #672425
    Ismael

    Hi,

    You have to add the ID in your color section. Hover over the color section then click the third icon (Edit Section) in the upper left corner of the element.

    Best regards,
    Ismael

    August 15, 2016 at 3:55 am #672433
    navindesigns

    I did that but nothing is changing. I am sending you my login if you want to take a look

    page – http://staging.wsmsnyc.org.s167849.gridserver.com/admissions/

    August 15, 2016 at 9:40 pm #672887
    navindesigns

    any update please?

    August 16, 2016 at 11:02 pm #673416
    navindesigns

    so I got it to work but on mobile it the right sidebar (green and blue boxes) are not appearing correctly

    Admissions

    screenshot – https://s3.postimg.org/3lsjx3go3/Screen_Shot_2016_08_16_at_5_15_39_PM.png

    • This reply was modified 8 years, 4 months ago by navindesigns.
    August 17, 2016 at 6:04 am #673505
    Ismael

    Hi,

    Thank you for using Enfold.

    The columns do not resize properly because of this css codes:

    #adwidget .flex_column.av_one_fourth {
    margin-left: 2% !important;
    width: 24% !important;
}

    You should wrap it inside a css media query so that it doesn’t affect the mobile view.

    Best regards,
    Ismael

    August 17, 2016 at 3:50 pm #673764
    navindesigns

    Yes that code was given to me by Yigit. Please read above.

    How do I wrap it inside a css media query? Please advise

    August 18, 2016 at 1:51 pm #674176
    Rikard

    Hi,

    It depends on what screen size you want to target? Try this for mobile sizes: 

    @media only screen and (max-width: 767px) {
THE PREVIOUS CODE GOES HERE
}

    Regards,
    Rikard

    August 18, 2016 at 3:56 pm #674214
    navindesigns

    This is not working. is there any way Yigit can look at this. He is the one that recommended the first code. Below is exackly what I am using and it is not working

    @media only screen and (max-width: 767px) {
    #adwidget .flex_column.av_one_fourth {
    margin-left: 2% !important;
    width: 24% !important;
    }
    }

    August 22, 2016 at 12:50 pm #675677
    Yigit

    Hi,

    Please change the code to following one

    @media only screen and (min-width: 769px) {
#adwidget .flex_column.av_one_fourth {
margin-left: 2% !important;
width: 24% !important;
}
}

    Best regards,
    Yigit

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