mikem1986

phpbb3

i have this on auto-install from my hosting provider

https://www.phpbb.com/

and my board looks like

https://www.outreachcommunity.org.uk/board

hi rhand

i know how to add widgets, im just saying when i add them the ones which are hard coded dont move

Hi Rhand

I did a fresh footer.php override

Now i can add widgets to the bottom but they seem to add onto the bottom rather than replacing the default ones there?

add the div into the footer.php file?

be back in about 20 mins, need to leave work mate ??

where do i add that?

thanks for helping me btw

Hi Rhand

The Link section has now moved into the centre even though this is “footer right” and the “our pages” section is still on the left even though this should be center

I want it like…

Most View | Pages | Links
| |
| |

Hi again Rhand

Floated it left but no change

sorry buddy

so i change floated right of recent comments to left so it goes center?

this is the CSS

TABLE OF CONTENTS

HTML Elements
Structure
Navigation Bar
Text
Index Page
Content Page
Sidebar
Form Elements
Comments
Footer
Clear

/* HTML Elements */

* {
margin:0;
padding:0;
}

body {
font: 100% Arial, Helvetica;
background: #505050;
color: #505050;
}

p {
margin: 15px 0;
}

a:link, a:visited {
color: #000000;
text-decoration:none
}

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

a img {
border:0;
}

code {
font: 1.0em ‘Courier New’, Courier, Fixed;
background:#ececec;
}

acronym, abbr, span.caps {
font-size: 0.9em;
letter-spacing: .07em;
cursor: help;
}

acronym, abbr {
border-bottom: 1px dashed #999;
}

blockquote {
padding: 10px 10px 0 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: #ececec;
font:1.0em Arial;
line-height:1.5em;
margin:10px 0px;
}

select {
width: 130px;
}

/* Structure */

#head {
width:930px;
margin:0px auto;
margin-top:0px;
padding:10px 5px 15px 5px;
font-size:0.7em;
background:#fff;
border-left:5px solid #fff;
border-right:5px solid #fff;
}

#page {
width:920px;
margin:0px auto;
padding:10px;
background:#eeeeee url(images/bg_stripe.gif);
font-size:0.7em;
border-left:5px solid #fff;
border-right:5px solid #fff;
}

.left {
float:left;
}

.right {
float:right;
}

/* Navigation Bar*/
#navbar {
margin:0 auto;
padding:0px 10px 0px 10px;
text-transform:uppercase;
background:#333333 url(images/navbar.png);
width:920px;
font-size:0.6em;
border-left:5px solid #fff;
border-right:5px solid #fff;
}

#page-bar {
padding:0px;
}

#page-bar ul {
list-style: none;
}

#page-bar li {
float:left;
list-style:none;
cursor: pointer;
display:block;
border-right:1px solid #303030;
}

#page-bar li:hover {
background: #5b5b5b;
}

#page-bar a, #page-bar a:visited {
margin: 0px;
padding:7px 14px;
font-weight:bold;
color:#eeeeee;
display:block;
}

#page-bar a:hover {
text-decoration:none;
display:block;
}

#page-bar p {
margin:0;
padding:0;
}

#searchform {
width:184px;
float:right;
text-align:right;
padding-top:3px;
margin-right:10px;
}

/* Dropdown Menus */
#page-bar li {
float: left;
margin: 0px;
padding: 0px;
}

#page-bar li li {
float: left;
margin: 0px;
padding: 0px;
width: 132px;
text-transform:none;
}

#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
width: 122px;
float: none;
margin: 0px;
padding: 4px 10px 4px 10px;
background: #5b5b5b url(images/dots_nav.gif) repeat-x top;
}

#page-bar li li a:hover, #page-bar li li a:active {
background: #909090;
padding: 4px 10px 4px 10px;
}

#page-bar li ul {
position: absolute;
width: 10em;
left: -999em;
}

#page-bar li:hover ul {
left: auto;
display: block;
}

