Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 3, 2019 at 11:06 pm #1049725
    Huckaleroo
    Guest

    Had my site created a developer, I’ve since taken over to make minor tweaks. Your Avia theme was purchased by them, trying to apply a code block to the entire page, but cannot seem to do this. Please help

    January 4, 2019 at 8:57 am #1049896
    Rikard

    Hey Huckaleroo,

    I’m not sure I understand your question, could you try to explain a bit further what you are looking to achieve please?

    Best regards,
    Rikard

    January 4, 2019 at 10:39 am #1049934
    Huckaleroo
    Guest
    This reply has been marked as private.
    January 5, 2019 at 6:28 am #1050220
    Rikard

    Hi,

    Thanks for the update. Your site is in private, I’m guessing you changed that yourself?

    There is no functionality for membership pages in the theme itself, you would have to use a plugin or third party code to achieve that.

    Best regards,
    Rikard

    January 14, 2019 at 3:49 am #1053496
    Huckaleroo
    Guest

    Yes I did. And I solved the last issue. New question. I have two of your progress bar elements on the same page. How do I change one without changing the other. For example. I want one of the progress bars to remain in bar format, but change the other to the pie display. How would I go about doing this?

    January 14, 2019 at 6:21 pm #1053755
    Victoria

    Hi Huckaleroo,

    You need to add a custom class or id to one of them.

    Here is how to turn that feature on

    Intro to layout builder

    and then you can use css to target just one.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    January 14, 2019 at 7:30 pm #1053817
    Huckaleroo
    Guest

    Ok. I’ve created the custom class which is prog-bar2. However, when I try to inject it, it breaks the element. This is the code that I pulled from your page:

    #top .progressbar-title-wrap {
    padding: 20px;
    margin-bottom: 20px;
    background: #333!important;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;
    }

    #top .progress {
    max-height: 4px;
    }

    .progressbar-percent {
    opacity: 1;
    float: none;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    line-height: 150px;
    font-weight: bolder;
    color: #fff;
    z-index: 999;
    }

    .progressbar-title {
    font-weight: lighter!important;
    }

    .progressbar-title,
    .progressbar-icon {
    top: 0;
    position: relative;
    transform: translateY(35px);
    color: #fdfdfd;
    letter-spacing: .05em;
    margin-top: -10px;
    text-transform: none;
    }

    #top .avia-progress-bar-container .avia-progress-bar {
    margin-top: 0;
    }

    #top .avia-progress-bar-container .avia-progress-bar:nth-child(1) .progressbar-title-wrap,
    #top .avia-progress-bar-container .avia-progress-bar:nth-child(1) .bar {
    background: #0099e5!important;
    }

    #top .avia-progress-bar-container .avia-progress-bar:nth-child(2) .progressbar-title-wrap,
    #top .avia-progress-bar-container .avia-progress-bar:nth-child(2) .bar {
    background: #ff4c4c!important;
    }

    #top .avia-progress-bar-container .avia-progress-bar:nth-child(3) .progressbar-title-wrap,
    #top .avia-progress-bar-container .avia-progress-bar:nth-child(3) .bar {
    background: #34bf49!important;
    }

    Again, the class i created for the element is prog-bar2. How should I modify it properly??

    January 17, 2019 at 4:32 am #1054842
    Ismael

    Hi,

    You should replace the “.avia-progress-bar” selector with the custom css class attribute. Where can we see the progress bars? I can’t find any in the site.

    Best regards,
    Ismael

    January 18, 2019 at 9:50 pm #1055683
    Huckaleroo
    Guest

    Hey Ismael, I managed to figure it out :) But I do have another question regarding the headline rotator. I’m trying to get it like this: http://philipjwsmith.com/ where the color of only one word is changed. How would I go about doing this?

    January 20, 2019 at 8:36 am #1056072
    Rikard

    Hi,

    You could wrap the words in a span tag for instance:

    <span style="color:red;">Word</span>

    Best regards,
    Rikard

    January 21, 2019 at 12:46 am #1056366
    Huckaleroo
    Guest

    GREAT! How would I wrap the words if it’s in the headline rotator?

    January 21, 2019 at 6:36 am #1056443
    Rikard

    Hi,

    You could just paste that code in where you put the word itself, but I see now that there is an option to set individual colours for each word in the element itself, so you don’t need the code I posted :-)

    Best regards,
    Rikard

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