MyBB Community Forums

Full Version: Switching Breadcrumb Styles
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hello,
Right now im using some accord themes ad I gotta say I love, love, love the theme but IMO the breadcrumbs are ugly, and often have display issues. I've searched some threads about switching breadcrumbs, but I gotta say I was a bit confused... These tutorials are nice but I dont think theyre explained well for noobs, like myself.
http://community.mybb.com/thread-118766.html

http://community.mybb.com/thread-101361-...#pid738690

http://community.mybb.com/thread-101361-...#pid738690

I found this tutorial which seems easier to understand but I'm not too sure how to apply it/replace text w/o messing it up?
http://mybbsource.com/thread-4935.html

I know my breadcrumb info is in the nav template but adding/replacing it on the css is null cuz there is no "breadcrumb" section?

here's the theme
http://mods.mybb.com/view/accord-autumn

here's my site,
http://thecrypt.org/bb
Bump!
bump!
Bump!
(2012-07-22, 04:37 PM)vegathechosen Wrote: [ -> ]Hello,
Right now im using some accord themes ad I gotta say I love, love, love the theme but IMO the breadcrumbs are ugly, and often have display issues. I've searched some threads about switching breadcrumbs, but I gotta say I was a bit confused... These tutorials are nice but I dont think theyre explained well for noobs, like myself.
http://community.mybb.com/thread-118766.html

http://community.mybb.com/thread-101361-...#pid738690

http://community.mybb.com/thread-101361-...#pid738690

I found this tutorial which seems easier to understand but I'm not too sure how to apply it/replace text w/o messing it up?
http://mybbsource.com/thread-4935.html

I know my breadcrumb info is in the nav template but adding/replacing it on the css is null cuz there is no "breadcrumb" section?

here's the theme
http://mods.mybb.com/view/accord-autumn

here's my site,
http://thecrypt.org/bb

Stop bumping, before somebody drops a ban-hammer on you! I don't understand what you don't understand in the tutorial! It explains the steps needed to edit you breadcrumbs Smile
and as i said in my post in my theme there is no breadcrumb section like it suggests in the tutorial so i dont know how to apply it to my theme. And why would i get banned? this topic has been here for months and bumping it every two weeks to get some help doesnt seem bad it's not like im doing it twice a day and its never been on done while the topic has been on the first couple pages. Thanks for your response even though it didnt help with my issue.
http://community.mybb.com/thread-118766.html is very very easy to follow. You just copy paste like it says in each of the templates and add the css in your global css.

Which part are you struggling with?
where do I add .breadcrumb in the global css? as specified in the link in your post? I can add it anywhere? just at the top? or does it need to be placed somewhere specific in the global.css

here's the the global.css,
body {
	background: #000000 url(images/accord-ember/splatter.jpg) repeat-x;
              background-position: top center;
	color: #dedede;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
	line-height: 1.4;
        width: 90%;
        margin: 0 auto;
}

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

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

a:hover, a:active {
	text-decoration: underline;
}

#container {
	background: url(images/accord-ember/content-bg.png) top left;
	color: #000000;
	position: relative;
        top: 30px;
	padding: 20px;
	clear: both;
        margin-bottom: 40px;
}

#content {
	
	width: auto !important;
}

.logo {
	float: center;
	margin-top: 40px;
}

.menu {
	font-family: 'Comfortaa';
        letter-spacing: -.5px;
	float: right;
        margin-top: 50px;
        font-size: 24px;
}

.menu ul {
	color: #fff;
	font-weight: bold;
	text-align: right;
	padding: 4px;
	list-style: none;
	margin: 0;
}

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

.menu ul a:link {
	color: #a3a3a3;
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
}

.menu ul a:visited {
	color: #a3a3a3;
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	color: #fff;
	color: rgba(255, 255, 255, 1);
	text-decoration: none;
        text-shadow: 0 0 10px #fff;
}

#panel {
	color: #dedede;
	font-size: 11px;
}

#panel a:hover {
	color: #dedede;
        text-decoration: none;
}

#panel #top {
	margin-bottom: -8px;
}

#panel #bottom {
	padding-top: 5px;
}

#panel hr {
	color: #444;
        background: #444;
}

#panel .cp-links {
	float: right;
}

#panel .cp-links a {
	margin-left: 20px;
}

#panel .cp-links a img, #panel .links a img {
	vertical-align: top;
        padding-right: 10px;
}

#panel a.logout {
	margin-left: 10px;
}

#panel a.logout img {
	padding-left: 10px;
        vertical-align: top;
}

#panel .other-links a {
	margin-right: 15px;
}

#panel .remember_me input {
	vertical-align: middle;
	ymargin-top: -1px;
}

.loginusername {
	background: #3f3f3f url(images/accord-ember/username.png) 10px 6px no-repeat;
        border: 1px solid #606060;
        padding: 6px 2px 6px 30px;
        color: #dedede;
        margin-right: 15px;
}

.loginpassword {
	background: #3f3f3f url(images/accord-ember/password.png) 10px 6px no-repeat;
        border: 1px solid #606060;
        padding: 6px 2px 6px 30px;
        color: #dedede;
        margin-right: 15px;
}

.loginbutton {
	background: url(images/accord-ember/login-button.gif) top left repeat-x;
        height: 30px;
        width: 66px;
        border: none;
        text-transform: uppercase;
        color: #dedede;
}

.loginbutton:hover {
	background: url(images/accord-ember/login-button-hover.gif) top left repeat-x;
        cursor: pointer;
}

.register {
	float: right;
        font-size: 16px;
}

