CSS for custom theme doesn't display data the way I want it to.

CSS for custom theme doesn't display data the way I want it to.

by Barb Hall -
Number of replies: 10

Hello, I'm using Moodle  2.4.1 and have created a custom theme called dspt based on the base theme provided with the install package.

I am trying to create a css tooltip that will allow my students to pass a mouse over the word "answer" and display an answer for practice questions they will be asked to do in their lessons.

I've tried adding the css to the head section, and creating a  css file called dspt.css, which I have installed into the style directory of my custom theme.   Note I did not do both at the same time, but tried it in both places with the same results.

Here's the CSS I coded:

/* tooltip styling */
.dspttooltip {
cursor:help;
margin: 2px;
color: red;
font-weight:bold;
font-size: 13px;
position:relative;
text-decoration:none;
z-index:20;
}

.dspttooltip span {
display:none;
text-decoration:none;
}

.dspttooltip:hover {
z-index:21;
}

.dspttooltip:hover span {
display:block;
width:250px;
border-color: #808080;
border-style: ridge;
border-width: 2px;
border-radius:6px;
padding:5px;
color:#000;
background:#ffff80;
text-decoration:none;
font-size:13px;
font-weight:normal;
text-align: left;
position:absolute;
padding:2px;
top:20px;
left:-10;
-moz-box-shadow: 2px 2px 11px #666;
-webkit-box-shadow: 2px 2px 11px #666;
}

And the HTML in the book I've created:

<div><span style="font-weight: bold;">2.</span> Question? <a href="#" class="dspttooltip">Answer<span>Blah, blah,blah</span></a></div>

What I want to see is the "Question", followed by Answer in red.  When the student hovers over "Answer", the cursor should change to the help cursor, and a stylish tooltip should be displayed containing "Blah,blah,blah".

What I'm seeing is "Question", followed by "Answer" and then the answer.  Neither the colour, the cursor, or the style for the tooltip have been recognized.  

I have had success getting this to work standalone on cssdesk.com, but can't get it to work in Moodle.

Sorry, I tried to upload a screenshot but can't for some reason.

I can give anyone access to my moodle if need be.

Can anybody tell me if I'm missing something?  Also what is the best place to put this type of code, in the <head> section, or in the dspt.css file in the theme?

Many thanks in advance,

Barb

Average of ratings: -
In reply to Barb Hall

Re: CSS for custom theme doesn't display data the way I want it to.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

In the dspt.css file is fine Barb, but have you added that file to the config.php for your dpst theme?

$THEME->sheets = array(
    'pagelayout',   /** Must come first: Page layout **/
    'core',         /** Must come second: General styles **/
    'admin',
    'blocks',
    'calendar',
    'course',
    'dock',
    'grade',
    'message',
    'question',
    'user',
    'filemanager',

    'dspt'
);

Also, I haven't checked this but should it be

