This doesn't seem to be answered on the theme.co forum, so I'll answer it here.
In the Customizer, go to Custom and then add this CSS.
.rev-btn {
padding-top:15px !important;
}
you can add or subtract the number of px or em's to suit your needs.
Hope this helps!
Wednesday, September 12, 2018
Thursday, October 20, 2016
Resizing images proportionally, without cropping in WIX
I've recently had to use WIX for a web project, and unfortunately, it only gives me two options for resizing images: 1. Autocrop (cuts the image to fit the space), and 2. Stretch (dis-proportionally stretches the image to fit).
Both of these are inadequate, because, holding down shift and dragging a corner doesn't constrain the bounding box of the image (as it does in most graphics programs). Being as most of the time, we don't want to distort our image, we're left trying to get the box back to it's original proportions to make the image not crop.
WIX support isn't clear about how to workaround this, especially when you want an image to be a particular width. There's no "link" icon that will keep the width and height proportional in the tool bar.
Here are the steps to do this:
1. Once your image is placed, type the width that you'd like your image to be in the toolbar (unfortunately, this only works with width, not height). This will either crop or distort your image (depending on your settings).
2. Click on the settings for that image. Under "Image Resizing", click "Reset Image Proportions".
This will keep your image at whatever width you set, and auto-adjust the height so that the image is neither cropped nor distorted.
This button also works if you've "eyeballed" your size.
Hope this helps.
Both of these are inadequate, because, holding down shift and dragging a corner doesn't constrain the bounding box of the image (as it does in most graphics programs). Being as most of the time, we don't want to distort our image, we're left trying to get the box back to it's original proportions to make the image not crop.
 | |
| Stretch Option |
 |
