Forum Support

Shape 5
March 29, 2024, 08:29:47 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Slide Circle  (Read 887 times)
buck
Jr. Member
**
Offline Offline

Posts: 2



« on: 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.
Logged
ajstevens
Jr. Member
**
Offline Offline

Posts: 36



« Reply #1 on: July 26, 2013, 04:43:26 AM »

Yes there is!  Smiley

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

line 1348:

Code:
.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:

Code:
@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
Logged
buck
Jr. Member
**
Offline Offline

Posts: 2



« Reply #2 on: 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;}
« Last Edit: July 26, 2013, 09:25:10 AM by buck » Logged
ajstevens
Jr. Member
**
Offline Offline

Posts: 36



« Reply #3 on: 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

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

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

to
Code:
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 Wink
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #4 on: 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
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
ajstevens
Jr. Member
**
Offline Offline

Posts: 36



« Reply #5 on: 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/
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.