#page-bar li:hover ul, #page-bar li.sfhover ul {
left: auto;
}

/* Text*/

h1 {
font:3.5em Arial;
font-weight:bold;
letter-spacing:-0.08em;
}

h2 {
font:2.0em Arial;
font-weight:bold;
}

h3 {
font:1.3em Arial;
margin-bottom:3px;
color:#303030;
font-weight:bold;
}

h4 {
font:1.0em Arial;
}

h3.cat_title, h3.cat_title a {
color:#333333;
letter-spacing:-0.05em;
}

h3#respond {
margin-top:0px;
padding-top:20px;
}

h3#comments {
margin-top:32px;
padding-left:0px;
margin-bottom:15px;
}

h3.authors {
margin-top:15px;
}

/* Index Page*/

#logo {
width:165px;
height:90px;
background:#fff;
}

#tagline {
margin-top:10px;
font-size:1em;
color:#1d3566;
font-weight:bold;
}

#top {
margin:0 auto;
padding:0px 10px 0px 0px;
background:#dedede;
width:930px;
font-size:0.7em;
border-left:5px solid #fff;
border-right:5px solid #fff;
}

#headline {
width:560px;
float:left;
padding:0px 12px 10px 25px;
font-size:1.05em;
line-height:1.5em;
margin:0;
background:#333333;
color:#fff;
overflow:hidden;
}

#headline a {
color:#a0a0a0;
}

#headline a:hover {
color:#d0d0d0;
}

#top div.label {
font:1.2em Arial;
font-weight:bold;
text-transform:lowercase;
letter-spacing:-0.05em;
line-height:0.9em;
display:block;
padding-bottom:0px;
padding-top:15px;
}

#headline div.title {
font:2.4em Arial;
font-weight:bold;
letter-spacing:-0.05em;
line-height:0.9em;
display:block;
padding-bottom:5px;
padding-top:15px;
}

#headline div.meta {
display:block;
padding:4px 0px 4px 0px;
color:#ececec;
font-size:0.85em;
}

#headline p {
padding-bottom:25px;
}

#featured {
width:310px;
float:right;
padding:0px 10px 0px 10px;
font-size:1.05em;
}

#featured .clearfloat {
margin-top:0px;
margin-bottom:7px;
}

#featured .info {
margin-top:5px;
padding-top:0px;
float:right;
width:193px;
font-size:0.9em;
}

#featured .meta {
margin-top:5px;
font-size:0.85em;
}

#featured .title {
font-weight:bold;
}

#featured .divider {
margin-left:95px;
}

#headline a img, #featured a img {
margin-top:5px;
}

#featured a {
color:#000000;
}

#featured a:hover {
color:#808080;
}

#featured a img {
border:2px solid #fff;
margin-right:10px;
}

#headline a img {
border:3px solid #fff;
margin-right:15px;
margin-bottom:10px;
}

#single_head {
width:195px;
float:left;
padding:15px 12px 20px 25px;
margin:0;
background:#333333;
color:#fff;
}

#single_head a img {
border:3px solid #fff;
}

#single_desc {
width:675px;
float:right;
padding:0px 10px 5px 10px;
font-size:1.05em;
line-height:1.5em;
}

#single_desc div.title {
font:2.4em Arial;
font-weight:bold;
letter-spacing:-0.05em;
line-height:0.9em;
display:block;
padding-bottom:5px;
padding-top:10px;
}

#single_desc div.meta {
display:block;
padding-bottom:5px;
font-size:0.85em;
}

#single_desc p {
margin:0px;
padding-bottom:10px;
}

#single_desc a {
color:#000000;
}

#single_desc a:hover {
color:#808080;
}

#mores {
margin:0 auto;
border-left:5px solid #fff;
border-right:5px solid #fff;
border-bottom:5px solid #fff;
width:940px;
font-size:0.7em;
}

#more-head {
background:#333333;
text-align:center;
float:left;
width:560px;
padding:0px 12px 10px 25px;
}

