vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)
-   -   I've found a way to get rounded corners with IE (https://vborg.vbsupport.ru/showthread.php?t=263222)

CK 05-05-2011 08:13 PM
I've found a way to get rounded corners with IE
 
Okay so I've got it working with another site that I've set up, I was asking on help on how to get it looking like my forum (rounded corners). When someone suggested I upload this FILE and put the following code
Code:
behavior:url(border-radius.htc);
in the style sheet elements that I want rounded corners on.

So basically upload file to root and add the code, guess what? It actually worked. Here's where you can see it working http://tsps.us

So it was simple enough to get it working on the site because all I did was modify the index file, what I'm scratching my head over is how I would get it to work on vBulletin, where should I insert the code?

kh99 05-05-2011 09:33 PM
Maybe you could put it in Additional CSS in the style editor, something like:

#bsb { behavior:url(border-radius.htc); }

I noticed that in FF and Chrome you already have rounded corners.

CK 05-05-2011 09:42 PM
Quote:
Originally Posted by kh99 (Post 2192441)
Maybe you could put it in Additional CSS in the style editor, something like:

#bsb { behavior:url(border-radius.htc); }

I noticed that in FF and Chrome you already have rounded corners.
Yeah that's right, forum works great on webkit, Chrome and Firefox. Opera and IE just do not do the round corners and it's bugging the life out of me.

Can you explain that code a little better.

Should I do the entire "#bsb { behaviour:url(border-radius.htc); }" with the spaces and the "#bsb" at the start?

kh99 05-05-2011 09:46 PM
Quote:
Originally Posted by ChemicalKicks (Post 2192443)
Should I do the entire "#bsb { behaviour:url(border-radius.htc); }" with the spaces and the "#bsb" at the start?
Yeah, I think so. I'm not a CSS expert and I haven't tried it so I'm not sure if it's exactly right, but your div has id="bsb" so that's saying to apply that bit of CSS to the thing with that id.

CK 05-05-2011 09:49 PM
Here's what I put, unfortunately it made no difference.

Code:
#bsb {
background-color: #686968;
behavior:url(border-radius.htc);
border-radius: 5px;
-moz-border-radius-top{vb:stylevar left}:20px;
-moz-border-radius-top{vb:stylevar right}:20px;
-webkit-border-top-{vb:stylevar left}-radius:20px;
-webkit-border-top-{vb:stylevar right}-radius:20px;
-khtml-border-top-{vb:stylevar left}-radius:20px;
-khtml-border-top-{vb:stylevar right}-radius:20px;
border:10px solid #686968;
_border: none;
}

kh99 05-05-2011 09:55 PM
Oh, you already had a #bsb section, then yeah of course you didn't need another #bsb or the curly braces.

It's working in your dark style (although I didn't check that before you added that stuff).

CK 05-05-2011 09:59 PM
Quote:
Originally Posted by kh99 (Post 2192451)
Oh, you already had a #bsb section, then yeah of course you didn't need another #bsb or the curly braces.

It's working in your dark style (although I didn't check that before you added that stuff).
The rounded corner are working in IE on the dark style? For me it's showing no change, could you do me a massive favour and take a screen shot for me?

The dark style is the one I'm trying this on as it's less used, well spotted :)

kh99 05-05-2011 10:04 PM
1 Attachment(s)
Maybe try Shift-reloading the page (Edit: um...I guess it's actually Ctrl-F5 in IE).

Screen shot only shows UL but the other corners are rounded too, just couldn't deal with the image size using paint :)

CK 05-05-2011 10:10 PM
Thank you :)

That's so strange it doesn't seem to be working for me (Using IE9 BTW).

It's getting late for me now though so I think I'm going to bed and will pick this up again in the morning. Thanks for your help. :)

EDIT: Applied the changed to "Original".

kh99 05-05-2011 10:28 PM
Quote:
Originally Posted by ChemicalKicks (Post 2192459)
That's so strange it doesn't seem to be working for me (Using IE9 BTW).
That could be it I guess - I'm using IE8. But maybe it's just that your CSS file is cached.

Attitude5ire 05-06-2011 03:40 AM
If you are going to use an external file, might as well use the jquery library which can be used for even more addons with only one single file

CK 05-06-2011 07:54 AM
Quote:
Originally Posted by Attitude5ire (Post 2192556)
If you are going to use an external file, might as well use the jquery library which can be used for even more addons with only one single file
Hi,

Is it essentially the same process, uploading a file to riot and referencing it in the same way?

TheLastSuperman 05-06-2011 09:00 AM
Quote:
Originally Posted by ChemicalKicks (Post 2192459)
Thank you :)

That's so strange it doesn't seem to be working for me (Using IE9 BTW).

It's getting late for me now though so I think I'm going to bed and will pick this up again in the morning. Thanks for your help. :)

EDIT: Applied the changed to "Original".
You must add the radius value directly below i.e.

Code:
        behavior:url(border-radius.htc);
        border-radius: 5px;
Or you can use:
Code:
        border-radius: {vb:stylevar border_radius};
It should work then and will specify your selected border radius ;).

You can also do these quick and simple css template edits and round the basic outside corners off the bat:

AdminCP > Styles & Templates > Style Manager > Edit Templates > CSS Templates >

2 Templates to edit for this basic adjustment;

vbulletin.css

Find:
Code:
.body_wrapper {
        padding: {vb:stylevar body_padding};
        background: {vb:stylevar body_background};
        -moz-border-radius: {vb:stylevar border_radius};
        -webkit-border-radius: {vb:stylevar border_radius};
}
Add:
Code:
        behavior:url(border-radius.htc);
        border-radius: {vb:stylevar border_radius};
Should now read:
Code:
.body_wrapper {
        padding: {vb:stylevar body_padding};
        background: {vb:stylevar body_background};
        -moz-border-radius: {vb:stylevar border_radius};
        -webkit-border-radius: {vb:stylevar border_radius};
        behavior:url(border-radius.htc);
        border-radius: {vb:stylevar border_radius};
}
SAVE

Now edit template - vbulletin-chrome.css

Find:
Code:
.navbar {
        position:relative;
        height:{vb:math {vb:stylevar navbar_tab_border.borderWidth} + {vb:stylevar navbar_tab_size.height} * 2}px;
        background:{vb:stylevar navbar_background};
        margin:{vb:stylevar navbar_margin};
        color:{vb:stylevar navbar_color};
        font:{vb:stylevar navbar_font};
        border:{vb:stylevar navbar_border};
        -moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
        -moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
        -webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
        -webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
}
Add the same code to the end of this css definition just like you did above, it should now read:

Code:
.navbar {
        position:relative;
        height:{vb:math {vb:stylevar navbar_tab_border.borderWidth} + {vb:stylevar navbar_tab_size.height} * 2}px;
        background:{vb:stylevar navbar_background};
        margin:{vb:stylevar navbar_margin};
        color:{vb:stylevar navbar_color};
        font:{vb:stylevar navbar_font};
        border:{vb:stylevar navbar_border};
        -moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
        -moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
        -webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
        -webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
        behavior:url(border-radius.htc);
        border-radius: {vb:stylevar border_radius};
}
SAVE

And that should do it for the basic outside corners now you must move forward and do the rest :cool:.

CK 05-06-2011 10:28 PM
Thanks for all the help with this:)


All times are GMT. The time now is 10:08 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01006 seconds
  • Memory Usage 1,764KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (9)bbcode_code_printable
  • (6)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (14)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete