Shape 5

Joomla Templates => EZ Web Hosting - Club => : buck July 25, 2013, 09:08:52 PM


: Slide Circle
: buck July 25, 2013, 09:08:52 PM
Is there a way to change the size of the text circle?  It's covering up my logo and I want to shrink it.

: Re: Slide Circle
: ajstevens July 26, 2013, 04:43:26 AM
Yes there is!  :)

Go to JOOMLA INSTALL/templates/ezwebhosting/css/template.css

line 1348:

:
.jdGallery .slideInfoZone h2 {
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
text-shadow: none !important;
font-size: 3.7em !important;
font-weight: 300 !important;
height: 300px;
line-height: 54px;
padding: 67px !important;
text-align: center;
width: 300px;

you'll want to change the height and width options.

Also note, with the responsive layer enabled, you will also have to change the values for the file s5_responsive.css

specifically, line 73:

:
@media screen and (max-width: 1325px)

....

.jdGallery .slideInfoZone h2 {
font-size: 2.2em !important;
height: 200px;
line-height: 37px;
padding: 60px !important;
width: 200px;

within s5_responsive.css there are several (max-width: ....) conditions that you will need to search for.
These are obviously applied to the smaller screens to keep the size of the circle in check when the image slider reducing in size.
I tried to change all of these to a much nicer %width, which reduces in proportion to the screen width... but it's not as simple as it sounds.

Let me know if that helps

: Re: Slide Circle
: buck July 26, 2013, 09:12:39 AM
That worked to change the size of the circle.  Now I need to move the circle down and out of the way.


Found it.

.jdGallery .slideInfoZone {
   bottom:150px !important;
    overflow: visible !important;}

: Re: Slide Circle
: ajstevens July 26, 2013, 05:48:18 PM
Your welcome. 

by the way, I figured out a neat way to set the visibility to hidden for the <h2> and <p> tags within the javascript.  It's inside the following file:

JOOMLA INSTALL/modules/mod_s5_image_and_content_fader/js/jd.gallery.js

Line 1161:

change

:
var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);

var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);

to
:
var slideInfoZoneTitle = new Fx.Morph(new Element('h2').injectInside(this.slideInfoZone.element)).set({'visibility':'hidden'});

var slideInfoZoneDescription = new Fx.Morph(new Element('p').injectInside(this.slideInfoZone.element)).set({'visibility':'hidden'});

I'm now working on resetting these styles to visible when it places content inside... which would allow the circles to disappear when you DO NOT place text in the boxes.  By the way, Shape5.com, if you want to employ me, give me a message and I'll send my Resume ;)

: Re: Slide Circle
: mikenicoll July 26, 2013, 06:20:31 PM
Hello,

Thanks for the additions ajstevens. If you require any further assistance buck just let us know.

-Mike

: Re: Slide Circle
: ajstevens July 27, 2013, 09:09:49 AM
Check out the javascript modifications to stop the circles alltogether when there's no text to display:

http://www.shape5.com/component/option,com_smf/Itemid,75/topic,30584.0/