#more-feat {
background:#dedede;
text-align:center;
float:right;
width:320px;
padding:0px 10px 10px 13px;
}

#more-head a {
background:#404040;
color:#b0b0b0;
}

#more-feat a {
background:#d0d0d0;
color:#505050;
}

#more-head a, #more-feat a {
display:block;
font-weight:bold;
padding:3px;
}

#more-feat a:hover {
text-decoration:none;
background:#b0b0b0;
}

#more-head a:hover {
text-decoration:none;
background:#505050;
}

#middle {
margin:0 auto;
padding:10px 10px 0px 10px;
background:#fff;
width:920px;
font-size:0.7em;
border-left:5px solid #fff;
border-right:5px solid #fff;
}

.category {
width:164px;
float:left;
border-top:8px solid #333333;
margin:0px;
padding:5px 10px 15px 10px;
background:#fff;
}

.category p {
margin:0;
}

.category span.cat_title, #front-popular h3, #front-list .cat_title, #gallery h3 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
}

#front-list .cat_title {
font-size:1.25em;
}

#front-popular h3 {
color:#fff;
}

.more-link {
display:block;
margin:15px 0px;
}

.category a {
color:#333333;
display:block;
background:none;
}

.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}

#bottom {
width: 920px;
}

#bottom-left {
float:left;
}

#bottom-left .meta, #content.archive .meta {
font-size:0.85em;
}

#front-list {
width:570px;
padding:10px;
background:#fff;
font-size:1.05em;
line-height:1.75em;
margin-bottom:10px;
border-top:1px solid #ececec;
}

#front-list blockquote {
padding: 0px 10px 0 10px;
}

#front-list .title {
font:1.5em Arial;
font-weight:bold;
letter-spacing:-0.05em;
}

#front-list .divider {
margin-left:216px;
margin-top:0px;
margin-bottom:0px;
}

.author {
font-size:0.8em;
font-weight:bold;
}

.meta {
color:#333333;
font-weight:bold;
}

#headline p, #featured p {
margin:0;
}

#paged-list {
width:570px;
padding:0px 10px;
background:#fff;
font-size:1.05em;
line-height:1.75em;
border-top:1px solid #ececec;
}

#paged-list .clearfloat {
background:url(images/dots_content.gif) repeat-x bottom;
padding-bottom:1px;
}

.onecolumn {
line-height:1.5em;
padding:10px 0px;
margin:0;
}

.onecolumn img {
float:left;
margin:8px 10px 7px 0px;
border:1px solid #ccc;
padding:2px;
}

.tanbox {
width:275px;
line-height:1.5em;
padding:10px 0px;
margin:0;
}

.archive .tanbox {
width:570px;
background:url(images/dots_content.gif) repeat-x bottom;
padding-bottom:1px;
}

.tanbox img {
float:left;
margin:8px 10px 7px 0px;
border:1px solid #ccc;
padding:2px;
}

.tanbox span.title a, .onecolumn span.title a {
font:1.2em Arial;
font-weight:bold;
}

.tanbox p, .onecolumn p {
margin:5px 0px;
}

#navigation {
padding:15px 10px;
background:#fff;
font-size:1.05em;
text-align:center;
width:550px;
}

/* Content Page*/

#content {
width:570px;
background:#fff;
padding:10px;
font-size:1.05em;
line-height:1.75em;
float:left;
border-top:1px solid #ececec;
}

.post {
font-size:1.05em;
line-height:1.75em;
}

.post p {
margin-top:0px;
}

.post .clearfloat {
border-bottom:1px solid #e2e2e2;
}

.entry ul, .post ol {
margin-bottom:15px;
}

#content h2.title {
letter-spacing:-0.05em;
border-bottom:1px solid #e2e2e2;
border-top:3px solid #e2e2e2;
margin-bottom:0px;
padding:5px 0px;
color:#000000;
}

.entry ul li {
list-style:square;
margin-left:30px;
}

.entry ol li {
list-style:decimal;
margin-left:30px;
}

