MyBB Community Forums

MyBB Community Forums > Extensions > Themes > Theme Support > I need a little CSS help
Full Version: I need a little CSS help
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

darkworldacademy

2012-02-08, 01:36 AM
Hey hey! XD
I've started using dark fusion as my forum's main theme, I just have a few questions regarding the width of the header part of the page.
here's an example of what I'm trying to do.
http://fc03.deviantart.net/fs70/i/2012/0...4p02xj.png

Basically, I want my header to be:

----------------WHITE BAR-------------------
-------------------LOGO----------------------
---------------NAV-Buttons-------------------

________________INDEX___________________

Here is the full css:
body {
	background: #1a1a1a url(images/darkfusion/style/body_bg.png) top left repeat;
	line-height: 1.4;
	margin: auto auto;
	padding-bottom: 20px;
	color: #000;
	text-align: center;
	font-family: tahoma;
	font-size: 11px;
}

a:link {
	color: #0e79ca;
	text-decoration: none;
}

a:visited {
	color: #0e79ca;
	text-decoration: none;
}

a:hover, a:active {
	color: #1399ff;
	text-decoration: none;
}

a:focus {
outline: none;
}

.header {
	background: #070707 url(images/darkfusion/style/header_bg.png) bottom left repeat;
	text-align: center; 
        width: 100%;
	height: 144px;
}

.header_right {
	background: url(images/darkfusion/style/header_right.png) top left no-repeat;
	height: 96px;
        width: 530px;
        padding-top: 50px;
        padding-right: 20px;
        float: right;
}

.header_in {
	margin: auto auto;
}

.logo {
	float: left;
	margin-top: auto;
	margin-left: auto;
}

#container {
	background: #101010;
	width: 65%;
	color: #808080;
	border: 1px solid #2a2a2a;
	margin: auto auto;
	padding: 20px;
	text-align: left;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}

#content {
	width: auto !important;
}

#footer {
        width: 65%;
        color: #fff;
        margin: auto auto;
        padding: 10px 20px 20px 20px;
        text-align: left;
        text-shadow: 0 1px 0 #000;
}

.menu {
	width: 540px;
        padding-right: 20px;
}

.menu ul {
	width: 540px;
        float: right;
	color: #fff;
	font-weight: bold;
	text-align: right;
}

.menu ul a:link, .menu a:visited {
	background: url(images/darkfusion/style/menu_bg.png) top left repeat-x;
        width: 90px;
	padding: 9px 7px 8px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #fff;
	text-decoration: none;
        text-shadow: 0 -1px 0 #202020;
}

.menu ul a:hover, .menu ul a:active {
	background: url(images/darkfusion/style/menu_bg.png) top left repeat-x;
        width: 90px;
	padding: 9px 7px 8px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #fff;
	text-decoration: none;
        text-shadow: 0 -1px 0 #202020;
}

#calendar .calendar, #portal .portal, #index .index, #search .search, #members .members, #help .help {
	background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
	padding: 9px 7px 8px;
	color: #000;
	text-decoration: none;
        text-shadow: 0 1px 0 #33adff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

#panel {
	background: url(images/darkfusion/style/panel_bg.png) top left repeat-x;
	width: 100%;
	padding: 8px 0px 8px 0px;
	position: fixed;
	z-index: 9999;
        top: 0;
	color: #000;
	font-family: tahoma;
	font-size: 11px;
        text-shadow: 0 1px 0 #fff;
}

#panel .remember_me input {
	vertical-align: middle;
	margin-top: 2px;
}

table {
	color: #808080;
	font-family: tahoma, arial;
	font-size: 11px;
        text-shadow: 0 -1px 0px #101010;
}

.tborder {
	background: #111111;
	width: 100%;
	margin: auto auto;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.thead {
	background: #0256d8 url(images/darkfusion/style/thead_bg.png) top left repeat-x;
	color: #ffffff;
        padding: 5px 10px 5px 10px;
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	text-shadow: 0 -1px 0 #003c98;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #151515;
	color: #808080;
	font-size: 11px;
        padding: 3px 10px 3px 10px;
	border-left: 1px solid #252525;
}

.tcat a:link {
	color: #808080;
}

.tcat a:visited {
	color: #808080;
}

.tcat a:hover, .tcat a:active {
	color: #909090;
}

.trow1 {
	background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
	border-top: 1px solid #292929;
	border-left: 1px solid #292929;
}

.trow2 {
	background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
	border-top: 1px solid #292929;
	border-left: 1px solid #292929;
}

.trow_h {
	background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
	border-top: 1px solid #292929;
	border-left: 1px solid #292929;
}

.trow_h:hover {
	background: #252525 url(images/darkfusion/style/trow_hover_bg.png) top left repeat-x;
	border-top: 1px solid #292929;
	border-left: 1px solid #292929;
}

.trow_plain {
	background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
}

.trow_shaded {
	background: #303030;
}

.trow_selected td {
	background: #000;
}

.trow_sep {
	background: #2a2a2a;
        padding: 5px 10px 5px 10px;
	color: #808080;
	font-size: 11px;
	font-weight: bold;
}

.tfoot {
	background: #0256d8 url(images/darkfusion/style/thead_bg.png) top left repeat-x;
	color: #ffffff;
        padding: 5px 10px 5px 10px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	text-shadow: 0 -1px 0 #003c98;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

#bottommenu {
        margin: auto;
	padding: 10px;
	color: #303030;
        font-size: 11px;
        font-weight: bold;
        text-align: middle;
}

#bottommenu img {
	padding-right: 5px;
	vertical-align: top;
}

