clean theme and images

clean theme and images

by Chris Clark -
Number of replies: 8

I'm trying to change a custom version of the clean theme, however I can't seem to access images via css like normal?

background: url([[pix:header]]) white no-repeat 100% 0;

This syntax should be correct to target the header image in /mytheme/pix/

regardless of the extension (in this case it's just a  .jpg)

Average of ratings: -
In reply to Chris Clark

Re: clean theme and images

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

The correct syntax is:


background: url([[pix:theme|header]]) white no-repeat 100% 0;

if adding this to a CSS or LESS file. However if you are adding this as a Custom CSS setting using then you need to use normal HTML like this:

background: url(http://full path to image) white no-repeat 100% 0;

where Full path to image is the URL for the image on your server:

Hope this helps?

Mary 

In reply to Mary Evans

Re: clean theme and images

by Chris Clark -

Hey Mary,

This is the resulting url using your technique
/foundation/moodle/theme/image.php/foundation/foundation/1371518122/header

Compared to using the technique in my original post
/foundation/moodle/theme/image.php/foundation/core/1371518241/header

neither of which work unfortunately.

For reference:

I'm adding it to a custom .css i've added to /mytheme/styles/

 

which i've included by adding it to the config

$THEME->sheets = array('custom','primastyles');

which I have done before .. I know my custom sheet is working too.

Are either of the urls more correct in any sense?
or is there something obvious I may be missing? 

--Edit--

The folder the /moodle/ is in is called foundation (currently on a  development server) and the theme is called foundation as well could this cause issues?

I can see that my original one was looking in core whereas your one is searching in the foundation theme, but still neither is pointing to the correct location

-- Double Edit --

The urls as per theme designer mode - your version
/foundation/moodle/theme/image.php?theme=foundation&component=foundation&image=header

vs my original

your version
/foundation/moodle/theme/image.php?theme=foundation&component=core&image=header

In reply to Chris Clark

Re: clean theme and images

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

I was thinking more on the lines of...

moodle/theme/clean/pix/header.jpg with the your site http:// url at the start. I can't add this here as Moodle thinks its an image to be displayed. Stupid Moodle!

In reply to Mary Evans

Re: clean theme and images

by Chris Clark -

Thanks Mary I found my mistake,
I was using 


url([[pix:<Theme Name Here>|header]])

instead of just:

url([[pix:theme|header]])


In reply to Mary Evans

Re: clean theme and images

by William Lu -
Picture of Particularly helpful Moodlers

Dear Mary and Chris,

Are you talking about add the logo to every course page in CLEAN  theme?

I like the CLEAN theme in Moodle2.5.

Its easy to add my logo from CLEAN them setting page.

But, the logo only appears at the front page, whenever you navigate to other page, the logo is replaced by header text.

You can see my Moodle2.5 from here.

http://www.dct.aut.ac.nz/moodle/course/edit.php?id=2

Would you please tell me how can I add your magic lines to let my logo appears in every page in CLEAN  theme? Add it will be good if we can still keep the Header text.

I've been using Mary's magic lines for Decaf logo, works very well, Thank you again, Mary.

Don't understand why:

1. Decaf has not got the add logo field in Decaf setting page.

2. Why Decaf not allow Logo and Header appear at same time.

3. Why Clean Theme's logo only appears at front page. Every site need a logo, and the logo should be stay at the top ALWAYS.

(I’ve searched the Moodle forum, but the word ‘clean’ bring up too much irrelevant search results.)

Thanks

In reply to William Lu

Re: clean theme and images

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

Hi William,

I've just updated my Moodle 2.5 and on there the clean theme logo (as added in the theme settings page) does appear on every page not just the front page. This may be a recent change though as bootstrapbase and clean are still being refined and developed with a lot of work being put in by Mary, Gareth and David in particular.

As for decaf - well its up to an individual theme designer what settings they include in a theme settings page. There is no standard list of 'must includes' - there's not even a requirement that a theme MUST have a settings page at all!

But there should be no reason why you cannot display a logo and a heading at the same time in decaf if you make the appropriate changes to the layout/css files to show both. I'm not aware of anything specific in decaf that would prevent this. If you want to follow this up though I would suggest starting it in a different thread as it is not related to this current one on 'clean theme and images'

In terms of searching the extensive moodle forums, searching by a single word is likely to bring up far too many results - just as searching Google for a single word search term is unlikely to narrow down your results sufficiently. Try refining your searches for a more targeted result set.

In reply to Mary Evans

Re: clean theme and images

by Troy May -

Sorry to reply 3 years late but this doesn't work either.

That was good info to hear that you cannot use this type of css scripting in the Custom CSS area--the place where ALL of my worth-anything css is located. Thanks Moodle devs for setting it up that way.

However, I have also placed this type of css into my header.php, my main theme's styles/mytheme.css file, as well as various other css styles sheets located int he moodle files directory. And would you believe NOTHING shows up when using this pix:theme syntax?

Is there ANY way to write html/css in the "Custom CSS area" that will allow me to have a clean theme? It sucks having to go to every place where the term "/moodle/theme/mythemename/pix/" is located and chnage it to be something else when I decide to create a new Moodle install using this theme.

And I do not wish to use the replace.php tool, as I also have php core files that have been modified and need the correct scripting to work no matter what url they happen to find themselves.



In reply to Troy May

Re: clean theme and images

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

The pix:theme syntax works fine within the css style sheets themselves, but there is no way to make it work within the CustomCSS as that itself as a post processed setting. You therefore need to use standard css notation for the image location in the customcss and not the Moodle internal formats such as pix:theme.

It's fairly straightforward to simply copy your entire customcss into a text editor, run a find and replace and then copy it to your new theme. Takes about 30seconds.

Is there any reason, given that you have full server access, why you are using customcss rather than a proper stylesheet? If you use the proper stylesheet then you would be able to use that pix:theme notation and it would just work, and it would be portable from site to site. Just create a clone of Clean, add a style sheet and include your css, with the pix:theme|image syntax in there.

https://docs.moodle.org/dev/Using_images_in_a_theme