Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • July 10, 2015 at 5:11 pm #471611
    wiwaldi79

    hi, i want to arrange text and images in a color area.

    Here is the info in an image. http://www.alfaweb.at/testwaldi/portraits/mag-dieter-halama/ but i want to show this infos with real text not an image.

    how can i arrange this http://www.alfaweb.at/testwaldi/portraits/dieter-halama-2/ how can i bring the text close next to the images? can i do this?

    July 13, 2015 at 11:08 am #472249
    Yigit

    Hey wiwaldi79!

    Please upload your icons as iconfonts and choose to display them in iconlist element – http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/

    Best regards,
    Yigit

    July 14, 2015 at 12:32 pm #473090
    wiwaldi79

    Thants awesome. Thanks! http://fontello.com/

    Do you know where i can get numbers? I need 1-9 for icons? i don`t find them on fontello?

    July 15, 2015 at 11:58 am #473637
    Ismael

    Hey!

    I’m sorry but there is no number icons available in fontello. Can you please provide a screenshot of what you’re trying to do? I checked the pages or links above and I’m not sure if that’s how they are supposed to look. The containers are not full width. Is that intentional?

    Best regards,
    Ismael

    July 15, 2015 at 12:20 pm #473652
    wiwaldi79

    http://www.alfaweb.at/testwaldi/kontaktdetails/
    ,

    View post on imgur.com

    July 16, 2015 at 12:56 pm #474235
    Andy

    Hey!

    use this code:

    .flex_column.av_one_fifth.flex_column_div.av-zero-column-padding.first.avia-builder-el-15.el_before_av_one_fifth.avia-builder-el-first {
padding-left: 86px;
}
.flex_column.av_one_fifth.flex_column_div.av-zero-column-padding.avia-builder-el-31.el_after_av_one_fifth.el_before_av_one_fifth {
padding-left: 91px;
}

    Best regards,
    Andy

    July 16, 2015 at 1:44 pm #474279
    wiwaldi79

    Wow, thank you Andy! Looks good. How can i apply other spacings between pictures and text ? http://i.imgur.com/X2gcFMs.jpg

    July 16, 2015 at 2:05 pm #474294
    Andy

    Hi!

    try this:

    .avia-image-container.avia-align-left {
margin-bottom: 17px;
}

    If you need a specific margin for each icon you would need to give them a unique CSS class (turn on custom class for all alb elements).

    Cheers!
    Andy

    July 16, 2015 at 2:32 pm #474325
    wiwaldi79

    Ok i will do this with an css class :)

    How can i align the text like this: http://i.imgur.com/p9dyvWj.jpg

    July 16, 2015 at 2:45 pm #474337
    Andy

    Hi!

    as I already said you would need to add a unique CSS class to each element, because the spacing is different between them.

    Regards,
    Andy

    July 16, 2015 at 4:22 pm #474417
    wiwaldi79

    :)

    July 17, 2015 at 10:39 am #474773
    Andy

    Hi!

    let us know when you are done and still need help.

    Best regards,
    Andy

    July 21, 2015 at 1:37 pm #476469
    wiwaldi79

    Done. How can i bring this icon down? (portrait_info_class_2) every item has now his own class :)

    View post on imgur.com

    View post on imgur.com

    View post on imgur.com


    http://i.imgur.com/TxHdnll.jpg how can i do this with the new ALB features? reduce space between colums?

    July 21, 2015 at 2:15 pm #476494
    Andy

    Hey!

    as you did not mentioned which class name you have chosen and as you did not post any admin access to us for checking which class name you are using, use this code as an example and starting point:

    .your-first-icon-class {
top: 50px;
left: -20px;
}
.your-second-icon-class {
top: 50px;
left: -20px;
}
.your-third-icon-class {
top: 50px;
left: -20px;
}
.your-fourth-icon-class {
top: 50px;
left: -20px;
}

    By the way: As you are posting a lot here in our forum, did you think about learning HTML/CSS by yourself? It think you would benefit from it a lot and would gain lots of time and energy.

    Best regards,
    Andy

    July 21, 2015 at 2:22 pm #476498
    wiwaldi79

    ;) OK. I try my best. Thanks.

    July 21, 2015 at 2:33 pm #476503
    wiwaldi79

    This got me this result :; http://www.alfaweb.at/testwaldi/kontaktdetails/

    i have 20 classes.

    portrait_info_class_1 to 20 for each item i different class.

    July 21, 2015 at 2:35 pm #476504
    wiwaldi79
    .portrait_info_class_1{
top: 50px;
left: -20px;
}

.portrait_info_class_2{
top: 50px;
left: -20px;
}

.portrait_info_class_3{
top: 50px;
left: -20px;
}
}

.portrait_info_class_4{
top: 50px;
left: -20px;
}
    July 21, 2015 at 2:39 pm #476506
    Andy

    Hi!

    well, of course every class needs different values for top and left. So you would need to play around a little bit until it fits for you.

    Cheers!
    Andy

    • This reply was modified 9 years, 5 months ago by Andy.
    July 21, 2015 at 2:50 pm #476516
    wiwaldi79

    ok, i`ll do this. but how can i reduce the space here: http://imgur.com/6lDNBLk

    July 21, 2015 at 3:00 pm #476523
    Andy

    Hi!

    use this code: 

    .flex_column.av_one_fifth.flex_column_div.av-zero-column-padding.first.avia-builder-el-14.el_before_av_one_fifth.avia-builder-el-first {
right: 45px;
}

    and adjust as needed.

    Regards,
    Andy

    July 21, 2015 at 3:03 pm #476529
    wiwaldi79

    I really try this but the icons don`t appear at the correct place ;( whats wrong. and how can i reduce the wide of the first colum?

    /*Portrait Detail Infobox Styling*/

    .portrait_info_class_1{
left: -20px;
}

.portrait_info_class_2{
top: 60px;
left: -20px;
}

.portrait_info_class_3{
top: 50px;
left: -20px;
}

.portrait_info_class_4{
top: 50px;
left: -20px;
}

.portrait_info_class_5{
top: 40px;
left: -20px;
}
    July 21, 2015 at 3:05 pm #476533
    wiwaldi79

    Thanks that don`t work. but this will effect only this one page? i use this layout as preset for many other pages (avia LB preset). so how can i set the width of the colum via hand that this will work for all pages?

    custom id classes for all 5 colums or how? Thank you!

    July 21, 2015 at 3:29 pm #476550
    Andy

    Hey!

    I can see that the code I provided to you is working, as Icons got moved. As I already told you, you need to play around with the values, until it fits for you. Feel free to hire a freelancer for this job here: http://kriesi.at/contact/customization

    If you want my code from this post to work only on specific pages, you need to ad the page-id to it.

    Best regards,
    Andy

    July 21, 2015 at 3:46 pm #476570
    wiwaldi79

    What exactly does this code?

    .flex_column.av_one_fifth.flex_column_div.av-zero-column-padding.first.avia-builder-el-14.el_before_av_one_fifth.avia-builder-el-first {
right: 45px;
}
    July 27, 2015 at 6:40 pm #479231
    Yigit

    Hey!

    As you can see here – https://kriesi.at/support/topic/arrange-text-and-images-in-a-color-area/#post-476516
    Andy replied to your question with this code, so it should make the changes you shown in your screenshot.

    Cheers!
    Yigit

    July 31, 2015 at 9:47 pm #481566
    wiwaldi79

    CLOSED.

  • Author
    Posts
Viewing 26 posts - 1 through 26 (of 26 total)
  • The topic ‘arrange text and images in a color area…’ is closed to new replies.