The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
2 posters

    Forum link alignment

    avatar
    Jerrr
    New Member


    Posts : 20
    Reputation : 1
    Language : English

    Solved Forum link alignment

    Post by Jerrr May 4th 2015, 11:02 pm

    Technical Details


    Forum version : phpBB2
    Position : Founder
    Concerned browser(s) : Google Chrome
    Screenshot of problem : https://i.servimg.com/u/f19/19/20/78/20/exampl10.png
    Who the problem concerns : Yourself
    Forum link : http://chromamen.forumotion.com

    Description of problem

    Hi there,

    I've posted recently with several other problems, all to which I've found a solution. Now (for aesthetic purposes) I need to figure out how to center-align my forum links on the main page of my forum.

    Chromamen.forumotion.com

    Code:
    body {
        background-image: url(http://i19.servimg.com/u/f19/19/20/78/20/backgr13.jpg);
        background-repeat: no-repeat;
      background-color: #000000
        background-attachment: fixed;

    background-repeat: repeat-x;
       background-attachment: fixed;
       scrollbar-face-color: #ff8080;
       scrollbar-highlight-color: #ff5757;
       scrollbar-shadow-color: #ffa3a3;
       scrollbar-3dlight-color: #d1d7dc;
       scrollbar-arrow-color: #006699;
       scrollbar-track-color: #efefef;
       scrollbar-darkshadow-color: #98aab1;
       }
    th {
      background-image: url(http://i19.servimg.com/u/f19/19/20/78/20/header13.png);
      background-color: rgba(255, 255, 255, 0)
        font-size: 0px;
        color : rgba(255, 255, 255, 0);
    }
    th,td,p {
        font-family: Verdana,Arial,Helvetica,sans-serif }
      align-text: center;
    a img {
        border: none;
        }
    a:link,a:active,a:visited {
        color : #f5ea24;
        }
    a:hover{
        text-decoration:
        color : #f5ea24;
        }
    hr{
        height: 0px;
        border: solid #ffffff 0px;
        border-top-width: 1px;
       }
    .bodyline{
       }
    .bodylinewidth {
       width:80%}
    .forumline{
        background-color: #000000;
        border-style: solid;
      border-width: 2px;
      border-top-color: #1f1f1f;
      border-left-color: #878787;
      border-right-color: #878787;
      border-bottom-color: #ffffff;
        }
    td.row1{
        background-color: #000000;
      border-style: solid;
      border-width: 2px;
      border-top-color: #ffffff;
      border-left-color: #000000;
      border-right-color: #000000;
      border-bottom-color: #ffffff;
      align-text: center;
        }
    td.row2{
        background-color: #000000;
      border-style: solid;
      border-width: 2px;
      border-top-color: #ffffff;
      border-left-color: #000000;
      border-right-color: #000000;
      border-bottom-color: #ffffff;
      align-text: center;
        }
    td.row3{
        background-color: #000000;
      border-style: solid;
      border-width: 2px;
     border-top-color: #ffffff;
      border-left-color: #000000;
      border-right-color: #000000;
      border-bottom-color: #ffffff;
      align-text: center;
        }
    td.rowpic {
       background-color: #000000;
         background-image: url(http://i19.servimg.com/u/f19/19/20/78/20/header13.png);
       }
    td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
         background-image: url(http://i19.servimg.com/u/f19/19/20/78/20/header13.png);
       background-color:#000000;
        border: none;
        border-style: solid;
        height: 28px;
      align-text: center;
       }
    td.cat,td.catHead,td.catBottom {
       height: 29px;
       border-width: 0px 0px 0px 0px;
       }
    th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
       font-weight: bold;
      color: rgba(255, 255, 255, 0)
        border: #ffffff;
        border-style: solid;
        height: 28px;
       }
    td.row3Right,td.spaceRow {
       background-color: #000000;
        border: none;
        border-style: solid;
       }
    td.pourcentback {
        background-color : #000000;
        }
    th.thHead,td.catHead {
        font-size: 20px; color : #f3f315
        border-width:0 px 0px 0px0 px;
        }
    th.thSides,td.catSides,td.spaceRow {
        border-width: 0px 0px 0px 0px;
        }
    th.thRight,td.catRight,td.row3Right {
        border-width: 0px 0px 0px 0px;
        }
    th.thLeft,td.catLeft {
        border-width: 0px 0px 0px 0px;
        }
    th.thBottom,td.catBottom {
        border-width: 0px 0px 0px 0px;
        }
    th.thTop {
        border-width: 0px 0px 0px 0px;
        }
    th.thCornerL {
        border-width: 0px 0px 0px 0px;
        }
    th.thCornerR {
        border-width: 0px 0px 0px 0px;
        }
    .maintitle, .maintitle h1{
       font-size: 18px;
        font-family: TrebuchetMS,Verdana,Arial,Helvetica,sans-serif;
       text-decoration: none;
        line-height : 120%;
        color : rgba(255, 255, 255, 0);
       }
    .forumline .row1,.forumline .row2,.forumline .row3,.forumline .row3Right {
       }
    .maintitle h1 {
       margin: 0;
        padding: 0;
        display: inline;
       }
    .gen {
        font-size : 12px;
        }
    .genmed {
        font-size : 11px;
        }
    .gensmall {
        font-size : 10px;
        }
    .gen,.genmed,.gensmall {
        color : #dedede;
        }
    a.gen,a.genmed,a.gensmall {
        color: #dedede;
        text-decoration: none;
        }
    a.gen:hover,a.genmed:hover,a.gensmall:hover{
        color: #dedede;
        text-decoration: underline;
        }
    .mainmenu{
        font-size : 11px;
        color : #ffd700 }
    a.mainmenu{
        text-decoration: none;
        color : #ffd700;
       }
    a.mainmenu:hover{
        text-decoration: underline;
        color : #ffffff;
        }
    .cattitle{
        font-weight: bold;
        font-size: 15px ;
        letter-spacing: 1px;
        color : #f3f315;
    }
    h1.cattitle {
       margin:0;
        padding: 0;
        display:inline;
         }
    a.cattitle{
        text-decoration: none;
        color : #f3f315;
        }
    a.cattitle:hover{
        text-decoration: underline;
        }
    .forumlink{
        font-size: 12px;
        color : #ffff00;
        max-width: 600px;
      margin: 0 auto;
    }
    h1.forumlink{
        font-size: 12px;
        color : #ffff00;
        max-width: 600px;
      margin: 0 auto;
        }
    a.forumlink{
        text-decoration: none;
        color : #ffff00;
        max-width: 600px;
      margin: 0 auto;
        }
    a.forumlink:hover{
        text-decoration: underline;
        color : #ffff00;
        max-width: 600px;
      margin: 0 auto;
        }
    .nav{
        font-weight: bold;
        font-size: 11px;
        color : #ffd700;
        }
    a.nav{
        text-decoration: none;
        color : #ffd700;
        }
    a.nav:hover{
        text-decoration: underline;
        }
    .topictitle,h1,h2{
        font-weight: bold;
        font-size: 11px;
        color : #ffff00;
        }
    div.topictitle {
       display: inline;
      text-alignment:center;
       }
    h2.topic-title {
       display: inline;
        margin: 0 auto;
        padding: 0;
       }
    a.topictitle:link{
        text-decoration: none;
      text-alignment:center;
        color : #ffff00;
        }
    a.topictitle:visited{
        text-decoration: none;
        color : #ffff00;
        }
    a.topictitle:hover{
        text-decoration: underline;
        color : #ff6347;
        }
    .name{
        font-size : 11px;
        color : #FFD700;
       }
    .postdetails{
        font-size : 10px;
        color : #FFD700;
        }
    .postbody{
        font-size : 12px;
        line-height: 18px}
    a.postlink:link{
        text-decoration: none;
        color : #707070 }
    a.postlink:visited{
        text-decoration: none;
        color : #707070;
        }
    a.postlink:hover{
        text-decoration: underline;
        color : #707070}
    .code{
        font-family: Courier,CourierNew,sans-serif;
        font-size: 11px;
        color: #057500;
       background-color: #8fa4b9;
        border: #ffffff;
        border-style: solid;
       border-left-width: 1px;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px}
    .quote{
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: 11px;
        color: #040404;
        line-height: 125%;
       background-color: #8fa4b9;
        border: #ffffff;
        border-style: solid;
       border-left-width: 1px;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px}
    .copyright{
        font-size: 10px;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        color: #ffffff;
        letter-spacing: -1px;
       }
    a.copyright{
        color: #ffffff;
        text-decoration: none;
       }
    a.copyright:hover {
        color: #3DBAD1;
        text-decoration: underline;
       }
    .coloradmin {
        color: #93076d}
    .colormod {
        color: #057500}
    h1.pagetitle {
       display: inline;
       margin: 0;
       padding: 0;
       font-size: 12px;
       color: #ffffff;
       }
    h1.title2 {
       font-size: 11px;
       }
    .secondarytitle,.secondarytitle h2 {
       margin: 0;
       padding: 0;
       color: #ffffff;
       }
    .secondarytitle h2 {
       display:inline;
       }
    .nav h1 {
       display: inline;
       }
    .hierarchy {
       display: inline;
       text-transform: none;
       border: none;
       font-size: 10px;
       }
    .mod-text {
       font-weight: bold;
       }
    img{
       border:0}
    input,textarea, select {
       color : #000000;
       font: normal 11px Verdana,Arial,Helvetica,sans-serif;
       border-color : #ffffff;
       }
    input.post, textarea.post, select {
        background-color : #ffffff;
        }
    input {
        text-indent : 2px;
        }
    input.button {
       background-color : #c0daff;
       color : #000000;
       font-size: 11px;
        font-family: Verdana,Arial,Helvetica,sans-serif;
       }
    input.mainoption {
       background-color : #8fa4b9;
       font-weight : bold;
       }
    input.liteoption {
       background-color : #8fa4b9;
       font-weight : normal;
       }
    .helpline {
        background-color: #cde2ff;
        border-style: none;
        }
    input {
        background-color: #cde2ff;
        }
    button.button2, input.button2 {
       font-size: 0.7em;
       border: 1px solid #BCBCBC;
       width: auto !important;
       padding: 1px 0px;
       font-family: Verdana,Arial,Helvetica,sans-serif;
       color: #ffffff;
       background-repeat: repeat-x;
       background-color: #FAFAFA;
       background-image: url(http://i19.servimg.com/u/f19/19/20/78/20/header13.png);
       background-position: top;
       overflow: visible;
       vertical-align:middle;
       }
    button.button2:hover, input.button2:hover {
       border: 1px solid #3DBAD1;
       color: #494949;
       background-position: 0 100%;
       }
    * html button.button2, * html input.button2 {
       padding-bottom: 0;
       margin-bottom: 1px;
       height: 24px;
       padding-right: 3px;
       padding-left: 3px;
       }
    *+html button.button2, *+html input.button2 {
       height: 24px;
       padding-right: 3px;
       padding-left: 3px;
       }
    *+html button.button2 img {
        vertical-align: middle;
        }
    * html button.button2 img {
        vertical-align: middle;
        }
    button.bbcode {
       border: 1px solid ##ffffff;
       background-image: url(http://i19.servimg.com/u/f19/19/20/78/20/header13.png);
       }
    .select {
       background-color: #FFFFFF;
       border: 1px solid #ffffff;
       position: absolute;
       z-index:100;
       top: 0;
       left: 0;
       overflow: hidden;
       width: 0px;
       }
    .selectHover {
        cursor: pointer;
        background-color: #EEEEEE;
       }
    .select p {
       padding: 4px 6px;
       font-size: 0.7em;
       margin: 0px;
       white-space: nowrap;
       text-align:center;
       }
    .select button {
       padding: 4px;
       font-size: 0.9em;
       margin: 0px;
       background-color: #FFF;
       border: none;
       text-align:center;
       }
    .select button.button2 {
       border:1px solid #ffffff;
       padding: 0px;
       }
    * html .select button.button2 {

       padding-right: 3px;
       padding-left: 3px;
       }

    .select button.button2:hover {
       border: 1px solid #494949;
       color: #494949;
       background-position: 0 100%;
       }
    textarea#text_editor_textarea {
        width: 100% !important;
        }
    iframe#text_editor_iframe {
       width: 100%;
       height: 200px;
       }
    form#quick_reply textarea#text_editor_textarea {
       width: 100% !important;
       height: 100%;
       }
    form#quick_reply iframe#text_editor_iframe {
        width: 100%;
        }
    * html form#quick_reply iframe#text_editor_iframe {
        width: 600px;
        }
    *+html form#quick_reply iframe#text_editor_iframe {
        width: 600px;
        }
    #page-footer .gen strong {
       font-weight: normal;
       }
    @import url("form_ie.css");
       @media print {
       body {
       background-image: none;
       background-color: #fff;
       color: #000;
       }
    table.bodylinewidth span.maintitle {
       display: block;
       text-align: center;
       }
    table.bodylinewidth img#i_logo,.browse-arrows,.noprint,.messaging,.post-options,.poster-profile,img.i_icon_online,table.bodylinewidth .mainmenu,table.bodylinewidth .nav,table.bodylinewidth .gensmall,span.postdetails img,table.bodylinewidth .sig,table.bodylinewidth .catbottom,#info_open {
       display:none;
       }
    td.catHead, .t-title {
       text-align: center;
       }
    table.bodylinewidth .cattitle {
       letter-spacing: normal;
        font-size: 1em;
       }
    .thLeft,.thRight {
       color: #ffffff;
        border: none;
        text-align:center;
       }
    .hr hr {
        visibility: hidden;
        }
    .hr {
       border-top: 1px dotted #ddd !important;
        }
    tr.post td {
       vertical-align: top;
       border-bottom: 1px solid #ccc;
       }
    tr.post td td {
       border: none;
       }
    span.gen {
       display: none;
       }
    }
    ul.abuse {
       list-style: none;
       line-height: 1.5em;
       font-size: 0.9em;
       }
    .rtl-spacer:before {
       content: " ";
       white-space: pre;
       }
    .rtl-spacer:after {
       content: " ";
       white-space: pre;
       }
    .warning {
       color:#ff3333;
       }
    .captcha div.captcha-img {
       float: left;
       margin: 0 1em 0 0;
       }
    .captcha .inputbox {
       margin-top: 0.5em;
       }
    .center {
       text-align: center;
       }
    .right {
       float: right;
       }
    .left {
       float: left;
       }

    /* TGF Clearfix */
    .clearfix:after {
       content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
       }
    *+ html .clearfix {
       min-height: 1px;
       }
    * html .clearfix {
       position: relative;
        height: 1%;
        clear: both;
       }
    #page-footer {
       clear: both;
       }
    #page-footer h3 {
        margin-top: 20px;
        }
    #content-container #left {
       width: 0px;
       margin-right: px;
       }
    #content-container #right {
       width: 0px;
       margin-left: px;
       }
    .module-title {
       font-weight: bold;
       margin: 0 auto;
       text-align: center;
       display: block;
       }
    #frame_chatbox {
       border: none !important;
       }

    /* Chatbox */
    body.chatbox {
       min-width: 550px !important;
       background-image: none;
       padding: 0;
       margin: 0;
       background-color: #3c8fb4;
       }
    #chatbox_members {
       position: absolute;
       top: 30px;
       bottom: 30px;
       width: 180px;
       overflow: auto;
       border-right: 1px solid ;
       }
    #chatbox {
       position: absolute;
       top: 30px;
       left: 181px;
       right: 0;
       bottom: 30px;
       overflow: auto;
       line-height: 10px;
       }
    .chatbox_row_1,.chatbox_row_2,.chatbox_row_3 {
       font-size: 12px;
       }
    #chatbox_footer {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 30px;
       }
    #chatbox_footer table.text-styles {
       float: right;
       }
    #chatbox_footer .text-field {
       float: left;
       }
    #chatbox_footer .chatfootertable {
       margin: 5px;
       }
    #chatbox_header {
       height: 30px;
       background-color: #3c8fb4;
       }
    #chatbox p {
       line-height: 1.2em;
       }
    .chatbox_row_1 {
       padding: 4px;
       background-color: #c0daff;
       }
    .chatbox_row_2 {
       padding: 4px;
       background-color: #cde2ff;
       }
    .chatbox_row_3 {
       padding: 4px;
       background-color: #000000;
       }
    .memberlist_row_1 {
       padding: 2px 2px 2px 10px;
       background-color: #c0daff;
       }
    #chatbox_members .member-title {
       text-align: center;
       padding: 0.5em 0.25em;
       background-image: none;
       font-size: 12px;
       background-color: #000000;
       color : #000000;
       }
    #chatbox_members ul {
       list-style: none;
       margin: 0 0 0 10px;
       }
    #chatbox_members ul li {
       margin: 2px 2px 2px 0;
       }
    #message,#submit_button{
       border-width: 1px;
       }
    .fontbutton {
       padding: 1px;
       cursor: pointer;
       text-align: center;
       }
    .fontbutton_normal {
       background: #E1E1E2;
       }
    .fontbutton_selected {
       background: #BBC7CE;
       border: 1px solid #22229C;
       }
    .fontbutton_clicked {
       background: #959595;
       border: 1px solid #22229C;
       }
    .fontbutton_hover {
       background: #E1E1E2;
       border: 1px solid #22229C;
       }
    #chatbox .user {
       font-weight: bold;
       }

    /* Edit did */
    div#chatbox {
       color: #000000;
       }
    #chatbox_contextmenu {
        background-color: #000000;
        border:1px solid #aaa;
       }
    #chatbox_contextmenu p {
       margin:0;
        padding: 1px 4px;
       font-family: verdana, arial, sans-serif;
       background: #;
       border-bottom:1px solid #777;
        }
    #chatbox_contextmenu p.hover {
        background: #;
        }
    #chatbox_contextmenu p.close {
       background: #ddd;
        padding: 1px;
        font-size: 70%;
        color:#fff;
        background: url(\\\\\\\'\\\\\\\');
        }
    #chatbox_contextmenu p.close img {
        vertical-align: middle;
        }
    #chatbox_contextmenu a {
        color: #;
        text-decoration: none;
        font-size: 70%;
       }
    #chatbox_contextmenu a:hover {
        color: #;
        }
    .fontbutton{
       border:0;
       }
    .sprite-tabs_more {
      background:url("http://2img.net/i/fa/sprite_icons.png") no-repeat scroll -1386px 0px transparent;
      height:9px;
      width:9px;
    }
    .sprite-tabs_less {
      background: url("http://2img.net/i/fa/sprite_icons.png") no-repeat scroll -1327px 0px transparent;
      height:9px;
      width:9px;
    }

    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Forum link alignment

    Post by Ange Tuteur May 4th 2015, 11:50 pm

    Hi @Jerrr,

    Add the following rule to your stylesheet.
    Display > Colors > CSS stylesheet
    Code:
    h3.hierarchy {
      display:block;
      text-align:center;
    }
    avatar
    Jerrr
    New Member


    Posts : 20
    Reputation : 1
    Language : English

    Solved Re: Forum link alignment

    Post by Jerrr May 5th 2015, 12:23 am

    Hi there,

    I'm so mad that it was only three lines of code. Urgh.
    Anyways, thank you SO much! (:

    Thanks again,
    Jerrr
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Forum link alignment

    Post by Ange Tuteur May 5th 2015, 3:59 am

    You're welcome ^^

    Normally to center text, your element either has to have a set width ( 250px for example ), or be a block-level element, such as a <DIV> or <P>. You can also use CSS to display an element as a block, then apply text-align:center; to center the text. Smile

    Topic archived

      Current date/time is November 11th 2024, 2:43 pm