Jump to content


Photo
Resolved

Need help with sidebar

sidebar help

  • Please log in to reply
7 replies to this topic

#1 danmeeler

danmeeler

    Member

  • Members
  • PipPip
  • 16 posts

Posted 05 October 2012 - 10:31 PM

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.

#2 batman

batman

    Bat Learning

  • Members

  • 1743 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 05 October 2012 - 10:39 PM

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/

#3 danmeeler

danmeeler

    Member

  • Members
  • PipPip
  • 16 posts

Posted 06 October 2012 - 01:31 AM

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.

#4 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 October 2012 - 01:53 AM

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

#5 danmeeler

danmeeler

    Member

  • Members
  • PipPip
  • 16 posts

Posted 06 October 2012 - 02:30 AM

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;
}

#6 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 October 2012 - 03:22 AM

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;
}


#7 danmeeler

danmeeler

    Member

  • Members
  • PipPip
  • 16 posts

Posted 06 October 2012 - 03:28 AM

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

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 October 2012 - 07:23 PM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, sidebar help