.register img {
	padding-left: 5px;
        vertical-align: middle;
}

table {
	color: #dedede;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.tborder {
	background: #3f3f3f;
	width: 100%;
	margin: auto auto;
}

.thead {
	background: #752525 url(images/accord-ember/thead.gif) top left repeat-x;
        height: 35px;
        padding-top: 0;
        padding-bottom: 0;
	color: #ffffff;
}

.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: #1f1f1f;
	color: #dedede;
	font-size: 12px;
}

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

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

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

.trow1 {
	background: #292929;
}

.trow2 {
	background: #292929;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #915151;
}

.trow_selected td a {
	color: #dedede;
}

.trow_sep {
	background: #555;
	color: #dedede;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #752525 url(images/accord-ember/thead.gif) top left repeat-x;
        height: 35px;
        padding-top: 0;
        padding-bottom: 0;
	color: #ffffff;
}

.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 {
	background: none repeat scroll 0 0 #292929;
        border-top: 1px solid #3F3F3F;
        color: #000000;
        margin: 10px -20px -20px;
        padding: 15px;
}

.bottom-links a {
	margin-right: 15px;
}

.triangle {
	border-color: #444444 transparent transparent;
        border-style: solid;
        border-width: 10px 0 15px 10px;
        float: left;
        height: 0;
        left: -30px;
        position: relative;
        top: 13px;
        width: 0;
}

.navigation {
	color: #000000;
        font-size: 13px;
        font-weight: bold;
        left: -40px;
        margin: 40px 0 -10px;
        position: relative;
        top: -35px;
}

.navigation a.navbit:link {
	background: #555;
        padding: 9px 10px 10px 10px;
	color: #fff;
}

.navigation a.navbit:visited {
	background: #555;
        padding: 9px 10px 10px 10px;
	color: #fff;
}

.navigation a.navbit:hover, .navigation a.navbit:active {
	text-decoration: none;
}

.navigation .active {
	background: #555;
        padding: 9px 10px 10px 10px;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
}

.nav-sep {
	position: relative;
        top: 13px;
        margin: 0 -4px;
}

.nav-sep-active {
	position: relative;
        top: 13px;
        margin: 0;
}

.smalltext {
	font-size: 11px;
        color: #dedede;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #555;
	color: #dedede;
	border: 1px solid #666;
	padding: 1px;
}

textarea {
	background: #555;
	color: #dedede;
	border: 1px solid #666;
	padding: 2px;
	font-family: Verdana, Arial, Sans-Serif;
	line-height: 1.4;
	font-size: 13px;
}

select {
	background: #555;
	border: 1px solid #666;
        color: #dedede;
}

.editor {
	background: #444;
	border: 1px solid #333;
}

.editor_control_bar {
	background: #555;
	border: 1px solid #666;
}

.autocomplete {
	background: #555;
	border: 1px solid #666;
	color: #dedede;
}

.autocomplete_selected {
	background: #777;
	color: #dedede;
}

.popup_menu {
	background: #666;
	border: none;
}

.popup_menu .popup_item {
	background: #555;
	color: #dedede;
}

.popup_menu .popup_item:hover {
	background: #666;
	color: #dedede;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #dedede;
}

.reputation_negative {
	color: red;
}

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

.valid_field {
	border: 1px solid #0c0;
        background: #555;
        color: #dedede;
}

.validation_error {
	background: url(images/accord-ember/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/accord-ember/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/accord-ember/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

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;
}

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

.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;
}

fieldset {
	border: 1px solid #777;
}

#copyright {
	font: 11px Verdana, Arial, Sans-Serif;
	margin: 0 0 30px 0;
	padding: 10px 0 0 0;
        color: #dedede;
}

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

blockquote {
	background: #000000;
	border: 1px solid #ccc;
	margin: 0;
	padding: 4px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	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 {
	background: #000000;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	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;
	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;
	margin-bottom: 15px;
}

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

.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: 20px;
	margin-bottom: 5px;
        color: #dedede;
}

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

.pagination .pages {
	font-weight: bold;
        margin-right: 5px;
}

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

.pagination a {
	border: 1px solid #777;
        background: url(images/accord-ember/login-button-hover.gif) top left repeat-x;
        color: #dedede;
        padding: 5px 10px;
}

.pagination .pagination_current {
	border: 1px solid #915151;
        background: url(images/accord-ember/thead.gif) top left repeat-x;
        color: #dedede;
        padding: 5px 10px;
}

.pagination a:hover {
	text-decoration: none;
        background: url(images/accord-ember/thead.gif) top left repeat-x;
	border: 1px solid #915151;
}

.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; 
	vertical-align: middle;
	border: none;
}

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

._neutral {
	background-color:#3f3f3f;
	color: #dedede;
	border:1px solid #555;
}

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

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

.pagination_breadcrumb {
	background-color: #3f3f3f;
	border: 1px solid #555;
	padding: 10px 5px;
	margin-top: 5px;
	font-weight: normal;
}

.pagination_breadcrumb_link {
	background: #555555;
	cursor: pointer;
	margin: 0 0 0 -4px;
	padding: 9px 0 10px;
	position: relative;
	top: 13px;
}

#lang_select {
	margin-top: -5px;
}

I apologize im probably making this much harder on myself.
Paste it anywhere in global.css. Just put it at the very bottom.
I think I got it (almost) I'm having one small display issue

[Image: 2_17_09_12_1_17_42.png]

notice the gap in the navbar can anyone help with that?

nvm got it, when i added the code to the navbit_active it added some extra code i deleted it and now it looks flush thanks for the help guys!
Pages: 1 2