add border to widget
-
Hello
Apologize for basic question: New to CSS; been trying to self-tutor by trial and error but simply can’t figure it out without asking.I just want to add a solid medium (2 or 3px) border to all the widgets. I would think using
.widget area }and adding appropriate code should work but it doesn’t. Also, does every single widget need to be individually styled each time you add a new one? I know the answer is probably to find a theme where you like the format already of but I already wasted a month searching for a themePlease help
ThanksThe blog I need help with is: (visible only to logged in users)
-
Add this code to your existing CSS, it will work for any new widgets you add:
.widget { border:3px solid #333; padding:5px; } -
Add this code to your existing CSS, it will work for any new widgets you add:
.widget {
border:3px solid #333;
padding:5px;
}Hi
This did nothing to the existing 3 widgets: How can I add them to the ones already there and please help me understand why.widget areaappears to be the correct selector for my widgets but adding border code doesn’t work?
Thanks -
It works for me and I don’t see it added in to your custom CSS, can you re-apply it so I can see what effect it is having on your live site.
.widget-area is the section that contains all of your widgets (and it requires the hyphen between words). Did you mean you want one border surrounding all the widgets or a border around each individual widget? If it is the former then please try this instead:
.widget-area { border:3px solid #333; padding:5px; }If that is still not working could you show me exactly what code you are trying to use, including the declarations between the curly braces {}
-
It works for me and I don’t see it added in to your custom CSS, can you re-apply it so I can see what effect it is having on your live site.
Hi
To clarify, I would like one solid medium (3 px) border around each widget that has a top and bottom, medium thickness and also has a very light bottom border around the widget title
Can you please clarify which format to use?
Thanks !!!!!! -
-
I’m a bit confused now but the first example I gave you will apply a border to each widget individually. Can you add it to your existing 3 rules so I can check why it wasn’t working for you?
-
I’m a bit confused now but the first example I gave you will apply a border to each widget individually. Can you add it to your existing 3 rules so I can check why it wasn’t working for you?
Hi again
Thanks so much for your help: sorry to confuse you;
I re-entered the first code you told me and changed it so only the top border appears and lowered the px to 2;It’s almost the way I want: Can I please bother you to help a little more:
1) So let’s say I want to get rid of the top border ONLY on the first etxt widget. Please tell me how to I’d do that
2) The bottom margins are way to big between the widgets; I’m unsure why I used the
margin-bottom .5remin the third rule but I assume I played with the editor and saw that adjusting the h3 header worked. What is the unit “rem”?3) Finally, for the third widget, I’m trying to figure out how to get the line spacing smaller in between the paragraphs and in between the 2nd paragraph and button. Can you help there?
Thanks; I owe you six margaritas :)
-
Here’s one section of code for each of your requests:
#text-2 { border:none; } .widget-area .widget { margin-bottom:20px; } .widget-area .widget p, .widget-area .widget ul { margin-bottom:10px; }Please note that the first piece of code directly targets the text widget so if you re-order or insert something before it in your sidebar you’ll need to change the CSS too.
For the second point it looks like you applied the margin to just the titles of the widgets and not the widget sections themselves.
And finally if you’re even in London I know a great cocktail place but I’m more of a mojito or daiquiri fan!
-
Wow
You rock, man !!
I can’t thank you enough; Finally, I just want to ask:
Although I understood everything you told me to code based on all my self-tutoring, I’m wondering:
I intend to add 4 to 6 more widgets as the page develops. Is each widget going to need individual CSS depending on what the widget looks like for this theme or will most of the CSS act as generic for new widgets?
If the answer is the former, I know I can always post but do you have any suggestions on how to get better ? I always feel stupid asking people to help me code my page but I am brand new to blogging and barely knew how to use a spreadsheet before getting laid off (maybe that explains that ; lol)
-
At the moment it should work for any other extra widgets that you add too. The only thing, which I mentioned before, is that the removal of the top border has been specifically applied to the text widget because it is the first thing in your sidebar, if that changes the code will have to change too.
The best thing to do is read up on CSS (there are loads of guides and tutorials and resources online) and check out how to explore your theme’s code. I use the built in FireFox inspect element command from the contextual (right-click) menu – it’s really useful!
-
Hi
I will not remove the top widget ever; it’s what I want there for now.I do right click and try to use the inspect element on Chrome; iyt’s how I figured out the little bit I had when we started this thread. My other browsers are corrupted and not worth attempting to reload so I’m, kind of stuck until we buy a new laptop when we move
I spent about a month reading tutorials online so I understand the concepts but as a non-techie I find it confusing.
As for being in London, San Francisco has enough fog for me, thank you :)
-
@halluke
Sorry; I’m back. I really want to undersatand but I simply don;t get it?
I want to change the font, font size and line spacing for the archive titles. So I save a snip of what I did: I opened the Chrome editor, clicked the magnifying glass and clicked on the archive title itself: I’ve snipped what comes up below: If I try to go in and add more CSS using the code that came up with appropriate changes, nothing happens. All the tutorials I read said to identify the element in your browser’s element editor and then make appropriate changes.Am I doing something wrong? here is my snip:
https://experimentalexpats.files.wordpress.com/2014/10/css-capture.pngThanks !!
-
I can talk you through it really briefly but I’m afraid I don’t offer free CSS lessons, just tips and examples to get people moving in the right direction!
OK, so, on the left side of your image you see the HTML with the following line highlighted at the bottom, this is the HTML element you are interested in. It doesn’t include the actual title but you can click the little arrow besides it to expand and see the text contents – this is a good idea to check there are no other elements inside (like a links or spans):
<h1 class="archive-title">...</h1>On the right you can see all the CSS rules that are applied to it, and in which order they take precedence – the ones at the top being the highest importance. If one rule is superseded by another then the lower-ranked rule has a line through it. Where one group of styles is applied to lots of different elements you can see the active element (in this case the h1 with class archive-title) in black and the others in grey.
You can see that the font-size is set by:
.archive-title { font-size:0.785714286rem; }You don’t need to copy all the bits you don’t need, and in general you don’t need to add anything else because the custom CSS is applied after all the regular CSS so it will take precedence. Now you can make your change and add it to your custom CSS:
.archive-title { font-size:2rem; }This will make your archive titles larger, and if you go back and inspect the element you should see this rule listed at the top (on the right side), and the previous font-size rule now has a line through it.
I hope that goes some way to explaining things. It won’t always be that simple, but it is a start!
-
Hi
That is an awesome help and I will go away and not ask for any more free lessons
Sorry and thanks again ; I really appreciate all your help :) -
-
No problem! If you have any specific questions feel free to come back and ask!
Hi
Help !!
I looked at what you said from the above and now got the archive title the way I want it to look (please see my new CSS)
I was about to start applying the same principles to the next issue, the spacing in my comments field, when I think I somehow changed the default views of my browser’s editor ?
When I find the element I want and click it, the box on the right where the CSS rules should be is only showing the style box with the margin box format, whether ion the “styles” tab or the “computed” tab so I am no longer seeing the CSS rules anywhere at all
Can you please help?
-
-
Can you let me know what browser you’re using and if the element inspector is the default one or an extension like Firebug.
A screenshot showing what you’re seeing would be useful too!
-
Hi Halluke:
I’m using Chrome; One problem is I’m stuck on version 31. There’s a major fluke that’s apparently affecting lots of people’s ability to update the browser; I’ve been subscribed to a Google thread about the problem and it’s so complicated I’ve given up; I’ve tried all the solutions they’ve posted and nothing works (as is the case with many others).
I’m not using the extension; I understand they’ve scrapped extensions in newer browsers; I’m contemplating uninstalling and re-installing but since my other two browsers are corrupted and don’t work well I’m scared I will not be able to use any browser; I also have thousands of bookmarks and have no clue how to save the bookmark file
Basically I’m a non geek stuck on an old Vista hard drive and since the blog has shown some small degrees of success, I’m hesitant to play with the browser or hard drive.
Anyway, here is my editor; For now, maybe you could just help me get the few items I want into the comments; Ultimately I’m going to wind up switching themes; People like the clear pictures and easily readable content but I find it’s too restrictive to navigate without a lot of CSS
https://experimentalexpats.files.wordpress.com/2014/10/capture-editor.png
- The topic ‘add border to widget’ is closed to new replies.
WordPress.com Forums 