Hi,
I'am trying to write some custom css to effect a particular coursebox on the frontpage using it's id, but cannot figure out the where to place the id to get the code to work. I am using the adaptable theme and covtiles selected, moodle 3.5.2+.
The code I am trying to change is:
#page .covtiles.panel .panel-body{
}
At which point do I place the id reference for example course-3.
Thanks,
Dan.
Moving to Themes forum...
The course ID is only passed by moodle. Adaptable do not use this ID so you can't apply a custom style to a single course box depending of it.
I thought the course id class is in the body tag, so therefore at the start of the selector.
Hi,
In most circumstances you can make alterations to course pages based on the body ID as well as body CLASSES. To find these you need to activate your browsers Web Developer tool which shows the body code of the page.
These are seen in the body tag of the page you are wanting to restyle.
<body id=“page-site-index”classes=“pagelayout-frontpage ... etc“;
Usually the css selector ID selector comes first followed by the class.
For example:
#page-site-index.pagelayout-frontpage { }
So depending on which page/pages you need to style you need those body ids and classes.
Hope this helps?
Cheers
Mary
PS: by the way the course I’d in this case course-3 is a body class selector NOT an ID in CSS terminology!!!
Hi Daniel,
If I think this is what you are meaining about the course ID and in the course box as you call it the CSS selector in this case may well be what is known as an ATTRIBUTE selector and traeated differently than most css selectors.
Try the CSS Tricks page on Attributes HERE
https://css-tricks.com/almanac/selectors/a/attribute/
This explaints how it needs to be written. In this case.
Cheers
Mary
EDITED:
Here is a small example of what I mean and how you can alter some areas withing Moodle Themes. This is not Adaptable theme I am us-ng, it's Boost theme, but the principle is the same.
The CSS I added to the Raw SCSS area of the above named theme.looks like this:
[data-course-id="2"] { border: 6px groove #890; }
Hope this helps all the same?
Mary
Hi Mary,
Thanks for your help, from what you have suggested I have been able to effect certain elements of the course-box's by altering certain attributes as below:
#page .covtiles.panel .panel-body a[href*="2"]
{opacity: 0.5 !important;}
#page .covtiles.panel .panel-body .cimbox[style*="infect"]
{opacity: 0.5 !important;}
This works as a workaround for now but I am still struggling to just select a single course-box with course id, i'm not sure if this is something that can be done in the adaptable theme when using covtiles, because I looked at the boost theme and I could see the [data-course-id] attribute you mentioned when using course-boxes on the frontpage. I also changed the adaptable theme list options to the moodle default and I could see a course id attribute like this [data-courseid="6"], but when I switched back to covtiles, there was no attributes for course id.
The workaround I have, works for me at the minute but if anyone does come across the way to do this by using the adaptable theme and covtiles then it would be useful to know.
Thanks,
Dan.
Hi Dan,
Did you see the EDITED part of my last comments and it was late last night I wrote it which gives the data element you need.
https://moodle.org/mod/forum/discuss.php?d=381241#p1536966
Just try adding this as a single line in the Raw CSS section of Adaptable.
[data-course-id="2"] { border: 6px groove #890; }
Then you will see how it works...
Cheers
Mary
Hi Mary,
I did see the edited part of your comment but as mentioned that code works for the boost theme and if I am running adaptable with the moodle default layout (for this you need to remove a hyphen so its [data-courseid="2"], but for some reason when using the adaptable theme with covtiles layout this data element does not work. I am not sure why this is the case, I couldn't see any reference to it when I was using inspect view, but I could when I was using the default layout.
Thanks,
Dan.
Ok...in that case I will check out using the Adaptable theme, Im in the middle of updating Win10 on my computer and it’s taking ages.
With luck I may be able to come up with a solution for you.
Cheers
Mary