.dspttooltip:hover span:hover {

?

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: CSS for custom theme doesn't display data the way I want it to.

by Barb Hall -

Hi Richard and thanks,

I checked the config.sys file as you suggested, and yes I did, but the first few lines are this:

$THEME->name = 'dspt';
$THEME->parents = array('base');
$THEME->sheets = array('dspt');

I followed the instructions in creating your own theme, and this was what was suggested.  Is it accomplishing the same thing?

Also, what is the best place for this CSS?  The <head> section or in dspt.css?  I'm a little confused about the order Moodle applies CSS rules.

Thanks in advance,

Barb

Average of ratings: -
In reply to Barb Hall

Re: CSS for custom theme doesn't display data the way I want it to.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Yes that's it Barb smile You've already done it - and as you have access to the files, I would say the best place for the css is the separate dspt.css file in the styles folder that is called from config.php like this.

Essentially that calls them into the head section of the page anyway, the same way as manually adding an external css file in the head would on another website.

Apologies - I forgot to mention the theme designer mode or purging cache that Mary has reminded about smile

The css rules are applied in the order they are listed in the config.php file of the theme, so the later ones (if you have more than one) over ride the earlier ones, these override any css rules applied by the parent themes which in turn override any css set by moodle core components.

In terms of what order they are applied if you include css in the head section of the layout file manually - I think that would depend on where you put it in relation to the standard_head_html call, which I believe is where the separate css files are called from. Put it before the standard_head_html and it could be overwritten by rules in the external css files, and visa-versa.

Personally, I would stick to keeping them separate- layout and structure in the layout file, css and styling in the css files

HTH

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: CSS for custom theme doesn't display data the way I want it to.

by Barb Hall -

Thank you very much Richard!

Average of ratings: -
In reply to Barb Hall

Re: CSS for custom theme doesn't display data the way I want it to.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Barb,

After adding the stylesheet to the list in your theme's config.php as suggested by Richard, you will also need to enable Theme Designer Mode first before you see the changes.

The code you have there is very similar to a CSS Pop-up that I found in Eric Mayer's Smashing CSS. I was reading it on my Kindle last night and came up with an alternative set of HTML/CSS which I have added here as a zip file for you to compare.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: CSS for custom theme doesn't display data the way I want it to.

by Barb Hall -

Hi Mary, and thanks, I will check it out!!

It turns out that it was a cache issue, even after purging cache and clearing theme cache, I didn't see the changes right away.

In a semi-related issue, I've created a screenshot for my theme which I uploaded to theme/dspt/pix, but it doesn't appear on the list of themes, even though the theme itself does.  And I don't see the favicon either. Any suggestions?

Thanks in advance,

Barb

Average of ratings: -
In reply to Barb Hall

Re: CSS for custom theme doesn't display data the way I want it to.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Barb, There is a setting the your theme's config.php which says somethinglike hide from theme selector. You need to either change it to false or remove that setting completely.

As for the cache issue you need to leave Theme Designer Mode enabled while making changes. Then all you need to do is refresh your screen and also if it's not set, you will need to clean up you browser cache too.

Oh...just in case you did not know. The screenshot.jpg needs to be 500px wide, and whatever height you want it to display.

The screenshot file name HAS to be called screenshot but it is up to you what image file type it is. So jpg, gif, or png it's up to you. But the name IS very important.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: CSS for custom theme doesn't display data the way I want it to.

by Barb Hall -

Thanks Mary, I've had a look at config.php in my theme directory but can't find the setting you refer to.

I've tried everything you suggested regarding the cache issue (clearing browser cache, using designer mode, and clearing theme cache, and refreshing), but still don't see a picture (which I created at 500px by 400px and named screenshot.jpg and uploaded to the pix directory) in the theme selector. The theme is not hidden from the theme selector, so I can select it, but there is no screenshot.

Still don't see the favicon.ico I uploaded to the pix directory in my theme either.

Any other ideas?

Thanks in advance,

Barb

Average of ratings: -
In reply to Barb Hall

Re: CSS for custom theme doesn't display data the way I want it to.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

The screensot.jpg needs to be in your ../theme/dspt/pix

Are you sure the screenshot.jpg is a valid file as there have been problems where people just change a file name from png or gif to jpg and wonder why it doesn't work.

It could be that server permissions are blocking that directory, so check you have the correct permissions set.

Moodle recommends:

0755 for directories

0644 for files

Average of ratings: -
In reply to Mary Evans

Re: CSS for custom theme doesn't display data the way I want it to.

by Barb Hall -

Hi Mary

Thanks for your helpful suggestions.  I originally created the screenshot using the windows 8 snipping tool and saved it in jpg format with the name screenshot.jpg, and it exists in my pix directory for my theme, as does the favicon.ico file, but neither appear where they're supposed to.  Permissions seem ok too.

I'm not terribly concerned about the theme screenshot as I'm the only one who will see it anyways, but it sure would be nice to get the custom favicon showing up!

Thanks for all your help on this Mary.  It is very much appreciated smile

Barb

 

Average of ratings: -