#bottommenu a:link, #bottommenu a:visited {
       margin: 0 5px;
}

.navigation {
	background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
        padding: 5px;
	border: 1px solid #292929;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	color: #808080;
	font-size: 11px;
	font-weight: bold;
}

.navigation a:link {
	text-decoration: none;
	color: #0e79ca;
}

.navigation a:visited {
	text-decoration: none;
	color: #0e79ca;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
	color: #808080;
}

.navigation .active {
	color: #808080;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 14px;
	font-weight: bold;
        font-family: arial;
}

input.textbox {
	background: #fff url(images/darkfusion/style/textbox_bg.png) bottom left repeat-x;
	color: #000;
	border-top: 1px solid #bababa;
        border-left: none;
        border-bottom: none;
        border-right: none;
	padding: 3px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	font-family: tahoma;
	font-size: 11px;
}

input.button {
	background: #e0e0e0 url(images/darkfusion/style/button_bg.png) bottom left repeat-x;
	color: #000;
	border: 1px solid #bababa;
	padding: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	font-weight: bold;
	font-family: tahoma;
	font-size: 11px;
        text-shadow: 0 1px 0 #e0e0e0;
}

textarea {
	background: #181818;
	color: #808080;
	border: 1px solid #121212;
	padding: 2px;
	font-family: Verdana, Arial, Sans-Serif;
	line-height: 1.4;
	font-size: 13px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
        -moz-box-shadow: 0px 0px 1px #404040;
        -webkit-box-shadow: 0px 0px 1px #404040;
        box-shadow: 0px 0px 1px #404040;
        -khtml-box-shadow: 0px 0px 1px #404040;
}

select {
	background: #101010;
	color: #808080;
	border: 1px solid #303030;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #0f5c8e;
}

.autocomplete {
	background: #fff;
	border: 1px solid #000;
	color: black;
}

.autocomplete_selected {
	background: #adcee7;
	color: #000;
}

.popup_menu {
	background: #101010;
	border: 1px solid #202020;
        margin-top: 2px;
}

.popup_menu .popup_item {
	background: #101010;
	color: #808080;
}

.popup_menu .popup_item:hover {
	background: #202020;
	color: #fff;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.hiddenrow {
	display: none;
}

.selectall {
	background-color: #FFFBD9;
	font-weight: bold;
	text-align: center;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
	padding-left: 5px;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

#panel .links {
	margin: 0;
	float: right;
}

#panel img {
	padding-right: 5px;
	vertical-align: middle;
}

.panel-irt {
	padding-right: 5px;
	vertical-align: top;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#copyright {
	font: 11px Verdana, Arial, Sans-Serif;
	margin: 0;
	padding: 3px 0 0 0;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}

blockquote {
	border-left: 6px solid #606060;
        -moz-box-shadow: 0px 0px 1px #101010;
        -webkit-box-shadow: 0px 0px 1px #101010;
        box-shadow: 0px 0px 1px #0098ff;
        -khtml-box-shadow: 0px 0px 1px #101010;
	margin: 0;
	background: #404040;
	padding: 5px;
        color: #fff;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #606060;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	border-left: 6px solid #606060;
        -moz-box-shadow: 0px 0px 1px #101010;
        -webkit-box-shadow: 0px 0px 1px #101010;
        box-shadow: 0px 0px 1px #0098ff;
        -khtml-box-shadow: 0px 0px 1px #101010;
	margin: 0;
	background: #404040;
	padding: 5px;
        color: #fff;
}

.codeblock .title {
	border-bottom: 1px solid #606060;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
        margin-right: 5px;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/error.gif) no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}

.pagination a {
	background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
        padding: 3px 7px 4px 7px;
	color: #808080;
	border-top: 1px solid #292929;
	-moz-border-radius:2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	text-shadow: 0 -1px 0 #101010;
}

.pagination .pagination_current {
	background: #0256d8 url(images/darkfusion/style/thead_bg.png) top left repeat-x;
        padding: 4px 7px;
	color: #ffffff;
	-moz-border-radius:3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow: 0 -1px 0 #002661;
	font-weight: bold;
}

.pagination a:hover {
	background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
        padding: 3px 7px 4px 7px;
	color: #ffffff;
        border-top: 1px solid #292929;
	-moz-border-radius:3px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	text-shadow: 0 -1px 0 #101010;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}

._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}

._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}

._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}

.pagination_breadcrumb {
	background-color: #f5f5f5;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	font-weight: normal;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

.lastpost {
        float: left;
        text-align: left;
        margin-top: 1px;
}

fieldset {
	background-color: #303030;
        color: #fff; 
        border: 1px solid #303030;
        margin: 2px;
        padding: 5px;
}

.qsearch {
	background: url(images/darkfusion/style/search_bg.png) top left no-repeat;
	height: 50px;
        width: 160x;
        float: right;
	padding: 0;
	margin: 0;
        border: none;
}

.qsearch input {
	background: transparent;
	color: #202020;
	border: none;
	float: left;
	font-size: 11px;
	font-family: trebuchet ms, arial;
	padding: 1px 5px 5px 5px;
        margin: 0;
}

.qsearch .btn:hover {
	background: url(images/darkfusion/style/search_icon.png) top left no-repeat;
        border: none;
	float: right;
	margin-left: 2px;
	margin-top: 1px;
        padding: 0;
	width: 23px;
        height: 20px;
}

.topmenu {
	padding: 9px 5px 0 5px;
background: #000;
text-align: left;
margin: auto auto;
height: 23px;
}

.topmenu a:link {
	padding: 5px 15px 5px 15px;
color: #ccc;
text-decoration: none;
}

.topmenu a:visited {
	padding: 5px 15px 5px 15px;
color: #ccc;
text-decoration: none;
}

.topmenu a:hover {
	padding: 5px 15px 0px 15px;
color: #fff;
text-decoration: underline;
}

.test {
background: #151515;
display: block;
width: 120px;
margin: 3px 3px 0px 3px;
padding: 2px 3px;
border-bottom:1px solid #2a2a2a;
-moz-border-radius: 3px;
text-align: right;
font-weight: bold;
}

ranjani

2012-02-08, 06:48 AM
paste the content from header template ;
as informed earlier , its easy to do required modifications with temporary admin privileges as its a bit complex theme

darkworldacademy

2012-02-08, 09:44 AM
You've got the login details. I'm unable to do the edits as im verry unexxperienced Smile
Could you? ^^

ranjani

2012-02-08, 09:54 AM
^ well, I have test user login NOT the admin panel login !! you have not added test user's primary group to administrators ...
{ AND at present I have to move out - will return after some time - may be half an hour - one and half hour }

darkworldacademy

2012-02-08, 10:21 AM
(2012-02-08, 09:54 AM)ranjani Wrote: [ -> ]^ well, I have test user login NOT the admin panel login !! you have not added test user's primary group to administrators ...
{ AND at present I have to move out - will return after some time - may be half an hour - one and half hour }

Sorry, didn't know

ranjani

2012-02-08, 01:40 PM
change below code in global.css 
.logo {
    float: left;
    margin-top: auto;
    margin-left: auto;
}

to below code 
.logo {
    margin-top: auto;
    margin-left: auto;
}

change below code in global.css
.menu {
    width: 540px;
    padding-right: 20px;
}

to below code 
.menu {
    width: 540px;
    padding-right: 20px;
    position: absolute;
    left: 56px;
    top: 146px;
}

if you can't get it as required then temporary admin privileges must be provided to adjust it !!





darkworldacademy

2012-02-09, 04:26 AM
I made all of the edits and all it did was center to logo, I've set the default group for the admin account I gave you to default, so you should have the admin panel now.

ranjani

2012-02-09, 04:45 AM
^ there were unwanted spaces ( ) in edited code ! check it now (refresh your forum page - use CTRL + F5) ..

darkworldacademy

2012-02-09, 05:15 AM
I seem to be having trouble getting the menu to appear in the center and below the logo at the same time. >.<

ranjani

2012-02-09, 05:28 AM
^ that might require removing the right side image (curved image) used for menu buttons ..
logo in center looks odd with that image as there will be considerable blank space left around the image !!
Pages: 1 2
MyBB Community Forums > Extensions > Themes > Theme Support > I need a little CSS help