Jump to content


Photo
- - - - -

Can't achieve any change to my widget in the primary sidebar


  • Please log in to reply
14 replies to this topic

#1 christianemohr

christianemohr

    Member

  • Members
  • 18 posts

Posted 02 April 2012 - 08:55 AM

Hello Pagelines-Team,

I have an issue with my widget in my primary sidebar.
I would like to add a border (like the boxes on my Startpage (just click on "Home") and I would like to add a color-backgroud to the widget-title.

This is what I've done:
1) Search for the CSS-elements with firebug
2) Added the following to "Custom Code"

#sidebar-wrap .widget-title {
background-color: #CC0000
}

#sidebar-primary .widget {
padding:10px 10px 10px 10px;
border:2px solid #DDDDDD;
box-shadow:2px 2px 3px #CCCCCC;
}


3) When nothing happened I tried different ID- and class-selectors (e.g. sidebar1, sidebar-wrap, sidebar-primary, .widget, .widget-pad??¦) It seems I've tried them all??¦

The result: My page looks still like it did before I started working on it... It took me a long time yesterday to figure out, how to design/adjust my boxes on home, and I thought I could go the same way. Somehow this does not work. I suppose I'm just not getting the right selectors out of firebug - but unfortunately I triple-checked and are coming up with the same ones every time...

Hope you can help - and many thanks in advance!
Christiane

#2 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 02 April 2012 - 09:43 AM

Does this work: ?
#sidebar-wrap {
border:1px solid black;
}
at the moment you have nothing like that added to ur custom css:

Please Login or Register to see this Hidden Content

Please make sure you add the code, SAVE, and check back with us. Also, when u have multiple pagelines open, and then you first save the custom code, and then save (lets say the color earea) which was open b4 you wrote the custom code, it will delete your code.
Please implement some code for us to make support easier.
PS: Once you get the border you want, your widget area might slide under the page area... this is because of the +2px. You have to manually subtract that from either the sidebar or the content area.

#3 Danny

Danny

    Is Awesome!

  • Moderators
  • 13161 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 April 2012 - 11:24 AM

Hi,

Give Gyoery's suggestion a go and if that doesn't work then try this instead!

The below should add a border like your boxes to this individual widget.

Please Login or Register to see this Hidden Content



#4 christianemohr

christianemohr

    Member

  • Members
  • 18 posts

Posted 02 April 2012 - 01:06 PM

Thanks at both of you - both solutions did something, Danny's looks more like the way I want to have it (I just started out what I supposed was easy..) Maybe one of you can me help out with an overall image: I had to define for my boxes an ID- and class-selector. I thought I had tried to use the ID-selectors alone, but obviously I did not or not in the right combination. So, my question is: when do I need to use a class-selector too, and when is this wrong? And one more question for Danny: How did you come up with this selector? I can't find it via firebug??¦ My second problem, the background also worked out with the tinymce-selector. But now I have a white frame around it. How can I widen the red background, so that it matches the outer border?

#5 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 02 April 2012 - 01:36 PM

Quick CSS lesson: CSS stands for cascading style sheets... (untergeordnet) Fist of all IDs are used when you are talking about 1 single element on all your pages, like for example #box_1. Classes are to be understood as groups, where for example #box_1, #box_2, #box_3 might all be of the same class .fullwidth-boxes (I'm just making these up, dont look for these) Now you can say #box1 {border:1px solid black;} #box2 {border:2px solid green;} #box3 {border:5px solid red;} and since you want them all to be full width, they would be in the .fullwidth-boxes class which is defined like this: .fullwidth-boxes {width:100%;} now lets add a different class .halfwidth-boxes {width:50%;} Now if you have:
You will have a black border on a fullwidth box.
You will have a green border on a 50% box. and so on... Now the other way round. When you have divs in divs in spans in divs it starts getting complicated. Luckily you dont need to add all identifiers, just the ones needed to identify what you want. So if I want to change the "a" links in the header, it is enough to say #header a {width:100%;} Though maybe you have more than just the nav links, so you want to make it more concrete: #header #nav a <-- Selects all the a (links) in the nav in the header. The last thing you need to learn is how to adress a div if the ID is used more then once: if this is your element
and then you have another
you can link the two without writing a space: king.straight {width:100%;} and NOT king .straight {width:100%;} as it is not a child element! Hope this answers your basic css question. ;)

