Resolved Need help with sidebar

[danmeeler 0]

I'm using a Text Wiget in my primary side bar. I want to add a border around the form i have in my side bar and also add an image right on top of it i dont want text like i have now and last but not least a background color. My site is mysalessidekick.com thanks in advance.

[batman 389]

Hi danmeeler

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

.widget .widget-pad {border: 1px solid;}

To add a border, this is only an example.

It is advisable to learn how to do this on your own too.

Check out http://www.pagelines...wiki/Custom_CSS

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info.

http://www.w3schools.com/

[danmeeler 0]

I want the border to look like the sliders border no background just white, just want that border with an image header not the text i have there now.

[James B 436]

Hi Dan

You'll be able to achieve this using Css, the code batman's provided you shows the classes that need to be edited in order to get the effect you want. We suggest you use something like firebug (www.getfirebug.com) in order to locate the name of the areas you wish to edit. W3 schools is an excellent starting point for learning css, and if you're looking to make advanced customizations to your site this is the best place to start :-)

In the meantime this sounds like the effect you were looking to achieve.

.widget .widget-pad {

    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4);

    border-radius: 5px 5px 5px 5px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

    padding: 5px;

}

Unfortunately you won't be able insert an image into the widget title as it won't accept html code. However you could add this into the body of the widget above the contact form as this area will allow html.

Here's an example of how to insert an image using html

<img src="full url to your image.jpg" alt="my image" width="304" height="228">

[danmeeler 0]

I tried that but it didn't work. This is what is in my CSS/Less Rules area

body{.widget .widget-pad {

background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4);

border-radius: 5px 5px 5px 5px;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

padding: 5px;

}

[James B 436]

The section needs to come in slightly to see the effect. Add margin:5px to that code

.widget .widget-pad {

    border-radius: 5px 5px 5px 5px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

    margin: 5px;

    padding: 10px;

}

[danmeeler 0]

AWESOME! thanks James B!!!!!!! I really thank you for your help

[Rob 547]

The topic was marked as resolved.