| Auto Option |
WIX support isn't clear about how to workaround this, especially when you want an image to be a particular width. There's no "link" icon that will keep the width and height proportional in the tool bar.
Here are the steps to do this:
1. Once your image is placed, type the width that you'd like your image to be in the toolbar (unfortunately, this only works with width, not height). This will either crop or distort your image (depending on your settings).
2. Click on the settings for that image. Under "Image Resizing", click "Reset Image Proportions".
This button also works if you've "eyeballed" your size.
Hope this helps.
Monday, June 16, 2014
Explaining Web Design to Clients
Eventually, I intend on building out a contract for my client along these lines. Of course the below does not reflect ALL clients. It helps put things into perspective a bit and stress the importance of keeping track of web hosting and domain information.
Basically a web designer is the equivalent of an architect / interior designer (of course I am over-simplifying this). If we keep this in mind, then our roles as designer and client become more clear. Here are a few examples:
Client: I have forgotten my password for hosting.
Equivalent: You showed me where to put the couch to make my living room functional, but now I have lost the key to my apartment.
_________________________
Client: I can't remember where I registered my domain name.
Equivalent: You set up a PO box for me at the post office, but I can't remember where the post office is.
_________________________
Client: I tried to renew hosting, but once I got to paypal, I didn't know my password. Do you have it?
Equivalent:You helped my find a great space to live and organize the rooms in a way that suits my needs, but now I can't find my checkbook to pay the rent. Do you know where it is?
_________________________
Client: I can't remember who my hosting account is with.
Equivalent: I can't remember my landlord's name.
_________________________
I hope that this brings a chuckle to anyone out there that's a designer...
Basically a web designer is the equivalent of an architect / interior designer (of course I am over-simplifying this). If we keep this in mind, then our roles as designer and client become more clear. Here are a few examples:
Client: I have forgotten my password for hosting.
Equivalent: You showed me where to put the couch to make my living room functional, but now I have lost the key to my apartment.
_________________________
Client: I can't remember where I registered my domain name.
Equivalent: You set up a PO box for me at the post office, but I can't remember where the post office is.
_________________________
Client: I tried to renew hosting, but once I got to paypal, I didn't know my password. Do you have it?
Equivalent:You helped my find a great space to live and organize the rooms in a way that suits my needs, but now I can't find my checkbook to pay the rent. Do you know where it is?
_________________________
Client: I can't remember who my hosting account is with.
Equivalent: I can't remember my landlord's name.
_________________________
I hope that this brings a chuckle to anyone out there that's a designer...
Friday, October 11, 2013
How to Center Align Thumbnails in Weebly's Slideshow
I've just started using Weebly. I've used a hell of a lot of other CMS's, and I realize that each has their ups and downs (to be discussed in another blog).
Weebly's downside is that it's not flexible in regards to fine-tuning design. It's strength is that the UI is simple and paired down for clients that don't want to spend a lot of time learning the nuances of how to update their site.
Right now I'm doing a site for an artist, and she wanted to get the site up and running with only a few of her stronger pieces (6 for each gallery). She also wanted the thumbnails on the bottom.
The Problem: By default, when using a slideshow with the thumbnails on the bottom, they are pushed to the left, as in this screenshot. When there are enough thumbnails to cover the space, it doesn't look strange, but when there are only a few, it looks... well just plain weird.
The Solution: The class that holds the thumbnails is called .wslide-links-inner, the CSS is not accessible through the CMS (it's called slideshow.css).
The solution, is to add that class to our main-style.css stylesheet that IS accessible to us.
If the following code is added to that stylesheet, it will center SIX, I repeat SIX images.
.wslide-links-inner {
width: 445px;
position: static !important;
margin: 0px auto;
}
We need to define the width according to the number of thumbnails that we want to show
(and we need to use a little math).
The thumbnails are set to be 70px wide, and the padding between them is 5px.
Here's the math:
(number of thumbs x 70px) + (number of thumbnails - 1 x 5px).
The reason we need to subtract 1, is that we are only accounting for the padding between the thumbs.
(The other way to do this is to just count out the spaces between the thumbs and then multiply by 5px).
Our final product looks like this:
Weebly's downside is that it's not flexible in regards to fine-tuning design. It's strength is that the UI is simple and paired down for clients that don't want to spend a lot of time learning the nuances of how to update their site.
Right now I'm doing a site for an artist, and she wanted to get the site up and running with only a few of her stronger pieces (6 for each gallery). She also wanted the thumbnails on the bottom.
The Problem: By default, when using a slideshow with the thumbnails on the bottom, they are pushed to the left, as in this screenshot. When there are enough thumbnails to cover the space, it doesn't look strange, but when there are only a few, it looks... well just plain weird.
The Solution: The class that holds the thumbnails is called .wslide-links-inner, the CSS is not accessible through the CMS (it's called slideshow.css).
The solution, is to add that class to our main-style.css stylesheet that IS accessible to us.
If the following code is added to that stylesheet, it will center SIX, I repeat SIX images.
.wslide-links-inner {
width: 445px;
position: static !important;
margin: 0px auto;
}
- We need to use the !important element to override that the position is relative in slideshow.css
- The margin centers the slides on the page, but, this will not work unless we...
- Give that class a width
We need to define the width according to the number of thumbnails that we want to show
(and we need to use a little math).
The thumbnails are set to be 70px wide, and the padding between them is 5px.
Here's the math:
(number of thumbs x 70px) + (number of thumbnails - 1 x 5px).
So, if I want 4 thumbnails:
4 x 70px = 280px
4 - 1 x 5px = 15px
_______________
Total: 295px
The reason we need to subtract 1, is that we are only accounting for the padding between the thumbs.
(The other way to do this is to just count out the spaces between the thumbs and then multiply by 5px).
Our final product looks like this:
NOTE: this will break the javascript that allows the thumbnails to move. So if you have enough thumbnails to fill your row (plus some), you will need to eliminate this CSS from your stylesheet.
I really hope that this helps!
Tuesday, June 18, 2013
Wednesday, August 15, 2012
A Santa Fe Design Chick's Perspective on Agile
Coming from a land where good design means: ease-of-use, thinking ahead, and making damn sure that an egg dropped from a five story building doesn't break, I've found a few challenges with the idea of Agile Development.
I understand the basic concept - reduce, reuse, recycle.
Reduce: the time it takes to have workable software, and unnecessary functionality, Reuse: user paradigms and code when appropriate, Recycle: hmmm... not sure how this one really fits, but I can stretch it to say - Cycle through the process over and over again with stakeholders.
Of course I'm oversimplifying the process. There's a complete philosophy that goes behind this. There's even a 42 point Agile test developed by Nokia that one can take to see if the team's in-line with Agile.
For me, it's like the land of OZ. Dorothy strutting down the yellow brick road of software development, not sure what direction it's headed, or who the man behind the curtain really is.
One of the main focuses of Agile states, “Business people and developers must work together daily throughout the project”. I'm not really sure where that leaves me - the designer. It's always been my job to find out what the client wants, and communicate it in a term that the developers can understand. I've had developers say to me outright "I don't actually like people". I don't mean to overgeneralize, but the personality type tends to fall into this space. I believe that programmers love programming, not chit-chatting with clients about how they feel about "this or that".
Let's face it, the clients are the ones that are going to be using the software, so there should be a good line of communication with them... and sometimes a picture is worth a thousand words (or a thousand lines of code). Good design is building to what a client needs. I'm not saying that we go down the path of the document heavy UCD process, but what I am saying is that high-level wireframes should be done to understand the flow of the software. We must understand the ultimate goal of what the client wants to achieve - that should not change throughout the course of development.
Agile is supposed to be aimed at giving the client a way of having "checks and balances" as the software is developed. It's meant to get something that is "deliverable" at each phase of its existence. It is an effective way of producing software. The problem that I see with clients driving, is that sometimes they are unsure of what they want, or how to explain it.
Most people are used to shopping for something they need and they don't know what that is until they see it. Some people value objects with good design, and some don't. I think that what we need to be aware of with Agile, is that we should use design where it is needed, and not simply throw it out the window because it uses too much documentation and is too focused on strategy.
Faster to market, quicker return on investment, less-expensive; let these not be the main foundations of Agile, lest we end up with the plastic chair from Walmart that breaks because it was rushed out of the factory before anyone did a study on how wide the American fanny is.
I understand the basic concept - reduce, reuse, recycle.
Reduce: the time it takes to have workable software, and unnecessary functionality, Reuse: user paradigms and code when appropriate, Recycle: hmmm... not sure how this one really fits, but I can stretch it to say - Cycle through the process over and over again with stakeholders.
Of course I'm oversimplifying the process. There's a complete philosophy that goes behind this. There's even a 42 point Agile test developed by Nokia that one can take to see if the team's in-line with Agile.
For me, it's like the land of OZ. Dorothy strutting down the yellow brick road of software development, not sure what direction it's headed, or who the man behind the curtain really is.
One of the main focuses of Agile states, “Business people and developers must work together daily throughout the project”. I'm not really sure where that leaves me - the designer. It's always been my job to find out what the client wants, and communicate it in a term that the developers can understand. I've had developers say to me outright "I don't actually like people". I don't mean to overgeneralize, but the personality type tends to fall into this space. I believe that programmers love programming, not chit-chatting with clients about how they feel about "this or that".
Let's face it, the clients are the ones that are going to be using the software, so there should be a good line of communication with them... and sometimes a picture is worth a thousand words (or a thousand lines of code). Good design is building to what a client needs. I'm not saying that we go down the path of the document heavy UCD process, but what I am saying is that high-level wireframes should be done to understand the flow of the software. We must understand the ultimate goal of what the client wants to achieve - that should not change throughout the course of development.
Agile is supposed to be aimed at giving the client a way of having "checks and balances" as the software is developed. It's meant to get something that is "deliverable" at each phase of its existence. It is an effective way of producing software. The problem that I see with clients driving, is that sometimes they are unsure of what they want, or how to explain it.
Most people are used to shopping for something they need and they don't know what that is until they see it. Some people value objects with good design, and some don't. I think that what we need to be aware of with Agile, is that we should use design where it is needed, and not simply throw it out the window because it uses too much documentation and is too focused on strategy.
Faster to market, quicker return on investment, less-expensive; let these not be the main foundations of Agile, lest we end up with the plastic chair from Walmart that breaks because it was rushed out of the factory before anyone did a study on how wide the American fanny is.
Subscribe to:
Posts (Atom)