1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 How to remove rounded corners through extra.css

Discussion in 'Styling and Customization Questions' started by Barbossa, Sep 7, 2014.

  1. Barbossa

    Barbossa Active Member


    I want to remove rounded corners, and put it as square corners there in xf default style. What to put in extra.css please?

  2. Chris D

    Chris D XenForo Developer Staff Member

    This will remove all border-radius from the entire style if added to EXTRA.css:

        border-radius: 0 !important;
    Shelley and MattW like this.
  3. Chris D

    Chris D XenForo Developer Staff Member

    Or just use IE8 to get the effect for free (y)
  4. Shelley

    Shelley Well-Known Member

    Chris D likes this.
  5. Barbossa

    Barbossa Active Member

    Yup, that does the trick! (y)
  6. Barbossa

    Barbossa Active Member

    @Chris D , here is the next request.


    Have you notice! There are 3d kinda look!! How to make it flat? Or, how to make it flat everywhere? :)
  7. Brogan

    Brogan XenForo Moderator Staff Member

    Remove the gradients, either via style properties or EXTRA.css.

    I would recommend using the browser inspection tool.
  8. Russ

    Russ Well-Known Member

    If you want it to have a global effect... one quick and easy way is to simply edit the gradient itself in an image editor and remove the gradient there, saving it as a blank image.
  9. Barbossa

    Barbossa Active Member

    @Russ, I can make it from there. I was asking doing it through Extra.css. Any idea pls?
  10. Russ

    Russ Well-Known Member

    You could.... but you'd have to basically gather every single place it's called, and put a background-image:none.

    Editing the image to remove the gradient is the quickest way to remove the gradient effect(it'll just load a blank transparent image instead)
    Barbossa likes this.
  11. Amaury

    Amaury Well-Known Member

    Since I'm not server expert in that department, I personally find it easier to do it in the style properties since you're going through them, anyway, when creating styles.
  12. Russ

    Russ Well-Known Member

    He wants to remove it "everywhere", at least that's the part I'm responding too. The gradient is hard coded into a ton of templates, just do a search for: category-23px-light.png and you'll find it referenced plenty of times which aren't controlled by style properties. Which is why I say editing the image is ideal(especially helps in dark styles).
    Amaury likes this.
  13. Barbossa

    Barbossa Active Member

    @Russ, Here is the next one, I want to remove that blueish color. Again by extra.css if possible. Untitled.png
  14. Russ

    Russ Well-Known Member

    Just curious @Barbossa why are you not wanting to use Style Properties at all? It's what they are there for.

    Style Properties -> Header and Navigation -> Header remove the background color:


    #headerMover #headerProxy, #headerMover #header {
    background-color: transparent;
  15. Barbossa

    Barbossa Active Member

    Duh!! man, don't u sleep? It's 12.00 AM (Sydney) here though!!
  16. Barbossa

    Barbossa Active Member

    I am developing myself alzheimer (no kidding, first stage)! want to keep all edits in one place with /*.....notes...*/
  17. Barbossa

    Barbossa Active Member

    @Russ, now how can I increase the height for this area?

Share This Page