vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)
-   -   What is the best place to add custom CSS (https://vborg.vbsupport.ru/showthread.php?t=215945)

bizhat 06-11-2009 07:08 PM
What is the best place to add custom CSS
 
My forum have a custom header. I have placed my html code in header template, also added a link to css like

Code:
<link rel="stylesheet" type="text/css" href="/menu.css" />
The problem is it take some time to load the CSS, the menu in header based on list item shows as list item, after a few seconds it displays normally after CSS loaded.

On which template i need to add my CSS so it load properly ?

Butcher 06-11-2009 07:15 PM
there is a box for adding your own CSS already within the admincp.

style manager->
your style -> then from the dropdown menu pick Main CSS
scroll to the very bottom and add your CSS in the bottom box

bizhat 06-11-2009 07:28 PM
Thanks, done that.

This add the CSS as inline, don't get the advantage of external file like caching. Now CSS need to downloaded to visitor every time they visit. Any other way to do this ?

--------------- Added [DATE]1244752351[/DATE] at [TIME]1244752351[/TIME] ---------------

On all my pages, i have a big inline style as follows

Code:
<!-- CSS Stylesheet -->
<style type="text/css" id="vbulletin_css">
/**
* vBulletin 3.8.2 CSS
* Style: 'Default Style'; Style ID: 1
*/
body
{
        background: #E1E1E2;
        color: #000000;
        font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
        margin: 0 10px;
        padding: 0px;
}
a:link, body_alink
{
        color: #22229C;
}
a:visited, body_avisited
{
        color: #22229C;
}
a:hover, a:active, body_ahover
{
        color: #FF4400;
}
.page
{
        background: #FFFFFF;
        color: #000000;
}
td, th, p, li
{
        font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
        background: #D1D1E1;
        color: #000000;
        border: 1px solid #0B198C;
}
.tcat
{
        background: #869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left;
        color: #FFFFFF;
        font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
        color: #ffffff;
        text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
        color: #ffffff;
        text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
        color: #FFFF66;
        text-decoration: underline;
}
.thead
{
        background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left;
        color: #FFFFFF;
        font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
        color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
        color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
        color: #FFFF00;
}
.tfoot
{
        background: #3E5C92;
        color: #E0E0F6;
}
.tfoot a:link, .tfoot_alink
{
        color: #E0E0F6;
}
.tfoot a:visited, .tfoot_avisited
{
        color: #E0E0F6;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
        color: #FFFF66;
}
.alt1, .alt1Active
{
        background: #F5F5FF;
        color: #000000;
}
.alt2, .alt2Active
{
        background: #E1E4F2;
        color: #000000;
}
.inlinemod
{
        background: #FFFFCC;
        color: #000000;
}
.wysiwyg
{
        background: #F5F5FF;
        color: #000000;
        font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
        margin: 5px 10px 10px 10px;
        padding: 0px;
}
.wysiwyg a:link, .wysiwyg_alink
{
        color: #22229C;
}
.wysiwyg a:visited, .wysiwyg_avisited
{
        color: #22229C;
}
.wysiwyg a:hover, .wysiwyg a:active, .wysiwyg_ahover
{
        color: #FF4400;
}
textarea, .bginput
{
        font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.bginput option, .bginput optgroup
{
        font-size: 10pt;
        font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
        font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
        font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
        font-size: 11px;
        font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
        font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
        color: #666686;
}
.navbar
{
        font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
        color: #FF0000;
        font-weight: bold;
}
.fjsel
{
        background: #3E5C92;
        color: #E0E0F6;
}
.fjdpth0
{
        background: #F7F7F7;
        color: #000000;
}
.panel
{
        background: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left;
        color: #000000;
        padding: 10px;
        border: 2px outset;
}
.panelsurround
{
        background: #D1D4E0 url(images/gradients/gradient_panelsurround.gif) repeat-x top left;
        color: #000000;
}
legend
{
        color: #22229C;
        font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
        background: #738FBF;
        color: #FFFFFF;
        font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
        padding: 3px 6px 3px 6px;
        white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
        color: #FFFFFF;
        text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
        color: #FFFFFF;
        text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
        color: #FFFFFF;
        text-decoration: underline;
}
.vbmenu_popup
{
        background: #FFFFFF;
        color: #000000;
        border: 1px solid #0B198C;
}
.vbmenu_option
{
        background: #BBC7CE;
        color: #000000;
        font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
        white-space: nowrap;
        cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
        color: #22229C;
        text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
        color: #22229C;
        text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
        color: #FFFFFF;
        text-decoration: none;
}
.vbmenu_hilite
{
        background: #8A949E;
        color: #FFFFFF;
        font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
        white-space: nowrap;
        cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
        color: #FFFFFF;
        text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
        color: #FFFFFF;
        text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
        color: #FFFFFF;
        text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

/* CUSTOM */

#menu{
width: 100%;
font-family: Verdana, Arial, Sans-Serif;
font-size:12px;
font-weight:bold;
background:#0a8ed0;
border-top: 1px solid #1679aa;
border-bottom: 1px solid #1679aa;
}

#menu ul{
border: 0px solid #BBB;
width: 100%;
padding: 5px 0;
margin: 0;
text-align: center;
}

#menu ul li{
display: inline;
}

#menu ul li a{
color:#FFFFFF;
padding: 5px 30px;
margin: 0;
text-decoration: none;
border-right: 1px solid #0583c2;
}

#menu ul li a:hover{
color:#FFFF00;
background:#00699B;

}
</style>
This forum do not have it. I have do anything to move the inline css to external ? any vbulletin settings ?

Butcher 06-11-2009 09:09 PM
not totally sure what your asking but there is an option to have the CSS store as a style sheet and not with the DB. it's in the admincp->vbulletin options

bizhat 06-11-2009 09:31 PM
Thanks, got it done.

ubcforums 06-14-2009 06:13 PM
sometimes it becomes difficult..if hardened php is installed...to edit css

Princeton 06-15-2009 11:44 AM
Quote:
Originally Posted by bizhat (Post 1827812)
My forum have a custom header. I have placed my html code in header template, also added a link to css like

Code:
<link rel="stylesheet" type="text/css" href="/menu.css" />
The problem is it take some time to load the CSS, the menu in header based on list item shows as list item, after a few seconds it displays normally after CSS loaded.

On which template i need to add my CSS so it load properly ?
add to headinclude template NOT header template


All times are GMT. The time now is 04:45 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.01868 seconds
  • Memory Usage 1,753KB
  • 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
  • (3)bbcode_code_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (7)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