CSS help for a newbie « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Propulsion

CSS help for a newbie

7 posts from 3 voices

Started 11 months ago by lisa1s
Latest reply from Mya
This topic is not resolved

Tags:

lisa1s
Member

Hi,

I have used this theme on my site at http://www.eloquenceeditorial.com. There are two things I'd like to tweak but I don't know how to. Can you help? I know NOTHING about CSS, other than what I can figure out by pure trial and error.

1) I would like the Submit buttons on my Contact and Get a Quote forms to be the same kind of buttons that appear on the captions on my Home page slideshow. I would also like any other new buttons that I add to use the Home Slideshow button design.

2) I have added a custom background image to my site, but resizing is awkward at certain points when the browser window is resized. Also, on different resolutions the text of my pages stretches over the text boundary I have added on the background image. I'm not sure I'm explaining myself well, but hopefully you'll be able to see what I mean.

Can you tell me what I need to do to fix these problems? And need it in foolproof, dummies-guide instructions if there is something I can do to fix them!

Thanks

Posted 11 months ago #
makproductions06
Member

1st. Lining up background elements with resizing windows is well.. pretty expert level if at all possible. I'm not sure your going to be able to accomplish that. The button aspect is a going to be moderately easy. On your page, right click on a button and "inspect element" on chrome or you could get firebug for firefox. There it will give you the css for that button, You will then need to find the other buttons and there location in the css and change them to what you want.

Posted 11 months ago #

Mya

Hi,

Thanks for helping out makproduct! To give you more specific instructions for the button Lisa, you'll need to add this to your custom.css located in the theme's css folder or your Quick CSS.

input[type="submit"], #submit, .button,
#form-1-1339700500 .submit {
    border-color: #E6177B;
    background-color: #E6177B;
    color: #222222;
    padding: 0 3%;
    text-align: center;
    width: 42%;
    background-image: url("../images/icons/bg-button.png");
    background-position: 0 0;
    background-repeat: repeat-x;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    font-size: 12px;
    line-height: 28px;
    margin: 3px 0;
    position: relative;
    text-decoration: none;
}

As far as the background image, I'm not certain I understand completely particularly with the text stretching over the boundary you added on the background image. We would need to see a screenshot of what you're talking about. I know when I test your site I see nothing that jumps out at me when I resize the window.

Regards,
Mya

Posted 11 months ago #

lisa1s
Member

Hi Mya,

That's great - thanks so much! Is there a way to get the pretty gradient on the button too?

As for the screen thing I'm not sure there's anything that can be done but if you go on my site try doing Ctrl + a couple of times to make the text bigger - you'll see that the background image stays fixed. So sometimes if people have lower resolution the text spills over onto the black patterned area, rather than staying within the grey zone like I want it to, and it looks like that for them all the time. I asked some people to give me some feedback on my site and that's one thing that keeps coming up. Resizing the window isn't so bad - the image periodically adjusts itself as you resize, but this low screen resolution situation is a bit irritating. Is there a way maybe to specify different background images for different screen resolutions?

Thanks for your help Mya, Makproduct too!

Posted 11 months ago #
Mya

Hi Lisa,

The gradient is actually applied with the background-image declaration above. The image is a transparent gradient so the button is a solid color with the background image overlayed on top.

As far as the background image goes sounds as if the variables are "if" the person has increased the text size + plus they're on a low screen resolution. I tested it myself and I still don't see the text spilling over. All text zooms in and remains within the allotted area. Can you give a specific page this happens on? And have you been able to reproduce this yourself?

Regards,
Mya

Posted 11 months ago #
lisa1s
Member

Hi Mya,

Thanks for your reply. I can see the gradient on the Home page slideshow captions, but I can't see the gradient on the buttons on my 2 contact forms, although the button shape and size looks much nicer.

I can send you a screenshot of the text spill issue - can't seem to paste it here though, can I email it to you? What's the address?

Thanks
Lisa

Posted 11 months ago #
Mya
Hi Lisa,

Change the URL of the background-image declaration to a more absolute path like this:
```
input[type="submit"], #submit, .button, #form-1-1339700500 .submit {
    background-image: url("/wp-content/themes/propulsion/images/icons/bg-button.png");
}
```
I finally saw the text spill (had to view on my laptop) and I'm afraid I can't help. Near as I can tell the website zooms in 2x as large when you first visit causing the content to overlap. Once I zoomed out it viewed correctly. This only happened to me in Firefox. Given Kriesi's demo doesn't do that then it's either a customization or plugin conflicting. At least, that's my guess.

I'm going to flag the rest of the support team to see if they might have idea.

Regards,
Mya
Posted 11 months ago #