phpBB • Free and Open Source Forum Software

RSS Facebook Twitter
Menu

Delete/change forum bg.

For support and discussion related to templates and themes in phpBB 3.3.
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations
Post Reply
User avatar
bennybernaer
Registered User
Posts: 602
Joined: Tue Mar 22, 2011 9:53 pm
Contact:
Contact bennybernaer

Delete/change forum bg.

Post by bennybernaer »

I try to give my forum a modern look. This works fine except in viewforum.


Indexpage = GOOD
Image


But in the viewforum section the forum bg remains. It's only good if I delete .headerbar, .forumbg { in prosilver
I myself use a modified prosilver (perso.css) overite css for prosilver.


Image

How do I remove this? So that I get the look like on forum index ?

Full perso.css

Code: Select all

/*  perso Custom Style Sheet  */


/**********************************************/
/*************** common.css *******************/
/**********************************************/
body {
	padding: 0;
}

.wrap {
    border-radius: 0px;
}

h3 {
	font-size: 1.2em;
}

p {
	font-size: 1.2em;
}

.headerbar {
	padding-top: 1px;
}

.navbar ul.linklist {
    font-size: 12px;
}

div.rules {
	margin-bottom: 30px;
	padding: 15px;
	border-left: 3px solid;
}

.rules strong:first-child {
    display: block;
}

.forumdescription  {
  font-size: 13px;
}

.subforum  {
  font-size: 13px;
}
  
.navbar-header-top {
    padding: 12px 10px;
    border-radius: 0;
    font-size: 1.1em;
}

.navbar-header-top ul {
    max-width: 1152px;
    margin-inline: auto;
}

.navbar-header-top ul.linklist {
    font-size: 12px;
}

.navbar-footer {
    padding: 12px 10px;
    border-radius: 0;
    font-size: 1.1em;
}

.navbar-footer ul {
    max-width: 1152px;
    margin-inline: auto;
}

.navbar-footer ul.linklist {
    font-size: 12px;
}

/* Round cornered boxes and backgrounds */
.headerbar, .navbar, .forabg, .forumbg, .panel, .post, div.rules, .pagination li a, .pagination li span,
.action-bar .button, .dropdown .dropdown-contents, .button {
	border-radius: 0px;
}

.forabg, .forumbg {
	margin-bottom: 20px;
	padding: 0px;
	clear: both;
}

ul.topiclist.forums, ul.topiclist.topics {
    padding: 7px 0;
}

ul.topiclist.forums li.row, ul.topiclist.topics li.row {
    margin: 0 7px;
}

li.header {
	border-bottom: 5px solid;
    border-top: 1px solid;
}

.panel {
	margin-bottom: 4px;
	padding: 5px 10px;
}

.post {
	padding: 5px 10px;
	margin-bottom: 4px;
	background-repeat: no-repeat;
	background-position: 100% 0;
	position: relative;
}

.rowbg {
	margin: 5px 5px 2px 5px;
}

/* Pagination in viewforum for multipage topics */
.row .pagination li a, .row .pagination li span {
	border-radius: 2px;
	padding: 1px 3px;
	font-size: 10px;
}

/* Table styles */
table.table1 thead th {
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1.3em;
	padding: 10px;
}


/*********************************************/
/*************** links.css *******************/
/*********************************************/
.username-coloured {
    font-size: 12px;
}

a.forumtitle {
	font-size: 1.4em;
}

a.topictitle {
	font-size: 1.4em;
}

.forumbg .header a:hover, .forabg .header a:hover, th a:hover {
	color: #aa0000;
}

/**********************************************/
/*************** content.css ******************/
/**********************************************/
li.row strong {
	font-weight: bold;
}

li.header dt {
    font-size: 1.2em; /* category header / forum title font size */
}

li.header dt, li.header dd {
	line-height: 1em;
	border-left-width: 0;
	margin: 12px 0 10px 0;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 1.7em;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: none;
}

li.header dt {
	font-weight: normal;
	width: 100%;
	margin-right: -440px;
}

.content h2, .panel h2 {
	font-size: 2em;
}

/* Poster profile block
----------------------------------------*/
.postprofile {
    text-align: center;
}

/* Post-profile avatars */
.postprofile .avatar {
	float: none;
}

.postprofile .avatar img {
    margin: 0 auto;
}

