Hi

I am using Drupal 7 and latest dev relase of galleria.

I am finding it a pain trying to style using css, and do not finf the configuration page much help, although I may be missing something.

Often, when i am styling I use Firefox Firebug to view code and tweak CSS live before implementing - it allows me to to see which CSS does what and change accordingly.

However, when i try and do this with Galleria, most of the important styling is within element.style, which, although I can tweak on firebug, i cannot implement changes as it is not an actual style.

I have configured via admin page as much as I can, and have also looked at creating a theme using galleria-container.tpl.php, but no luck so far.

Any help and guidance would be appreciated...

Matt

Comments

kroimon’s picture

The correct way to style Galleria is to create a new (or adapt an existing) theme.

Have a look at the classic theme directory of you Galleria library: sites/all/libraries/galleria/themes/classic. It contains the main theme file called galleria.classic.js and the corresponding CSS file galleria.classic.css along with the used graphics.

You should also have a look at the Galleria documentation, especially the "Creating a Theme" article.

mattys’s picture

Thanks for that kroimon.

However, i did know this.

The main image size should be width 505px, but the element.style code is resizing to 437px (when inspecting css via firebug), and, frustratingly, sometimes 435px see below:

element.style {
display: block;
height: 290px;
left: 34px;
opacity: 1;
position: relative;
top: 0;
width: 437px;
}

I cannot see anything corresponding to this in galleria.classic.css, or, more importantly, galleria.classic.js, as it is an embedded elemnt.style, probably being produced by some javascript, which for the life of me I cannot find!

Any ideas?

mattys’s picture

i sorted it

found lead to fix here http://drupal.org/node/448284

i used below css code, which knocked out the inline style:

.galleria-image img {
width: 505px !important;
}

flacoman91’s picture

subscribing.

kroimon’s picture

Status: Active » Postponed (maintainer needs more info)

I think the element.style is set by the Galleria Javascript.
Have you set a "height" or "width" option in the option set of your gallery?

mattys’s picture

yes, i set width to 505, but code within javascript must have been knocking this out, see element style below:

element.style {
display: block;
height: 290px;
left: 34px;
opacity: 1;
position: relative;
top: 0;
width: 437px;
}

as per post above, i managed to sort by forcing css style using 'important!'

however, would prob be better if didn't have to do this

mattys’s picture

Status: Postponed (maintainer needs more info) » Active

I am still having same problems as above

mainly that although images styles have been attached to galleria photos, e.g. main photo and thumbnails, these do not appear to be having any effect, the images seem to be being resized via code in javascipt (element.style)

i am able to override this using css and !imortant

however, when i do this it rocks the whole set up and the canvas/div photos are displayed in dont resize for portrait picsso doesn't deal well with mixture of portrait and landscape

this example is where i have not hacked with CSS, works fine http://www.sorcewebdesign.co.uk/select/lake-district/bridge-end-farmhous...

however, i would like to resize the thumbnails, make larger so only about 3, or 4 display, then scroll for rest

now, at the mo', the only way i know of doing this is by hacking the css, as the image dont work, but which i would rather not do - from past experience, when i do this, it ruins the display, e.g. thumbnails over lap, or underneath, main photo

is there something i am missing, or is this a bug with code, that i cannot get image styles, especially for thumbnails, to take effect?

kroimon’s picture

As I said before: the image styles don't affect how big the image are displayed in the browser, they can just configure the size of the images sent to the browser. So to change the size of the images, create your own Galleria theme as documented here, where you can create/edit your own CSS for the Galleria instance, so it displays the thumbnails and images in the exact size you want.

Also have a look at the imageCrop and/or the thumbCrop options.
By default, Galleria automatically scales down the images so they entirely fit the stage.

I try to help you, but strictly speaking this is out of the scope of the Drupal module and more a question for the actual Galleria developer at http://galleria.aino.se/

kroimon’s picture

Status: Active » Closed (fixed)
g00glethis1’s picture

ref: http://drupal.org/node/1265240

I'm running into the same issue. Can someone please tell me which file(s) I need to edit for the Galleria for this to happen.

I want to change this:

element.style {
    display: block;
    height: 380px;
    left: 0;
    opacity: 0;
    position: relative;
    top: 10px;
    width: 910px;
}

To this:

element.style {
    display: block;
    height: 400px;
    left: 0;
    opacity: 0;
    position: relative;
    top: 10px;
    width: 960px;
}

So how do I do this?

Thanks in advance!!!!

Exelol’s picture

I know this is an old post...BUT MAN...THANK YOU VERY MUCH! after hours trying to figure out how to fix that Inline code problem, u saved me with

.galleria-image img {
width: 505px !important;
}

...i made account here only to thank you !

mattys’s picture

massive awesomeness