Home › Forums › Legacy Support › Support queries › Styling issues › courses page vs profile courses page
- This topic has 17 replies, 3 voices, and was last updated 5 years, 5 months ago by logan.
-
AuthorPosts
-
November 4, 2018 at 8:36 pm #183163MeesterGijsSpectatorLet's talk about styling :) See my screenshot for my issue/wish. Curious to see if it's possible.. screenshotNovember 5, 2018 at 7:13 am #183203loganMemberHi MeesterGijs, Please try this in custom css.
effects will be : http://prntscr.com/lehu0q.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;}
November 5, 2018 at 8:30 am #183212MeesterGijsSpectatorIt 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 #183229loganMemberPlease 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/lejab9November 5, 2018 at 10:11 am #183240MeesterGijsSpectatorGreat! 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 #183251loganMembertry this: .bp-user.course .course.mycourse ul#course-list .item-credits strong:hover{ color: #000 !important;}November 5, 2018 at 6:53 pm #183353MeesterGijsSpectatorFixed 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? screenshotNovember 6, 2018 at 4:34 am #183388loganMemberHi, 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 #183528MeesterGijsSpectatorHappy 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 #183711DianaParticipant@meestergijs Refer: http://prntscr.com/lg8m1e The alignment seems to be fine here.November 9, 2018 at 12:55 pm #183736MeesterGijsSpectatorI mean that the second string of code didn't change style of course buttons; screenshotNovember 10, 2018 at 11:27 am #183853DianaParticipant@meestergijs, Apologies....But I am not getting this which second string ?November 10, 2018 at 11:29 am #183854MeesterGijsSpectatorTwo 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 #184032DianaParticipantThis reply has been marked as private.November 12, 2018 at 8:02 pm #184137MeesterGijsSpectatorThank 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; } -
AuthorPosts
- The topic ‘courses page vs profile courses page’ is closed to new replies.