border size images in Bloxx

Exhibeo
1

I would love to change the border size of the images in Bloxx to zero. This is not possible in exhibeo, but perhaps in the bloxx-styles.css file? Can someone suggest the correct line and code? That would be great!

All the best, Hanna

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hanna,

Try inserting this before the page </head> tag:

<style type="text/css">

    /* Remove the border from the thumbnails: */
    div.bloxx-thumb {
        background-color: transparent;
        box-shadow: none;
        margin: 10px;
    }
    .bloxx-anchor img {
        box-shadow: rgb(221, 221, 221) 0px 1px 3px;
    }

    /* Remove the border from the large image: */
    .bloxx-image {
        border-width: 0 !important;
    }

</style>

If you just want to remove the border from the large (full size) image, remove everything but the lines beneath the /* Remove the border from the large image: */ comment. Vice-versa if you just want to remove the borders from the thumbnails.

Now, overriding like this isn’t as pretty as adjusting the actual CSS, but I usually don’t recommend modifying the output of WYSIWYG tools if you can avoid it, as on the next publish all your changes will be removed.

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

You can edit the CSS in the .xbexport pretty safely. It’ll just use that CSS the next time the page is published (and continue to do so until the CSS is changed again).

Joe

On 25 Jun 2014, at 14:09, Caleb Grove email@hidden wrote:

Hanna,

Try inserting this before the page </head> tag:

/* Remove the border from the thumbnails: */ div.bloxx-thumb { background-color: transparent; box-shadow: none; margin: 10px; } .bloxx-anchor img { box-shadow: rgb(221, 221, 221) 0px 1px 3px; } /* Remove the border from the large image: */ .bloxx-image { border-width: 0 !important; }

If you just want to remove the border from the large (full size) image, remove everything but the lines beneath the /* Remove the border from the large image: */ comment. Vice-versa if you just want to remove the borders from the thumbnails.

Now, overriding like this isn’t as pretty as adjusting the actual CSS, but I usually don’t recommend modifying the output of WYSIWYG tools if you can avoid it, as on the next publish all your changes will be removed.

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

If you do any work to the Exhibeo file and re-export that, it will
over-write any changes you’ve made to the CSS or Javascript files within
the exhibeo export file.

What I do is to make a copy of the edited file and place it in the working
folder for that project. Then if I have to make changes to the Exhibeo file
and re-export for FWP, then I can simply copy/paste the CSS from the backup
file into the new xport.

PS - just a reminder for those who don’t know, you can right-click the
export file and choose “show contents”… the CSS will be found in a
subfolder of the package. Be a bit cautious at that level, as it’s more
brain surgery than not - but a good way to edit the CSS.

PSS - if you use a tool like Safari’s Inspect Element, there is a Debugger
tool you can use to pause the animation in order to inspect and fine-tune
the CSS for the Exhibeo stuff. This has been indispensable to me.

PSSS - BTW, I love how exhibeo makes use of HTML5 elements (figure &
figcaption) that FWP has yet to embrace. C’mon FWP developers - let’s keep
up shall we?

–
Ernie Simpson

On Wed, Jun 25, 2014 at 9:17 AM, Joe Billings email@hidden wrote:

You can edit the CSS in the .xbexport pretty safely. It’ll just use that
CSS the next time the page is published (and continue to do so until the
CSS is changed again).

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Indeed. Thanks for the extra information, Ernie.

On 25 Jun 2014, at 14:39, Ernie Simpson email@hidden wrote:

PSSS - BTW, I love how exhibeo makes use of HTML5 elements (figure &
figcaption) that FWP has yet to embrace. C’mon FWP developers - let’s keep
up shall we?

Something could be happening sooner than you expect :slight_smile:

Joe

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Caleb, Joe and Ernie - thanks a lot. I will try your suggestions. Indeed thankful again for this great & supportive forum!

All the best, Hanna

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

is it possible to change the thumbnail border to 4px have changed large image but struggling with thumbs.

/* Remove the border from the large image: */
.bloxx-image {
border-width: 4px !important;
}

If I try border-width: 4px !important; on div.bloxx-thumb
it goes around the padding!

Help appreciated Matt

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options