.avatar {
    border-radius: 75px;
}


/**********************************************/
/*************** buttons.css ******************/
/**********************************************/
.button {
	padding: 4px 10px;
}

.button-search,
.button-search-end  {
	padding: 4px 7px;
}


/**********************************************/
/**************** forms.css *******************/
/**********************************************/
dd select {
	padding: 7px;
}

.inputbox {
	padding: 7px;
}


/**********************************************/
/**************** icons.css *******************/
/**********************************************/
.search-box .inputbox {
	background-image: none;
	border-right-width: 0;
	border-radius: 0px;
	height: 28px;
	padding: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.icon, .button .icon, blockquote cite:before, .uncited:before {
  	font-size: 16px;
}

.icon:before {
    padding-right: 4px;
}


/**********************************************/
/*************** colours.css ******************/
/**********************************************/
html, body {
	color: #536482;
	background-image: url("./images/bg.gif");
}

a:hover { color: #aa0000; }
a:focus, a:active { color: #105289; }

.wrap {
    background: linear-gradient(to bottom, #e8e8e8 3%, #ffffff 100%);
    opacity: .95;  /* .98 */
}

.headerbar {
	background: #505C65;
}

.navbar {
	background-color: transparent;
}
.navbar-header-top {
    background-color: #2D3039;
	position: sticky;
    top: 0;
    z-index: 1;
}

.navbar-header-top a { color: #CCCCCC; }
.navbar-header-top a:hover { color: #aa0000; }

.dropdown-contents a { color: #105289; }
.dropdown-contents a:hover { color: #aa0000; }

.navbar-header-top .dropdown-trigger.dropdown-toggle .username-coloured {
    color: #CCCCCC !important;
}

ul.topiclist dd {
	border-left-color: #FFFFFF;
}

.rtl ul.topiclist dd {
	border-right-color: #FFFFFF;
	border-left-color: transparent;
}

li.row {
	border-color: #e9f1f8;
	background: #FFFFFF;
}

ul.topiclist li.row:first-child {
    border-top-color: #e9f1f8;
}

li.row strong {
	color: #000000;
}

li.row:hover {
	background-color: #f8fcff;
}

li.row:hover dd {
	border-left-color: #CCCCCC;
}

.rtl li.row:hover dd {
	border-right-color: #CCCCCC;
	border-left-color: transparent;
}

li.header, thead {
   background: linear-gradient(to right, #69c 3%, #8a1737 100%);
}

li.header dl.row-item {
   background: linear-gradient(to right, #69c 3%, #8a1737 100%);
}

li.header::after {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #EA8708;;
	content: '';
	position: absolute;
	margin: -5px 0 0 15px;
}

li.header dt, li.header dd {
	color: #FFFFFF;
}

p.post-notice {
	background-color: #ECD5D8;
	background-image: none;
	border-color: #BC2A4D;
}

ul.navlinks {
	border-top-color: transparent;
}

.jumpbox-cat-link {
	background: linear-gradient(to right, #69c 3%, #7a1732 100%);
	border-top-color: #83C4D6;
}

li.row {
	border-top-color:  transparent;
	border-bottom-color: #4692BF;
}

li.row:hover {
	background-color: #F5F5F5;
}

.online {
    border-right: 5px solid #01AC00;
}

.offline {
    border-right: 5px solid #FF0000;
}

.pagination li.active span {
	background: #60889B;
	border-color: #60889B;
}

.pagination li a:hover, .pagination li a:hover .icon, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
	background: #60889B;
	border-color: #60889B;
}

select {
	border-color: #666666;
	background-color: #FAFAFA;
	color: #000;
	padding: 7px;
}

/* footer Bars*/
.copyright {
	background-color: #1D1F25;
	color: #A4A4A7;
}

body.high_contrast_links .navbar_footer a,
body.high_contrast_links .copyright_bar a {
	color: #CCCCCC !important;
}

.footer-row a { color: #CCCCCC; }
.navbar-footer {
	background-color: #2D3039;
}

.navbar-footer a { color: #CCCCCC; }
.navbar-footer a:hover { color: #aa0000; }

.navbar-footer .dropdown-contents a { color: #105289; }
.navbar-footer .dropdown-contents a:hover { color: #aa0000; }

/* ------- Table styles ------- */

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	background-color: #F5F5F5;
	color: #000;
}


/* ------- Forum & Topic Icons (Pulsing) ------- */
dl.row-item {
    background-image: none;
}

.forums .row-item:before, .topics .row-item:before, .pmlist .row-item:before, .cplist .row-item:before {
	font-family: FontAwesome;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -15px;
	margin-left: 9px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 50%;
    background: #87bdd8;
	color: #FFF;
	font-size: 16px;
}

/* Adjustments for weirdly sized icons */
/* Nudge the speech bubble up a few pixels */
.topic_read:before, .topic_read_mine:before, .topic_read_hot:before, .topic_read_hot_mine:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before {
	line-height: 28px !important;
}

/* External link left and down */
.forum_link:before {
	line-height: 0 !important;
	width: 30px !important;
	height: 15px !important;
	padding: 16px 0 1px 2px;
}

/* Set the icons */							/* Megaphone */
.global_read:before							{content: "\f0a1";}
.global_read_mine:before					{content: "\f0a1";}
.global_read_locked:before					{content: "\f0a1";}
.global_read_locked_mine:before				{content: "\f0a1";}
.global_unread:before						{content: "\f0a1";}
.global_unread_mine:before					{content: "\f0a1";}
.global_unread_locked:before				{content: "\f0a1";}
.global_unread_locked_mine:before			{content: "\f0a1";}
                                            /* Megaphone */
.announce_read:before						{content: "\f0a1";}
.announce_read_mine:before					{content: "\f0a1";}
.announce_read_locked:before				{content: "\f0a1";}
.announce_read_locked_mine:before			{content: "\f0a1";}
.announce_unread:before						{content: "\f0a1";}
.announce_unread_mine:before				{content: "\f0a1";}
.announce_unread_locked:before				{content: "\f0a1";}
.announce_unread_locked_mine:before			{content: "\f0a1";}
											/* External link */
.forum_link:before							{content: "\f08e";}
											/* Speech Bubble */
.forum_read:before							{content: "\f03a";}
.forum_read_subforum:before					{content: "\f03a";}
.forum_unread:before						{content: "\f03a";}
.forum_unread_subforum:before				{content: "\f03a";}
											/* Pin */
.sticky_read:before							{content: "\f08d";}
.sticky_read_mine:before					{content: "\f08d";}
.sticky_read_locked:before					{content: "\f08d";}
.sticky_read_locked_mine:before				{content: "\f08d";}
.sticky_unread:before						{content: "\f08d";}
.sticky_unread_mine:before					{content: "\f08d";}
.sticky_unread_locked:before				{content: "\f08d";}
.sticky_unread_locked_mine:before			{content: "\f08d";}
											/* Right arrow */
.topic_moved:before							{content: "\f061";}
											/* Envelope */
.pm_read:before 							{content: "\f2b6";}
.pm_unread:before 							{content: "\f0e0";}
											/* Speech Bubble */
.topic_read:before							{content: "\f075";}
.topic_read_mine:before						{content: "\f075";}
.topic_read_hot:before						{content: "\f075";}
.topic_read_hot_mine:before					{content: "\f075";}
.topic_unread:before						{content: "\f075";}
.topic_unread_mine:before					{content: "\f075";}
.topic_unread_hot:before					{content: "\f075";}
.topic_unread_hot_mine:before				{content: "\f075";}
											/* Padlock */
.forum_read_locked:before					{content: "\f023";}
.forum_unread_locked:before					{content: "\f023";}
.topic_read_locked:before					{content: "\f023";}
.topic_read_locked_mine:before				{content: "\f023";}
.topic_unread_locked:before					{content: "\f023";}
.topic_unread_locked_mine:before			{content: "\f023";}


/* Unread States */
.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before, .announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before, .forum_unread:before, .forum_unread_locked:before, .forum_unread_subforum:before, .sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before, .pm_unread:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before, .topic_unread_locked:before, .topic_unread_locked_mine:before {
	background-color: #d41142 !important;
}

/* Form button styles
---------------------------------------- */
a.button1, input.button1, input.button3, a.button2, input.button2 {
    padding: 7px 12px;
}

/* Unread States */
.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before, .announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before, .forum_unread:before, .forum_unread_locked:before, .forum_unread_subforum:before, .sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before, .pm_unread:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before, .topic_unread_locked:before, .topic_unread_locked_mine:before {
	animation: UnreadPulse 3s infinite;
	color: #FFF;
}
/* Box shadow for unread pulse icons */
@-webkit-keyframes UnreadPulse {
	0% {
	  -webkit-box-shadow: 0 0 0 0 rgba(233,64,47,0.4);
	}
	70% {
		-webkit-box-shadow: 0 0 0 8px rgba(233,64,47,0);
	}
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(233,64,47,0);
	}
}
@keyframes UnreadPulse {
	0% {
	  -moz-box-shadow: 0 0 0 0 rgba(233,64,47,0.4);
	  box-shadow: 0 0 0 0 rgba(233,64,47,0.4);
	}
	70% {
		-moz-box-shadow: 0 0 0 8px rgba(233,64,47,0);
		box-shadow: 0 0 0 8px rgba(233,64,47, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(233,64,47,0);
		box-shadow: 0 0 0 0 rgba(233,64,47,0);
	}
}

/* Gekleurde profielvelden */
.section-viewtopic dl.postprofile dd.profile-posts a, .section-viewtopic dd.profile-posts strong,
.section-viewtopic dd.profile-gender, .section-viewtopic dd.profile-gender strong,
.section-viewtopic dd.profile-startgewicht, .section-viewtopic dd.profile-startgewicht strong {
    color: #EF5350;
}

.section-viewtopic dd.profile-joined, .section-viewtopic dd.profile-joined strong,
.section-viewtopic dd.profile-streefgewicht, .section-viewtopic dd.profile-streefgewicht strong {
    color: #0080FF;
}

.section-viewtopic dd.profile-phpbb_location, .section-viewtopic dd.profile-phpbb_location strong,
.section-viewtopic dd.profile-contact, .section-viewtopic dd.profile-contact strong {
    color: #00A690;
}

.section-viewtopic dd.profile-leeftijd, .section-viewtopic dd.profile-leeftijd strong {
    color: #FF9900;
}

.section-viewtopic dd.profile-flag, .section-viewtopic dd.profile-flag strong {

    color: #4dffff;
}

.section-viewtopic dd.profile-huidig_gewicht, .section-viewtopic dd.profile-huidig_gewicht strong  {
    color: #CC6600;
}

/* (Buttons)
---------------------------------------- */
a.button:not(.button-icon-only):not([class*="search"]),
a.button1, input.button1, a.button2, input.button2, input.button3 {
	color: #fff;
	background: #79AAC2;
	border-color: #79AAC2;
}

a.button:not(.button-icon-only):not([class*="search"]):hover,
a.button:not(.button-icon-only):not([class*="search"]):focus,
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover,
a.button1:focus, input.button1:focus, a.button2:focus, input.button2:focus, input.button3:focus {
	color: #fff;
	background: #60889B;
	border-color:  #60889B;
	text-shadow: none;
}

a.button:not(.button-icon-only):not([class*="search"]) i,
a.button:not(.button-icon-only):not([class*="search"]):hover i {
	color: #fff;
}

.button2[name="not_agreed"],
a.lock-btn:not(.button-icon-only):not([class*="search"]) {
	color: #fff;
	background: #d41142;
	border-color: #d41142;
}
	
.button2[name="not_agreed"]:hover,
.button2[name="not_agreed"]:focus,
a.lock-btn:not(.button-icon-only):not([class*="search"]):hover,
a.lock-btn:not(.button-icon-only):not([class*="search"]):focus {
	background: #be0f3b;
	border-color: #be0f3b;
}

/* Input field styles */
.inputbox:hover {
	border-color: #79AAC2;
}

.inputbox:focus {
	border-color: #79AAC2;
}

/* Colours and backgrounds for buttons.css */
.button .icon,
.button-secondary {
	color: #79AAC2;
}


/**********************************************/
/************** responsive.css ****************/
/**********************************************/
@media (max-width: 430px) {
	.action-bar .search-box .inputbox {
		width: 57px;
    }
}

@media (max-width: 700px) {
    .topic-poster {
        display: block !important;
    }

    .navbar-header-top {
	    margin-bottom: 0;
    }

    .headerbar + .navbar {
		margin-top: -8px;
	}

    li.header dt {
	    font-size: 1.4em;
	}
	
	.page-body {
	    margin: 4px 0;
	    padding-bottom: 12px;
	    clear: both;
    }

    .navbar-footer {
	    margin-top: -2px;
    }

    .post .postprofile {
		text-align: left;
    }

    .postprofile .avatar {
		margin-left:  0 !important;
		margin-bottom: 0.5em;
	}

    .post.online .postprofile {
		background-size: 40px;
	}

    .phpbb_alert {
		top: 150px;
	}

    .section-viewforum .forumbg .row-item .list-inner {
        display: flex;
        flex-direction: column;
    }

    .section-viewforum .forumbg .row-item .list-inner > *:first-child {
        order: 1;
    }
    .section-viewforum .forumbg .row-item .list-inner > *:nth-child(4) {
        order: 2;
    }
    .section-viewforum .forumbg .row-item .list-inner > *:nth-child(3) {
        order: 3;
    }
    .section-viewforum .forumbg .row-item .list-inner > *:nth-child(2) {
        order: 4;
    }
    .section-viewforum .forumbg .row-item .list-inner > *:nth-child(5) {
        order: 5;
    }
}
@media (min-width: 701px) and (max-width: 950px) {

	ul.topiclist dt {
    	margin-right: -410px;
	}

	ul.topiclist dt .list-inner {
    	margin-right: 410px;
	}

	dd.posts, dd.topics, dd.views {
    	width: 80px;
	}
}
@media (min-width: 701px) {
    form#login {
        display: flex;
        flex-wrap: wrap;
    }
    form#login .panel {
        flex: 1;
        width: 50%;
    }
    form#login .panel:first-child {
        margin-right: 2px;
    }   
    form#login .panel:last-child {
        margin-left: 2px;
    }
    form#login .panel dd label {
        white-space: normal;
    }
}
@media (min-width: 701px) {
    li.header dl.row-item dt .list-inner {
	/* Tweak for headers alignment when folder icon used */
	    padding-left: 5px;
	    padding-right: 50px;
    }
}
Last edited by Mick on Mon May 16, 2022 8:53 am, edited 1 time in total.
Reason: Solved.
Top
User avatar
Steve
Registered User
Posts: 1481
Joined: Tue Apr 07, 2009 7:48 pm
Name: Steven Clark
Contact:
Contact Steve

Re: Delete/change forum bg.

Post by Steve »

Add your background color in this section of your file.

Code: Select all

.forabg, .forumbg {
    margin-bottom: 20px;
    padding: 0px;
    clear: both;
}
@ The Chief Medical Officers guideline for men is that: You are safest not to drink regularly more than 14 units per week.
- I drank that today++ :lol: 🍺
Top
User avatar
Talk19Zehn
Registered User
Posts: 846
Joined: Tue Aug 09, 2011 1:10 pm
Contact:
Contact Talk19Zehn

Re: Delete/change forum bg.

Post by Talk19Zehn »

Hello, try this example ...

Code: Select all

.forabg {
	background-color: #E1EAEE;
	background-image: none;
	filter: none;
	background-repeat: repeat-x;
}

.forumbg {
	background-color: #E1EAEE;
	background-image: none;
	filter: none;
	background-repeat: repeat-x;
}
or this example:

Code: Select all

.forabg, .forumbg {
	background-color: #E1EAEE;
	background-image: none;
	filter: none;
	background-repeat: repeat-x;
	margin-bottom: 20px;
	padding: 0px;
	clear: both;
}
Regards
Best regards
phpBB3 Designs - My own works: Stylearea Ongray-Designs, Adventinducement-Calendar for phpBB
Top
User avatar
bennybernaer
Registered User
Posts: 602
Joined: Tue Mar 22, 2011 9:53 pm
Contact:
Contact bennybernaer

Re: Delete/change forum bg.

Post by bennybernaer »

Steve wrote: ↑Mon May 16, 2022 8:32 am Add your background color in this section of your file.

Code: Select all

.forabg, .forumbg {
    margin-bottom: 20px;
    padding: 0px;
    clear: both;
}
Thank you Steve & Talk19Zehn! Sometimes it can be easy, if you know how

Code: Select all

.forabg, .forumbg {
       background: #EEF5F9;
	margin-bottom: 20px;
	padding: 0px;
	clear: both;
}
Top
Post Reply

Return to “[3.3.x] Styles Support & Discussion”