#3 CSS customization for lighter background

open
nobody
5
2015-02-15
2008-01-25
Anonymous
No

I just thought I'd make it easy for people that want a white or light background. The changes are minimal some use the &dtml-global.... settings that you can easily edit in the ZMI /portal_skins/custom/base_properties (properties tab).
-Ezra (schoonoe _at_ uwosh _dot_ edu)

<code>

/*
---------------------------------------------------------------------------
Step 1... I didn't use the alternate solution, but try if you like.
---------------------------------------------------------------------------
*/

/*
The following code is for a lighter version of the gallery display
navigate in the ZMI to portal_skins - plonegalleryview - pgv_sg_styles.css
and click the Customoze button. Then make these changes to the code...
BUT KEEP ALL OF THE OTHER CODE IN PLACE!
an alternate solution would be to add " !important" before the last semi-colon
of each of these changes, and paste them before the closing "dtml-with" tag.
*/

#myCarousel
{
background: transparent;
/* (or White, or #fff) */
}

.jdGallery a.carouselBtn
{
color: &dtml-globalFontColor;;
}

.jdGallery .carousel
{
background: #eee;
color: &dtml-globalFontColor;;
}

.jdGallery .carousel .carouselInner .thumbnail
{
background: #eee;
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
}

.jdGallery .carousel .label .number
{
color: &dtml-linkColor;;
}

.jdGallery .slideInfoZone
{
background: #fff;
/* (not transparent, or you will see overlapping images if they are not all the same size) */
color: &dtml-globalFontColor;;
}

/*
---------------------------------------------------------------------------
Step 2... I recommend using the alternate solution for this one.
---------------------------------------------------------------------------
*/

/*
The following code is for portal_skins - plonegalleryview - pgv_sg_jd.gallery.css
and click the Customoze button. Then make these changes to the code...
BUT KEEP ALL OF THE OTHER CODE IN PLACE!
*/

/*
An alternate (and elegant) solution would be to add " !important" before the last
semi-colon of each of these changes, and paste them before the closing "dtml-with"
tag of the custom css you created for pgv_sg_styles.css
*/

#myGallery
{
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
}

.jdGallery .slideElement
{
background-color: #fff;
}

.jdGallery .loadingElement
{
background-color: #333;
}

.jdGallery .slideInfoZone
{
background: #DDDDDD;
color: &dtml-globalFontColor;;
}

.jdGallery .slideInfoZone p
{
color: &dtml-discreetColor;;
}

.jdGallery a.carouselBtn
{
background: #DDDDDD;
color: &dtml-discreetColor;;
}

.jdGallery .carousel
{
background: #DDDDDD;
color: &dtml-discreetColor;;
}

.jdGallery .carousel .carouselInner .thumbnail
{
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
}

.jdGallery .carousel .label .number
{
color: &dtml-discreetColor;;
}

.jdGallery a.right, .jdGallery a.left
{
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</code>

Discussion


Log in to post a comment.