#6 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 02 April 2012 - 01:46 PM

Also, his is only nicer cause he put more effort in the css... you can obviously also use this: #sidebar-wrap { padding: 10px;border: 2px solid #DDD;box-shadow: 2px 2px 3px #CCCCCC; } to have the same effect, but like this it will stay the same, even if you change your sidebar to non tinymce (plugin). Its allways better to say where and what group to style, then who... Like when you want the tallest person in a class, you could say that #Peter (at the moment the tallest) should come here, but you could also say: "#school.gymnasium .6th-grade .tallest, should come here. So next year when peter is gone, you can still get the tallest person without having to change the code... (kein besserer Vergleich eingefallen ;) ) Hope this helps...

#7 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 02 April 2012 - 01:51 PM

Now to finally (not) answer your question ;) The .widget-pad has a padding, which should be removed. I could give you the solution, but I hope you'll figure it out with the help you just got. to set the padding of something to 0 write padding:0px; Your Text will be widened as well (under the box) which you can counter by giving it a margin.

#8 christianemohr

christianemohr

    Member

  • Members
  • 18 posts

Posted 02 April 2012 - 02:36 PM

Thanks for all these answers, I will be trying it and then come back to you??¦ hopefully with an accept instead of more questions ;-) I'm already much happier with the looks of my primary sidebar, but am a little bit astonished, that padding:0px still leaves a space between title and border??¦ I consult simultaneously my CSS book, so I hope I can find the solutions - my biggest problem seemed to be to find the element have to address.

#9 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 02 April 2012 - 02:56 PM

now you have the problem where (because of the border) your sidebar is to big, so it slides under the main page... To fix that add a max-width:[the current width of your sidebar minus 2-4 pixels]; or remove the border... and the widget-pad still has an active padding... you didnt successfully overwrite it. Viel gl??ck... und frag lieber bevor du 2 stunden davor sitzt....

#10 christianemohr

christianemohr

    Member

  • Members
  • 18 posts

Posted 02 April 2012 - 03:13 PM

Danke - I'm sorry, that I have all these dumb questions??¦ I tidied up a little bit and followed your advice to bring the design back to the side-wrap- selector instead of attaching it just to the Tinymce-widget - I then had the problem you described. Two magic words fixed my mistakes: "max-width" (I had just used "width" which did not work) and "padding Widget-pad" (I think I had widget, with no effect at all) Thanks very much - now it looks nearly like I wanted it to be - some finetuning, but then I'm fine :-)

#11 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 02 April 2012 - 06:11 PM

Glad I could help... love to see the proactive approach!! We don't usually get that here... Feel free to ask anytime...

#12 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 02 April 2012 - 07:14 PM

PS: you need to use max-width when using responsive design, as it is based on it. If you only have width, the max-with command is still valid and the width functions as min-width.

#13 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 02 April 2012 - 07:18 PM

PPS: if you have a gap, in average it is 70% padding of the outer object, 29% inner margin, and 1% some messed up positioning or spaceholder gif inbetween, or some other mistake...

#14 christianemohr

christianemohr

    Member

  • Members
  • 18 posts

Posted 10 April 2012 - 10:30 AM

Hi again, now that I added my wonderful border to my widget I realized another problem with that solution (which I'd love to keep, just to mention it??¦) The widget should not be shown on two pages, but on these pages I now see an empty frame, where the widget is supposed to be??¦ What do I have to do, to suppress this? Link:

Please Login or Register to see this Hidden Content

And another problem: I wanted to use two separate boxes in the side columns, but when I add another widget to the primary sidebar, than both widgets are wrapped in one border. Can I separate them somehow, or do I have to go for the secondary sidebar and then add the second widget there? Thanks in advance Christiane

#15 Danny

Danny

    Is Awesome!

  • Moderators
  • 13161 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 April 2012 - 10:41 AM

@christianemohr

And one more question for Danny: How did you come up with this selector? I can't find it via firebug??¦


I got it from here:

Please Login or Register to see this Hidden Content