resize and repostion "our work" button « Support Forum | Kriesi.at

Support Forum » CleanCut

resize and repostion "our work" button

10 posts from 3 voices

Started 2 years ago by rvc
Latest reply from Dude
This topic is resolved

Tags:

rvc
Member

Hello,
I've had no success in simply resizing the button from the button.psd file and replacing the original image with the smaller one. It doesn't render at all like the original and my attempts at manipulating the css (with firebug) have not worked. Obviously I'm missing something. I would like to make the button smaller and position it more centered on the page under the slider. Any suggestions would be appreciated.

Thank you,
John

Posted 2 years ago #
James Morrison
Former Team Member

Hey,

Can you point us to the site URL or provide a screenshot of the new button area.

Even with a resized button, the modification shouldn't be too complex so I'll take a look.

James

Posted 2 years ago #
rvc
Member

Hi James,
Here's a link to the screengrab, https://picasaweb.google.com/lh/photo/pz1hUOlWJSOMqbgeRo1QAw.

We would like the new button (35px x 170px) to be centered vertically in the container and approximately 20px to the right of the "Healing is your birthright" text.

Thank you,
John

Posted 2 years ago #
rvc
Member

little bump.....

Posted 2 years ago #
James Morrison
Former Team Member
Hey,

In your screenshot, the button looks the same as the original (at least size wise) - can you point me to the URL with the new smaller button?

The code which controls the button placement and size is in style.css (line 613):
```
#top .big_button {
    float: none;
    left: auto;
    position: absolute;
    right: 3px;
    top: 22px;
}
```
and the text positioning is on line 633:
```
.big_button strong {
    font-size: 20px;
    margin: 0 0 0 33px !important;
    padding: 0 113px 0 18px;
    position: relative;
    z-index: 2;
}
```
James
Posted 2 years ago #
rvc
Member

Thanks for the response, James.

I'm good with repositioning the container and changing the text size, the problem I'm having is with aligning the background and hover background of the button after adjusting its size. I've change the button.png from its original size of 500x240px to 300x144px. I've attempted to manipulate the alignment values of the following (style2.css):

.big_button strong{
background: transparent url('../images/skin2/button.png') no-repeat right -60px !important;
background: transparent url('../images/skin2/button.png') no-repeat right -59px; /*ie6 bugfix*/
color: #fff;
}

.big_button:hover{
background: transparent url('../images/skin2/button.png') no-repeat left -120px !important;
background: transparent url('../images/skin2/button.png') no-repeat left 0px; /*ie6 bugfix*/
}
.big_button:hover strong{
background: transparent url('../images/skin2/button.png') no-repeat right -180px !important;
background: transparent url('../images/skin2/button.png') no-repeat right -60px; /*ie6 bugfix*/
}

but, I also see that by changing these above values, the following also needs changing:

style.css lines 352-362

I cannot get the background and hover background images to align properly with the smaller sized button (even with keeping it in its original position). Been pulling my hairs out with this one and really this is where I need the assistance.

The site is maintenance mode right now, so I can't point you to a live URL.
Thanks again,
John

Posted 2 years ago #
rvc
Member

Bump. Dude, would you be willing to take a look at this as it has been almost a week since my response to James and you seem to be more actively involved with clean cut?

Thank you,
John

Posted 2 years ago #

Dude
Dude

I think some calculation is needed here: http://en.wikipedia.org/wiki/Percentage

144 = 240 x z > 144/240 = z > z = 0,6

-60 * 0,6 = -36px

----------> result should be:

.big_button strong{
background: transparent url('../images/skin2/button.png') no-repeat right -36px !important;
background: transparent url('../images/skin2/button.png') no-repeat right -35px; /*ie6 bugfix*/
color: #fff;
}

.big_button:hover{
background: transparent url('../images/skin2/button.png') no-repeat left -72px !important;
background: transparent url('../images/skin2/button.png') no-repeat left 0px; /*ie6 bugfix*/
}
.big_button:hover strong{
background: transparent url('../images/skin2/button.png') no-repeat right -108px !important;
background: transparent url('../images/skin2/button.png') no-repeat right -36px; /*ie6 bugfix*/
}

Posted 2 years ago #