remove rounded corners
-
i know that the rouded corner on my CSS template are images overlayed on the object to match the background of the page, but i can’t seem to get rid of them even when i delete that part of the code. i know the url or the images is somewhere in the html somewhere, not really on the web, but i don’t see the part of the style sheet that shows this. i’m using the “rounded” theme and have changed the colors and background, but the sidebars still show the corner images in the old colors. can anyone offer advice?
The blog I need help with is: (visible only to logged in users)
-
-
-
I see you already got rid of the corners on the right. Now, to get rid of the corners on the left, add this to your CSS
img.corner {display: none !important;}That should take care of them corners.
Also, is not good to add (again) the whole CSS to the CSS editor. When modifying an existing theme, is better to just add your modifications there and keep the “Add to existing CSS” radio button checked. If you’re pasting the whole thing, it’d be better to click the “start from scratch” radio button.
-
my mistake, you haven’t taken care of the right corners… for some reason they didn’t appear to me the first time.
To get rid of them too, add this:
.postop, .postbottom { background: #fff;; }if needed, add the “!important” rule at the end.
-
thank you! actually, i can only see the left corners on the sidebar before adding those lines of code. i like the corners on the post.
i tried changing the radio button to “start from scratch” as you suggested, before i added the code, and that actually took the corners out, too (?) along with some other slight changes in alignment, etc. the reason i chose “add to…” previously is because i noticed when i copied the entire code it did not copy completely (all of the */ notes were stripped, for example) i was concerned i might be missing something imortant, so i left it. i didn’t just add my changes because of my rudimentary knowledge off css, i didn’t know how much was necessary to copy in the cases i was just making color or text adjustments. i know if you’re missing one little element, it can all fall apart :)
with the “add this..” radio button pressed, and with the code you supplied added, it looks just like it does with the “start from scratch” chosen and no code added. (????)
it sorta sucks the extra padding from the sidebars, where the image provided some margin. is there any way for it to display “clear” or “transparent” or as the background color? i would even create a new image with the right colors if i knew how.
sorry if i’m not making sense. thanks for your help!!
-
i can only see the left corners on the sidebar before adding those lines of code. i like the corners on the post.
Oh, that’s more specific. Okay, add the #nav selector to the code I gave you already. It should look like this:
#nav img.corner { display:none!important; }That takes care of the corners on the sidebar only.
Regarding the “start from scratch”, etc. I’ll try to explain this as best as I can.
All the styling has been done for you in an existing theme. Basically you wouldn’t “need” to do anything to it. However, when you want to modify something, let’s say, link colors, the only thing you’d need to do is modify that in your CSS editor. Again, since everything else has been done for you already, there’s no need to post/deal with those definitions anymore.
The way CSS works is like this (it doesn’t matter if it’s wordpress or another blog platform or if you built your site from scratch):
Let’s say you have lists in your page and sidebars. You define your elements, ID and Class selectors:
Global Stylesheet
ul { list-style: none; margin: 0; padding: 0; } li { color: #000; padding: 5pxl }Above, are the “global” attributes of your lists and such style will be applied throughout your website.
But, let’s say you want the sidebar lists to have the SAME properties but a different color. Then, assuming you have a #sidebar wrapper, you would do this:
#sidebar li {color: #00f;}sometimes you need to be more ‘specific’ and you’d need to write your definition like so:
#sidebar ul li {color: #00f;}The “li” will have the same 5px padding except the font color it’s gonna be blue and not black like it was globally defined.
In CSS the definitions at the bottom take precedence over those defined at the top. So you can understand better what I said, take wordpress for example. When you have custom CSS, the way wordpress places the CSS files are something like this:
default CSS
… [other embedded stylesheets]
YOUR CSSso if the default CSS has this:
body {background: #ccc;}And you decide that you don’t like a gray background but a red one, you’d add that to your CSS editor:
body {background: #f00;}So, what your browser would see is something like this:
body {background: #ccc;} ... ... ... body {background: #f00;}Your definition is after the default one, hence, yours is going to override the default one.
That’s why, unless you’re “starting form scratch” it’s good just to add your changes to the CSS.
i didn’t just add my changes because of my rudimentary knowledge off css, i didn’t know how much was necessary to copy in the cases i was just making color or text adjustments. i know if you’re missing one little element, it can all fall apart :)
Totally understandable but, as I explained before, there’s no need for that; besides, it’s easier to track your changes. Also, by just adding your changes, you ensure the (background) image paths are correct.
Don’t worry about the comment lines getting crapped… it won’t affect anything if they are there or not.
I’ll check your margin issue later today.
I just got one cup of coffee and I don’t really have time to proofread my post, so please excuse me if find things in my explanation that don’t make sense.
-
thanks, that makes so much sense! i’ll look forward to your thoughts on the margins. and since you’ve been so knowledgeable, could you explain to me why i can’t get the masthead to always fall underneath the tabbed navigation? i got it centered (but still can’t get the page tabs to center), and if the browser window is narrow, it works, but if it is wide, the masthead pulls to the left. (i should have just used a fixed width template, but i liked the features on this design better. maybe there is an easy way to adapt it to fixed width?)
thanks for expediting my learning process!
-
Glad to be of help.
Before I forget, don’t define your font-sizes in pixel units. That’s of bad practice. Define them in em or % units (i.e. font-size: .75em; or font-size: 75%;)
it sorta sucks the extra padding from the sidebars, where the image provided some margin.
okay, to add the top padding the sidebar is missing now, in your “#nav h2” definition, get rid of the “padding-left: 18px;” property and replace it with this one:
padding: 10px 0 0 18px;As you can see I use the shorthand property. I’d encourage you to use shorthands whenever possible. It makes your code look cleaner.
could you explain to me why i can’t get the masthead to always fall underneath the tabbed navigation?
because the original theme’s CSS is badly written. Is not organized… It’s ugly… It uses hacks that shouldn’t be used…
Excuse me for venting.
I started to fix the tabs, but my lunch break is over, so I’ll need to continue when I get home. If time permits (I have other projects to take care of) I’ll try to work on that tonight… To fix them, I’ve modified more than 3 selectors so far… and I’m sure more need to be modified as well. If you don’t mind waiting, I’ll see what I can do in the next few days.
Also, if you keep track of what you have changed so far, would you mind leaving only those changes in your CSS Editor, please? If you can’t, I understand.
Also, since you are delving into CSS, I’d recommend you using Sandbox-10. It’s an “empty” canvas where you can code your own CSS from scratch… To have an idea of what you can do with the Sandbox theme, take a look at my blog:
http://sandboxskins.mycoolrealm.com/
I have other skins on my old Sandbox Skins blog:
http://sandboxskins.wordpress.com/
I’ll post the fix to your tabs as soon as I have it.
-
because the original theme’s CSS is badly written. Is not organized… It’s ugly… It uses hacks that shouldn’t be used…
Let me elaborate more to answer your question better.
The author is using in the selectors definitions floats with inline displays… you don’t need to do that. Either use one or the other, not both together. if you wanna use the display property when using floats, use it like this:
display: block; float: left;writing the definition like this:
display: inline; float: left;is kinda redundant.
He’s using padding attributes which basically are “canceled” with negative margins… and stuff like that…
Hope this answers your question.
-
thank you, again, for your tremendous help. i will definitely check out your web sites…maybe i’ll create a second blog to play with creating my own css from scratch. i’m not sure i’m ready to do that on my existing blog yet. i’ve become comfortable with other kinds of coding, so i thought i’d give this a go because there were a few things (color, placement tweaks) that i wanted to change to make it more clean and simple (i would have chosen a different /simper theme, but none had exactly what i wanted and my current content didn’t look right.) thanks for helping this learning process be fun instead of frustrating.
i removed all but the changed or added lines from my css editor, so it should be easier to read now. the more i look at this and other style sheets, the more i realize what you mean about this one being unorganized (i was wondering why one would ever need negative margins)
i added the padding line that you provided (for #nav h2), but nothing changed. also, for some reason, weird green arrows now show on my “recent comments” widget (that i don’t even remember from the original template) and the corner images are on the page tabs now. i’ll see what i can decipher from the original code.
i understand if it takes you some time to get back to me on the tabs…i am just grateful for the assistance.
-
Yeah, whenever you have a chance, check them out, and study the CSS of my skins. You may find some nice techniques that can be useful to you.
I see the green arrows you talk about. I’ll see what’s causing them to show up.
Are you using Internet Explorer by any chance? I use Firefox and the changes to the “#nav h2” selector are visible…
I just changed my old blog’s theme so that I can test my suggestions thoroughly and in different browsers. I’ll keep you posted.
-
I just checked the padding above the widget titles using IE6 and IE7 and the changes were indeed applied… are we talking about the same thing?
Would it be possible to get a screenshot so that I can see what you see?
-
Okay. Modify/add the following selectors to your CSS:
#nav li.recentcomments{ background: none; } #masthead { clear:both; overflow:hidden; margin:0; } #masthead #pagetab { display:block; float:none; height:50px; clear:both; overflow:hidden; margin:0; padding:0; } #masthead #pagetab div { display:none; } #masthead #pagetab ul { display:block; float:none; overflow:hidden; width:615px; /* if you add/delete a page, play with this value so that the tabs get centered */ margin:0 auto; padding:0; } #masthead #pagetab ul li { float:left; margin:0; padding:0; } #masthead #pagetab a { margin:0; padding:15px 10px; }Let me know if those are the results you wnated.
- The topic ‘remove rounded corners’ is closed to new replies.
WordPress.com Forums 