.entry ol li ul li {
list-style:square;
margin-left:20px;
}

.entry img, .post a img, #front-list img {
border:1px solid #ccc;
margin:0 10px 5px 0;
padding:2px;
}

.entry a {
text-decoration:underline;
}

.post .ads {
margin-top:10px;
}

#stats {
margin-bottom:15px;
padding:8px 0px;
font:0.9em Arial;
display:block;
border-bottom:1px solid #e2e2e2;
font-weight:bold;
}

span#map {
font-size:0.9em;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}

/* Sidebar*/
#sidebar {
width:320px;
float:right;
margin:0px 0px 0px 0px;
overflow:hidden;
}

.spoiler {
padding:0px 12px 12px 12px;
background:#fff;
border-top:1px solid #ececec;
margin-bottom:12px;
overflow:hidden;
}

.spoiler img {
border:1px solid #ccc;
padding:2px;
margin-right:10px;
margin-bottom:5px;
}

.spoiler h3 {
font:1.1em Arial, Helvetica, Verdana, Sans-Serif;
font-weight:bold;
color:#fff;
margin:0px 0px 8px 0px;
padding:3px 10px;
border-bottom:1px solid #ececec; }

.spoiler h3 a {
color:#fff;
text-decoration:none;
}

.spoiler p {
margin:0;
color:#6d6d6d;
}

.spoiler h4 {
font:1.05em Arial, Helvetica, Verdana, Sans-Serif; font-weight:bold;
margin-bottom:5px;
}

.spoiler h4 a {
color:#333333;
}

#sidebar h3 {
font:1.1em Arial;
font-weight:bold;
background:#303030;
color:#fff;
margin:10px 0px 5px 0px;
padding:3px 10px;
}

#sidebar-top, #sidebar-bottom {
width:300px;
float:right;
padding:0px 10px 10px 10px;
background:#fff;
border-top:1px solid #ececec;
}

#sidebar-bottom, #sidebar-middle {
margin-top:10px;
}

#sidebar-middle {
width:320px;
float:right;
}

#sidebar-left {
width:135px;
padding:0px 10px 10px 10px;
float:left;
background:#fff;
border-top:1px solid #ececec;
}

#sidebar-right {
width:135px;
padding:0px 10px 10px 10px;
float:right;
background:#fff;
border-top:1px solid #ececec;
}

#sidebar li {
list-style:none;
border-bottom:1px dotted #bbbbbb;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}

#sidebar li ul li {
border-bottom:0px;
}

#sidebar-ads {
width:300px;
float:right;
margin-bottom:10px;
padding:10px;
background:#fff;
}

#sidebar h3 img { margin-top:1px; }

/* Form Elements */

select {
border:1px solid #333333;
width:100%
}

.submitbutton {
padding: 1px;
border:1px solid #aaa;
background:#fff;
font-size:0.9em;
color:#aaa;
cursor: pointer;
}

.field {
padding: 1px;
border-top:1px solid #bbbbbb;
border-left:1px solid #bbbbbb;
border-right:1px solid #eeeeee;
border-bottom:1px solid #eeeeee;
background:#fff;
font-size:1.0em;
}

#search .searchbutton {
padding: 1px;
border:1px solid #333333;
background:#fff;
font-size:1.0em;
}

#commentform input {
width: 140px;
margin: 5px 5px 0px 0;
}

#commentform textarea {
width: 99%;
margin-top:5px;
border-top:1px solid #bbbbbb;
border-left:1px solid #bbbbbb;
border-right:1px solid #eeeeee;
border-bottom:1px solid #eeeeee;
}

/* Comments*/

#comments {
line-height:1.5em;
}

.commentlist cite {
font-style:normal;
margin-bottom:0px;
display:block;
font-size:1.1em;
}

.commentlist blockquote {
background:#ededed;
}

.commentlist li {
color:#4d4d4d;
padding: 10px 14px 10px 14px;
background:#f2f2f2;
border-bottom: 1px solid #dcdbd7;
list-style:none;
margin-bottom:3px;
line-height:1.0em;
}

.commentlist li li {
background:none;
border:none;
list-style:square;
margin:3px 0 3px 20px;
padding:3px 0;
}

.commenttext {
width:482px;
float:right;
line-height:1.5em;
}

li.my_comment {
background: #fff;
}

li cite strong {
font-size: 1.1em;
color:#313228;
}

#commentform small {
background:#FFF;
font-weight:bold;
padding:0;
}

.commentmetadata {
color:#4d4d4d;
display: block;
margin-top:3px;
text-align:right;
font-size:0.9em;
}

.commentmetadata a, .commentmetadata a:visited {
color:#959382;
}

.commentlist small {
background:#e9e9e9;
}

.avatar {
border:1px solid #ccc;
margin:15px 8px 6px 0;
float:left;
padding:2px;
width:45px;
height:45px;
}

#comment {
width:590px;
background:#fff;
}

/* Footer*/

#carousel {
font-size:0.7em;
color:#fff;
width: 910px;
background:#fff;
margin: 0 auto;
padding:15px;
border-left:5px solid #fff;
border-right:5px solid #fff;
}

.carousel-item {
width:131px;
float:left;
padding:0px 20px;
border-right:1px dotted #ccc;
}

.carousel-item img {
border:1px solid #ccc;
padding:2px;
margin-bottom:5px;
}

.carousel-item .info {
font-weight:bold;
}

#gallery {
font-size:0.7em;
color:#333;
width: 925px;
background:#dedede;
margin: 0 auto;
padding:15px 0px 0px 15px;
border-left:5px solid #fff;
border-right:5px solid #fff;
}

#gallery #random {
float:right;
width:613px;
padding-bottom:5px;
}

#gallery #random img {
padding:2px;
border:1px solid #ccc;
margin-right:16px;
margin-bottom:15px;
background:#fff;
}
#gallery #video {
float:left;
width:281px;
padding-right:15px;
margin-bottom:15px;
border-right:1px solid #b0b0b0;
}

#gallery h3 {
display:block;
padding-bottom:5px;
}
#front-popular {
font-size:0.7em;
color:#fff;
width: 910px;
background:#303030;
margin: 0 auto;
padding:15px;
border-left:5px solid #fff;
border-right:5px solid #fff;
}

#recentpost, #mostcommented {
width:276px;
float:left;
padding:0px 20px 0px 0px;
border-right:1px solid #808080;
}

#mostcommented {
margin-left:20px;
}

#recent_comments {
width:276px;
float:right;
padding:0px;
}

#recentpost a, #mostcommented a, #recent_comments a {
color:#fff;
}

#recentpost ul, #mostcommented ul, #recent_comments ul {
margin-top:5px;
}

#recentpost li, #mostcommented li, #recent_comments li {
list-style:none;
background:url(images/dots_footer.gif) repeat-x top;
padding-top:1px;
}

#recentpost ul li a, #mostcommented ul li a, #recent_comments ul li a {
padding:5px;
display:block;
text-decoration:none;
}

#recentpost ul li a:hover, #mostcommented ul li a:hover, #recent_comments ul li a:hover {
background:#000000;
color:#fff;
}

#recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child {
background:none;
}

#footer {
margin: 0 auto;
width: 920px;
font-size:0.6em;
background:#dedede;
color:#333333;
padding:5px 10px;
border-left:5px solid #fff;
border-right:5px solid #fff;
}

#footer a:hover {
color:#808080;
}

/* Float Properties*/

.clearfloat:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfloat {
display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfloat {
height:1%;
}

*+html .clearfloat {
height:1%;
}

.clearfloat {
display:block;
}

Hi Rhand

The widget is added

“Most Commented” is meant to be in the left footer space

“Our Pages” is meant to be centered but obviously not appearing there

nobody?

nobody?

thanks nick

thanks hairstyler ??

any others?