Theming ownclod


#1

when theming ownclod, at the gallery view, I have a white background. When I inspect the page in firefox it tells me:

Inline
Element {
background-color: rgb(255, 255, 255);
}

Can someone please tell me where to find the “inline” Style that defines the “content-wrapper” background to change it?

Second Question: Does anybody know whre to change the “hover” state backgrond color of the buttons in ownclod?

thx, randomSeed


#2

If you wan’t to change the background in the Gallery App please do the following:

Create some folders:
In your Theme create -> "apps"
Inside "apps" -> "gallery"
Inside "gallery" -> "css"

Inside “css” create a file called “styles.css” and put this line of code into:
#content { background-color: red; }

You can replace “red” with RGB or HEX values.

About your second question: Which buttons do you mean in particular?


#3

Hi cscherm,

first of all: many thanx for your fast reply!

As for the Buttons: first in the “files” view managed to get the hover styles right, but I am unable to change the background image, it remains grey. I have put a green version into my theme, but it seems I have to add some code here. In some cases it worked without code:

Second: In the gallery app the add button stays with a grey icon, even it has been changed in the files view:

in the phone track app there is an “inline” style, that defines the icons to be blue, if I set this color in firefox inspector to grey it works, but it does not remain grey. I am unable to find the document in which this inline style has been defined. Could u tell where it is set?
Here I am having the problem with the “active” state, I can´t find where to set this other than white:

thank you so much for your help;
Christoph


#5

Wow, you did a lot of work here! Nice!

For the second picture

I think this is because the Gallery is a different app as the Files. Maybe there are different selectors, too.

For the third picture

I have a solution for the active state:
Do you look for line 635-637 in phonetracker.css?

.sidebar-tabs > li.active {
    background-color: #1cc151;
}

If you want to change the color of the icons itself you have to look inside js/phonetracker.js - you can find the color in line 5331


#6

Thank you! It´s good to hear someone likes the work I do!

and thanx for your suggestions, they worked perfectly. I was looking for the javascript file in which the color of the icons has been set, but I couldn´t find it myself - your tip was perfect!

for the first post I asked (background of gallery page) I found the inline style in “galleryview.js”, it looked like this:

	/**
	 * Sets the background colour of the photowall
	 *
	 * @private
	 */
	_setBackgroundColour: function () {
		var wrapper = $('#content-wrapper');
		var albumDesign = Gallery.config.albumDesign;
		if (!$.isEmptyObject(albumDesign) && albumDesign.background) {
			wrapper.css('background-color', albumDesign.background);
		} else {
			wrapper.css('background-color', '#333333');
		}
	},

and here I set the bg before I could read your first answer. Do you think it would be better to do it your way?

For the right top Button of the “file app” I found the following in “gallerybutton.js” at line 56:

if ($(’#filesApp’).val()) {

		$('#fileList').on('updated', GalleryButton.onFileListUpdated);

		// Button for opening files list as gallery view
		GalleryButton.button =
			$('<div id="gallery-button" class="button view-switcher">' +
					'<div id="button-loading"></div>' +
				'<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-pictures.svg') +
				'"' +
				'alt="' + t('gallery', 'Gallery view') + '"/>' +
				'</div>');

		GalleryButton.button.click(function () {
			$(this).children('#button-loading').addClass('loading');
			window.location.href = GalleryButton.url;
		});

		$('#controls').prepend(GalleryButton.button);
	}

Here the path is set to the default image directory inside /atd_cloud/core/img/actions which I can´t override to fetch the image out of my theme: /atd_cloud/apps/dark_theme/core/img/actions. do you have an idea how to do this, mabee?

Thanx very much for all your help up to now!,
3rdEye


#7

Everything that can be done in the theme should be done this way. If not, you have to start over with every update (from apps or the server).

For the gallerybutton.js approach, I just can’t think of anything else than patching it directly. What works in any case is to code the URL hard. Something like that:

// Button for opening files list as gallery view
		GalleryButton.button =
			$('<div id="gallery-button" class="button view-switcher">' +
					'<div id="button-loading"></div>' +
				'<img class="svg" src="apps/dark_theme/core/img/actions/toggle-pictures.svg"' +
				'alt="' + t('gallery', 'Gallery view') + '"/>' +
				'</div>');

To tell you the exact answer I would of course need your theme. But as an idea this should be enough for you - as a passionate theme expert. :slight_smile:


#8

Thats the way I did it, thanx.
Changes I have to make to Javascript files are still in my theme - I copy the javascript file inside my theme to the correct file structure location, so the original script gets overruled, just like it works with .css files…

I thank you for your support and interrest,
all the best,
Christoph

P.S.: I saw you come from Nuremberg, I am @ Salzburg, Austria - so we could have had the conversation in german, right? :slight_smile:


#9

Yes, it is. But to stay with english makes sense. It could be that someone else has a similar problem.

Glad to hear you are happy now.