Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Need help with sidebar


Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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/

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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">

Share this post


Link to post
Share on other sites

Posted · Report post

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;

}

Share this post


Link to post
Share on other sites

Posted · Report post

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;

}

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites