Rammstein
16.05.2011, 23:37
vBullein 4 համակարգով կայքերը որոշ բրաուզերներում պատկերվում են ոչ լիարժեք: Մասնավորապես անկյունների կլորություններն ու բլոկների ստվերները որոշ բրաուզերների համար չեն հարմարեցվել:
Թերեւս ամենալիարժեքը պատկերում է Mozilla Firefox-ը:
http://xmages.net/storage/10/1/0/8/e/upload/e4ce91e3.png
Օրինակ` այս անկյունների կլորությունները ցույց է տալիս միայն Firefox-ը:
Հետո գալիս են Google Chrome-ն ու Safari-ն, որոնք մի քանի տեղ թերանում են:
Վերջում գալիս են Opera-ն ու Internet Explorer-ը, որոնց մասին vBulletin-ի ծրագրավորողները, կարծես, չեն էլ մտածել, քանի որ վերջիններս չեն պատկերում ոչ մի ստվեր, ու բոլոր անկյուններն ուղիղ են երեւում:
Իսկ հիմա անցնենք բուն նյութին: :nyam
Օգտագործո՞ւմ եք Opera բրաուզերը: Ցանկանո՞ւմ եք տեսնել «Դար» Ակումբը իր ողջ գեղեցկությամբ: Դե կարդացեք շարունակությունը: :aha
Երեկ պատահաբար մի Extension հանդիպեցի, ու որոշեցի դրա օգնությամբ իրագործել vBulletin-ի մասնագետների չիրագործած մասը Opera-ի համար: Էքսթենշնի աշխատանքի սկզբունքը ավելի քան պարզ է. այն ընդամենը թույլ է տալիս ուզած կայքին ավելացնել css ոճեր:
Իսկ համապատասխան css-ները ինքս դուրս բերեցի ու հարմարեցրի Opera-ին:
Դե ուրեմն սկսենք.
1. Տեղակայում ենք Include CSS (https://addons.opera.com/addons/extensions/details/include-css/0.1.5/) extension-ը:
2. Բացում ենք www.akumb.am (http://www.akumb.am/)-ը:
3. Սեղմում ենք Extension-ի կոճակը (սովորաբար` վերին աջ անկյունում):
4. Սեղմում ենք New CSS կոճակը:
5. Վերին տողում լրացնում ենք անունը, օրինակ` Radius, իսկ ներքեւում պատճենում ենք հետեւյալ կոդը ու սեղմում` Save.
.bbcode_container div.bbcode_quote {
border-radius: 5px;
}
.bbcode_quote div.quote_container {
border-radius: 5px;
}
.editor_controls .popupmenu .popupbody li > a {
border-radius: 0;
}
.blockfoot .popupctrl {
border-radius: 0px;
}
.memberaction_body.popupbody {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.body_wrapper {
border-radius: 5px;
}
.forumhead {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.button {
border-radius: 0px;
}
.collapse {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.blockhead {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.textcontrols a,
a.textcontrol {
border-radius: 0px;
}
* html .navpopupmenu.popupmenu.nohovermenu a.textcontrol, .navpopupmenu a.textcontrol, .navpopupmenu a.popupctrl, .navpopupmenu.popupmenu.nohovermenu a.textcontrol, .navpopupmenu.popupmenu.nohovermenu a.popupctrl {
border-radius: 0px;
}
dl.tabslight dd a {
border-top-left-radius: 5px;
border-top-right-radius: 11px;
}
blockquote.preview .bbcode_container div.bbcode_quote {
border-radius: 5px;
}
blockquote.preview .bbcode_quote div.quote_container {
border-radius: 5px;
}
.attachments {
border-radius: 5px;
}
#ajax_post_errors {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.above_body {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.toplinks ul.nouser li a{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.toplinks .logindetails {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.notifications {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.navbar {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.navtabs ul {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.navtabs li.selected li a.popupctrl {
border-radius: 3px;
}
.toplinks .notifications a.popupctrl {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.breadcrumb .navbit > a, .breadcrumb .lastnavbit > span {
border-radius: 5px;
}
.breadcrumb .navbit a.popupctrl {
border-radius: 3px;
}
.textbox,
textarea,
select {
border-radius: 3px;
}
.config_customize {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.config_editlink {
border-radius: 5px;
}
.config_save {
border-radius: 5px;
}
.config_customize_pages {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.config_customize_page {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.newcontent_textcontrol {
border-radius: 10px;
}
.picker{
background: -o-linear-gradient(#eeeeee,#999999);
}
.lightgraybackground{
background: -o-linear-gradient(#ffffff,#cccccc);
}
.alert_box
{
background: -o-gradient( linear, 0 0, 0 100%, from(#ffffff), to(#888888) );
border-radius: 10px;
z-index: 10;
}
.alert_box .hd
{
border-radius: 10px;
}
.alert_box .bd
{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.alert_box .ft input.btn {
border-radius: 5px;
}
.ok_button {
border-radius: 5px;
}
.attach_popup
{
border-radius: 5px;
}
.globalsearch .textboxcontainer span {
border-top: 1px solid #365f7c;
border-left: 1px solid #365f7c;
}
#sidebar_container .blockrow {
border-radius: 5px;
}
#sidebar_container .widget_content {
border-radius: 5px;
}
.mini_stats {
border-radius: 5px;
}
#sidebar {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.pollresultsblock {
border-radius: 5px;
}
div#content_container
div.block {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#searchtypeswitcher li a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
div#usercp_nav
div.block {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
div#blog_sidebar_generic
.block {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
div#blog_sidebar_generic {
border-radius: 5px;
}
#pagetitle a.pagetitleinfo.textcontrol, .actionbutton_container a.pagetitleinfo.textcontrol {
border-radius: 10px;
box-shadow: 0 3px 8px #DDD;
}
#whatsnewsidebar div.blocksubhead.smaller a, #whatsnewsidebar div.blocksubhead.smaller span
.blogitems li ,span {
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}
#sidebar_container .blockbody {
border-radius: 5px;
}
dd.userprof_module, dd.userprof_moduleinactive, dd.userprof_content, dd.userprof_module a, dd.userprof_moduleinactive a, dd.userprof_content a {
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}
.cms_widget {
border-radius: 5px;
}
.widget_content {
border-radius: 5px;
}
.cms_widget .block {
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}
#charnav dd a {
border-radius: 3px;
}
6. Կրկնում ենք նոր CSS սարքելու գործողությունը: Վերնագրում գրում ենք, օրինակ` Shadow, իսկ ներքեւում պատճենում հետեւյալ կոդը ու պահպանում.
.memberaction_body.popupbody {
box-shadow: 0px 4px 7px #808da4;
}
.newcontent_textcontrol {
box-shadow: 0 3px 8px #dddddd;
}
.footer {
box-shadow: -2px 2px 2px #2d3f53;
}
.notices li {
box-shadow: -2px 2px 2px #808da4;
}
div#content_container
.forumhead {
box-shadow: -2px 2px 2px #808da4;
}
div#content_container
.forumrow {
box-shadow: -2px 2px 2px #808da4;
}
#sidebar {
box-shadow: -2px 2px 2px #808da4;
}
div#forum_info_options.forum_info.block
h4.forumoptiontitle.blockhead {
box-shadow: -2px 0px 2px #808da4;
}
div#forum_info_options.forum_info.block
h4.blockhead {
box-shadow: -2px 0px 2px #808da4;
}
.blockbody.formcontrols.floatcontainer {
box-shadow: -2px 2px 2px #808da4;
}
div#threadlist.threadlist
.threadlisthead.table {
box-shadow: -2px 2px 2px #808da4;
}
div#threadlist.threadlist
.rating0 {
box-shadow: -2px 2px 2px #808da4;
}
.forum_info_block.blockbody.formcontrols {
box-shadow: -2px 2px 2px #808da4;
}
div#wgo.collapse.wgo_block.block h2.blockhead {
box-shadow: -2px 2px 2px #808da4;
}
div#forumbits.forumbits
.forumbit_post {
box-shadow: -2px 2px 2px #808da4;
}
div#thread_info.thread_info.block
h4.threadinfohead.blockhead {
box-shadow: -2px 0px 2px #808da4;
}
div#thread_info.thread_info.block
h4.blockhead {
box-shadow: -2px 0px 2px #808da4;
}
div#thread_info.thread_info.block
.thread_info_block.blockbody.formcontrols {
box-shadow: -2px 2px 2px #808da4;
}
div#blog_sidebar_generic {
box-shadow: -2px 2px 2px #808da4;
}
.cms_widget {
box-shadow: -2px 2px 2px #808DA4;
}
.albumlist_entry {
box-shadow: -2px 2px 2px #808DA4;
}
#latestalbumcontainer li {
box-shadow: -2px 2px 2px #808DA4;
}
#thumbnails li {
box-shadow: -2px 2px 2px #808DA4;
}
#content .blockrow > li, #content .blockrow > ol, #content .blockrow > div {box-shadow: -2px 2px 2px #808DA4;
}
#content .blockhead {box-shadow: -2px 2px 2px #808DA4;
font-weight: bold;
}
#pictures .blockbody .blockrow, #group_discussion_inlinemod_form .blockbody .blockrow {
box-shadow: -2px 2px 2px #808DA4;
}
h2.searchlisthead {
box-shadow: -2px 2px 2px #808DA4;
}
ol#searchbits.searchbits
{
box-shadow: -2px 2px 2px #808DA4;
}
ol#stickies.stickies
.icon0 {
box-shadow: -2px 2px 2px #808da4;
}
div#sidebar_container.profile_widgets.member_summary.userprof_moduleinactive.userprof_moduleinactive_border.sidebarleft
{ box-shadow: -2px 2px 2px #808da4;
}
Այքանից հետո ակումբի էջը վերստին բեռնում ենք (Ctrl+R) եւ` վայելում::)
Նկատված թերությունները խնդրում եմ նշեք այս թեմայում: :ok
Թերեւս ամենալիարժեքը պատկերում է Mozilla Firefox-ը:
http://xmages.net/storage/10/1/0/8/e/upload/e4ce91e3.png
Օրինակ` այս անկյունների կլորությունները ցույց է տալիս միայն Firefox-ը:
Հետո գալիս են Google Chrome-ն ու Safari-ն, որոնք մի քանի տեղ թերանում են:
Վերջում գալիս են Opera-ն ու Internet Explorer-ը, որոնց մասին vBulletin-ի ծրագրավորողները, կարծես, չեն էլ մտածել, քանի որ վերջիններս չեն պատկերում ոչ մի ստվեր, ու բոլոր անկյուններն ուղիղ են երեւում:
Իսկ հիմա անցնենք բուն նյութին: :nyam
Օգտագործո՞ւմ եք Opera բրաուզերը: Ցանկանո՞ւմ եք տեսնել «Դար» Ակումբը իր ողջ գեղեցկությամբ: Դե կարդացեք շարունակությունը: :aha
Երեկ պատահաբար մի Extension հանդիպեցի, ու որոշեցի դրա օգնությամբ իրագործել vBulletin-ի մասնագետների չիրագործած մասը Opera-ի համար: Էքսթենշնի աշխատանքի սկզբունքը ավելի քան պարզ է. այն ընդամենը թույլ է տալիս ուզած կայքին ավելացնել css ոճեր:
Իսկ համապատասխան css-ները ինքս դուրս բերեցի ու հարմարեցրի Opera-ին:
Դե ուրեմն սկսենք.
1. Տեղակայում ենք Include CSS (https://addons.opera.com/addons/extensions/details/include-css/0.1.5/) extension-ը:
2. Բացում ենք www.akumb.am (http://www.akumb.am/)-ը:
3. Սեղմում ենք Extension-ի կոճակը (սովորաբար` վերին աջ անկյունում):
4. Սեղմում ենք New CSS կոճակը:
5. Վերին տողում լրացնում ենք անունը, օրինակ` Radius, իսկ ներքեւում պատճենում ենք հետեւյալ կոդը ու սեղմում` Save.
.bbcode_container div.bbcode_quote {
border-radius: 5px;
}
.bbcode_quote div.quote_container {
border-radius: 5px;
}
.editor_controls .popupmenu .popupbody li > a {
border-radius: 0;
}
.blockfoot .popupctrl {
border-radius: 0px;
}
.memberaction_body.popupbody {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.body_wrapper {
border-radius: 5px;
}
.forumhead {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.button {
border-radius: 0px;
}
.collapse {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.blockhead {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.textcontrols a,
a.textcontrol {
border-radius: 0px;
}
* html .navpopupmenu.popupmenu.nohovermenu a.textcontrol, .navpopupmenu a.textcontrol, .navpopupmenu a.popupctrl, .navpopupmenu.popupmenu.nohovermenu a.textcontrol, .navpopupmenu.popupmenu.nohovermenu a.popupctrl {
border-radius: 0px;
}
dl.tabslight dd a {
border-top-left-radius: 5px;
border-top-right-radius: 11px;
}
blockquote.preview .bbcode_container div.bbcode_quote {
border-radius: 5px;
}
blockquote.preview .bbcode_quote div.quote_container {
border-radius: 5px;
}
.attachments {
border-radius: 5px;
}
#ajax_post_errors {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.above_body {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.toplinks ul.nouser li a{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.toplinks .logindetails {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.notifications {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.navbar {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.navtabs ul {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.navtabs li.selected li a.popupctrl {
border-radius: 3px;
}
.toplinks .notifications a.popupctrl {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.breadcrumb .navbit > a, .breadcrumb .lastnavbit > span {
border-radius: 5px;
}
.breadcrumb .navbit a.popupctrl {
border-radius: 3px;
}
.textbox,
textarea,
select {
border-radius: 3px;
}
.config_customize {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.config_editlink {
border-radius: 5px;
}
.config_save {
border-radius: 5px;
}
.config_customize_pages {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.config_customize_page {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.newcontent_textcontrol {
border-radius: 10px;
}
.picker{
background: -o-linear-gradient(#eeeeee,#999999);
}
.lightgraybackground{
background: -o-linear-gradient(#ffffff,#cccccc);
}
.alert_box
{
background: -o-gradient( linear, 0 0, 0 100%, from(#ffffff), to(#888888) );
border-radius: 10px;
z-index: 10;
}
.alert_box .hd
{
border-radius: 10px;
}
.alert_box .bd
{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.alert_box .ft input.btn {
border-radius: 5px;
}
.ok_button {
border-radius: 5px;
}
.attach_popup
{
border-radius: 5px;
}
.globalsearch .textboxcontainer span {
border-top: 1px solid #365f7c;
border-left: 1px solid #365f7c;
}
#sidebar_container .blockrow {
border-radius: 5px;
}
#sidebar_container .widget_content {
border-radius: 5px;
}
.mini_stats {
border-radius: 5px;
}
#sidebar {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.pollresultsblock {
border-radius: 5px;
}
div#content_container
div.block {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#searchtypeswitcher li a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
div#usercp_nav
div.block {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
div#blog_sidebar_generic
.block {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
div#blog_sidebar_generic {
border-radius: 5px;
}
#pagetitle a.pagetitleinfo.textcontrol, .actionbutton_container a.pagetitleinfo.textcontrol {
border-radius: 10px;
box-shadow: 0 3px 8px #DDD;
}
#whatsnewsidebar div.blocksubhead.smaller a, #whatsnewsidebar div.blocksubhead.smaller span
.blogitems li ,span {
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}
#sidebar_container .blockbody {
border-radius: 5px;
}
dd.userprof_module, dd.userprof_moduleinactive, dd.userprof_content, dd.userprof_module a, dd.userprof_moduleinactive a, dd.userprof_content a {
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}
.cms_widget {
border-radius: 5px;
}
.widget_content {
border-radius: 5px;
}
.cms_widget .block {
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}
#charnav dd a {
border-radius: 3px;
}
6. Կրկնում ենք նոր CSS սարքելու գործողությունը: Վերնագրում գրում ենք, օրինակ` Shadow, իսկ ներքեւում պատճենում հետեւյալ կոդը ու պահպանում.
.memberaction_body.popupbody {
box-shadow: 0px 4px 7px #808da4;
}
.newcontent_textcontrol {
box-shadow: 0 3px 8px #dddddd;
}
.footer {
box-shadow: -2px 2px 2px #2d3f53;
}
.notices li {
box-shadow: -2px 2px 2px #808da4;
}
div#content_container
.forumhead {
box-shadow: -2px 2px 2px #808da4;
}
div#content_container
.forumrow {
box-shadow: -2px 2px 2px #808da4;
}
#sidebar {
box-shadow: -2px 2px 2px #808da4;
}
div#forum_info_options.forum_info.block
h4.forumoptiontitle.blockhead {
box-shadow: -2px 0px 2px #808da4;
}
div#forum_info_options.forum_info.block
h4.blockhead {
box-shadow: -2px 0px 2px #808da4;
}
.blockbody.formcontrols.floatcontainer {
box-shadow: -2px 2px 2px #808da4;
}
div#threadlist.threadlist
.threadlisthead.table {
box-shadow: -2px 2px 2px #808da4;
}
div#threadlist.threadlist
.rating0 {
box-shadow: -2px 2px 2px #808da4;
}
.forum_info_block.blockbody.formcontrols {
box-shadow: -2px 2px 2px #808da4;
}
div#wgo.collapse.wgo_block.block h2.blockhead {
box-shadow: -2px 2px 2px #808da4;
}
div#forumbits.forumbits
.forumbit_post {
box-shadow: -2px 2px 2px #808da4;
}
div#thread_info.thread_info.block
h4.threadinfohead.blockhead {
box-shadow: -2px 0px 2px #808da4;
}
div#thread_info.thread_info.block
h4.blockhead {
box-shadow: -2px 0px 2px #808da4;
}
div#thread_info.thread_info.block
.thread_info_block.blockbody.formcontrols {
box-shadow: -2px 2px 2px #808da4;
}
div#blog_sidebar_generic {
box-shadow: -2px 2px 2px #808da4;
}
.cms_widget {
box-shadow: -2px 2px 2px #808DA4;
}
.albumlist_entry {
box-shadow: -2px 2px 2px #808DA4;
}
#latestalbumcontainer li {
box-shadow: -2px 2px 2px #808DA4;
}
#thumbnails li {
box-shadow: -2px 2px 2px #808DA4;
}
#content .blockrow > li, #content .blockrow > ol, #content .blockrow > div {box-shadow: -2px 2px 2px #808DA4;
}
#content .blockhead {box-shadow: -2px 2px 2px #808DA4;
font-weight: bold;
}
#pictures .blockbody .blockrow, #group_discussion_inlinemod_form .blockbody .blockrow {
box-shadow: -2px 2px 2px #808DA4;
}
h2.searchlisthead {
box-shadow: -2px 2px 2px #808DA4;
}
ol#searchbits.searchbits
{
box-shadow: -2px 2px 2px #808DA4;
}
ol#stickies.stickies
.icon0 {
box-shadow: -2px 2px 2px #808da4;
}
div#sidebar_container.profile_widgets.member_summary.userprof_moduleinactive.userprof_moduleinactive_border.sidebarleft
{ box-shadow: -2px 2px 2px #808da4;
}
Այքանից հետո ակումբի էջը վերստին բեռնում ենք (Ctrl+R) եւ` վայելում::)
Նկատված թերությունները խնդրում եմ նշեք այս թեմայում: :ok