courses page vs profile courses page

Last updated on by

Home › Forums › Legacy Support › Support queries › Styling issues › courses page vs profile courses page

Viewing 15 posts - 1 through 15 (of 18 total)
1 2
  • Author
    Posts
  • November 4, 2018 at 8:36 pm #183163
    MeesterGijs
    Spectator
    Let's talk about styling :) See my screenshot for my issue/wish. Curious to see if it's possible.. screenshot
    November 5, 2018 at 7:13 am #183203
    logan
    Member
    Hi MeesterGijs, Please try this in custom css. 
    .bp-user.course .course.mycourse .item-credits a font>font{ background-color: #88DEB4 !important; color: #fff; position: absolute; margin-top: -6px !important; font-size: 14px; display: block; padding: 8px 15px; right: 50px;}

.course.mycourse .item-credits form#retake_course_submit_form> a.link.retake_submit.tip {display: none;}
    effects will be : http://prntscr.com/lehu0q
    November 5, 2018 at 8:30 am #183212
    MeesterGijs
    Spectator
    It looks amazing. That exactly what I want. Thanks! But the code doesn't work in my custom css. Could you give it a try?
    November 5, 2018 at 9:37 am #183229
    logan
    Member
    Please use these codes in custom css. .bp-user.course .course.mycourse ul#course-list .item-credits strong { background-color: #88DEB4 !important; color: #fff !important; position: absolute; margin-top: -6px !important; font-size: 15px !important; display: block !important; padding: 8px 15px !important; right: 45px;} .bp-user.course .course.mycourse .item-credits form#retake_course_submit_form a.link.retake_submit.tip {display: none;} Refer: http://prntscr.com/lejab9  
    November 5, 2018 at 10:11 am #183240
    MeesterGijs
    Spectator
    Great! I had to change the margin to: margin-top: -10px to match the rest. How do I make the font and hovering match?
    November 5, 2018 at 11:04 am #183251
    logan
    Member
    try this: .bp-user.course .course.mycourse ul#course-list .item-credits strong:hover{ color: #000 !important;}
    November 5, 2018 at 6:53 pm #183353
    MeesterGijs
    Spectator
    Fixed it. Thanks a million, Logan! But... Can you help me with the code so that the button has the same height? The bottom of the finished courses is much lower than the others.. screenshot Btw, cool how these are different classes/div (I have no understanding of this..). It makes it possible to style them differently. Is that also possible at the courses page? screenshot
    November 6, 2018 at 4:34 am #183388
    logan
    Member
    Hi, use this css in your customize > custom css > paste. .bp-user.course .course.mycourse ul#course-list .item-credits strong { font-size: 14px !important; padding: 5px 24px !important; vertical-align: middle !important; border-radius: 3px !important;} Refer: http://prntscr.com/lev4y6 .directory.course div#course-dir-list ul#course-list .item-credits strong>font>font {background-color: #88DEB4 !important; color: #fff !important; font-size: 13px !important; padding: 8px 25px !important; border-radius: 3px !important; } Refer this: http://prntscr.com/lev760 happy coding.    
    November 6, 2018 at 8:22 pm #183528
    MeesterGijs
    Spectator
    Happy coding, haha! Although, that second bit of code didn't work for me. Nothing changed. I saw it loading something but then nothing changed..
    November 9, 2018 at 10:33 am #183711
    Diana
    Participant
    @meestergijs Refer: http://prntscr.com/lg8m1e The alignment seems to be fine here.
    November 9, 2018 at 12:55 pm #183736
    MeesterGijs
    Spectator
    I mean that the second string of code didn't change style of course buttons; screenshot
    November 10, 2018 at 11:27 am #183853
    Diana
    Participant
    @meestergijs, Apologies....But I am not getting this which second string ?
    November 10, 2018 at 11:29 am #183854
    MeesterGijs
    Spectator
    Two replied back: .directory.course div#course-dir-list ul#course-list .item-credits strong>font>font {background-color: #88DEB4 !important; color: #fff !important; font-size: 13px !important; padding: 8px 25px !important; border-radius: 3px !important; }
    November 12, 2018 at 11:05 am #184032
    Diana
    Participant
    This reply has been marked as private.
    November 12, 2018 at 8:02 pm #184137
    MeesterGijs
    Spectator
    Thank you! And is this the correct code to lower the buttons, without affecting other buttons on other pages? .directory.course #buddypress ul.item-list.grid li .item .item-credits { padding: 25px; } And this for hovering style? .directory.course div#course-dir-list ul#course-list .item-credits strong:hover{ background-color: #fff !important; color: #88deb4 !important; font-size: 15px !important; (changed it to 15, a bit bigger) padding: 8px 25px !important; border: 2px solid #88deb4 !important; border-radius: 3px !important; }
  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 18 total)
1 2
  • The topic ‘courses page vs profile courses page’ is closed to new replies.