CSS <td class='tbl1 forum_name'>

Discussion in 'HTML, CSS & JavaScript' started by Costa1337, Mar 17, 2017.

  1. Costa1337

    Costa1337 Aspirant

    34
    13
    +6
    Hello Admins!

    I'm currently making a website using PHP-Fusion as CMS system.
    Everything is working like a charm, but I want to change the font-size of my forum index links.

    aimage.prntscr.com_image_ba9eda388ecf401fa51b2fc686bb35f5.png

    So after doing some research It seems that <td class='tbl1 forum_name'> is the ones that needs to be styled to large my font size.

    Now I'm wondering how I should specify it in my CSS. Because there's a space between tbl1 & forum_name it's kinda hard to know how to style that table in css.

    As you can see in the CSS file there's no tbl1 forum_name mentioned yet. So I'm just wondering what I should write down there to style the td class? If i change the tbl font size it will go for all the tbl classes on my website. I just want to specify it for the forum only

    Code:
    body {
        background-image: url('images/back.gif');
        font-family:Verdana,Tahoma,Arial,Sans-Serif;
        font-size:15px;
        padding:0px 0px 0px 0px;
        margin:10px;
        background-color: #34353B;
    }
    
    /* General page style */
    .bodyline        {background: #34353B;color:#D7DCE9;border:1px solid #3F414A;}
    a            {color:#CEC6A4; text-decoration:none;font-size:10px;}
    a:hover        {color:#9BAE75; text-decoration:none;}
    a.side        {color:#CEC6A4; text-decoration:none;font-size:10px;}
    a:hover.side    {color:#9BAE75; text-decoration:none;}
    a.white        {color:#BCC0C9; text-decoration:none;font-size:10px;font-weight:bold;}
    a:hover.white    {color:#9BAE75; text-decoration:none;}
    form            {margin:0px 0px 0px 0px;}
    hr            {height: 0px; border: solid #CCCCCC 0px; border-top-width: 1px;}
    hr.side-hr        {height: 0px; border: solid #CCCCCC 0px; border-top-width: 1px;}
    td            {font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:20px;}
    pre            {font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:9px;}
    .alt            {color:#ADA899;}
    .white-header    {font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:10px; color:#EFEFEF;background-color:#999386;
                padding:4px; border-top:#191928 1px solid; border-bottom:#191928 1px solid;}
    
    .cellpic        {font-size:10px;font-weight:bold; color:#DBDBDB; padding:0px 8px 0px 8px;
                background-image:url(images/cellpic_nav.gif);background-repeat:repeat-x;}
    
    .footer        {font-size:9px;font-weight:normal; color:#DBDBDB; padding:3px 8px 0px 8px;
                background-image:url(images/bot_bar_back.gif);background-repeat:repeat-x;}
    
    .stats        {background: none; COLOR: #669900; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
    
    .full-header    {font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:10px; color:#EFEFEF;background-color:#999386;}
    .button        {font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:10px; color:#BB9742;background-color:#3A3D45;
                border:1px #191928 solid;margin-top:2px;}
        
    .textbox        {font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:10px; color:#D7DCE9;background-color:#3C3F47;
                border:1px #191928 solid;}
    .main-body        {font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:11px; color:#D7DCE9; background-color:#43464E; padding:3px 4px 3px 4px;}
    .side-body        {background-image:url(images/back.gif);font-size:10px; color:#A3A6AA; padding:4px 4px 6px 4px;}
    .side-border-left {width: 170px;}
    .side-border-right {width: 170px;}
    .main-bg        {background-color:#34353B;}
    .border        {border-width:0px 1px 1px 1px;border-color:#191928;border-style:solid;}
    
    .news-footer    {font-size:9px;font-weight:normal; color:#FFFFFF;background-color:#30333D; padding:4px 4px 4px 4px;}
    .capmain        {font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:10px;font-weight:bold;
                border-width:1px 1px 1px 1px;border-color:#191928;border-style:solid;
                color:#B78E00; height:24px; padding:2px 2px 2px 2px;}
    
    .copyrights        {background: none; COLOR: #FFFDF0; FONT-SIZE: 10px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
    .title         {background: none; COLOR: #ffffff; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
    .block-title    {BACKGROUND: none; COLOR: #C3C1B3; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica}
    .head-title     {background: none; COLOR: #DBDBDB; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
    .date            {background: none; COLOR: #BCC0C9; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
    .capleft        {width:2px;height:20px;}
    .capright        {width:2px;height:20px;}
    .scapmain        {font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:10px;font-weight:bold; color:#D7DCE9; height:19px; padding:0px 2px 0px 2px;
                border-width:1px 0px 1px 0px;border-color:#191928 #191928 #191928 #191928;border-style:solid;}
    img { border: 0px }
    .center, *[align="center"] { margin: 0 auto;}
    .news-category {border : 0 none;float : left; margin-left : 0; margin-right : 5px; margin-top : 3px; margin-bottom : 0; }
    .tbl-border        {background-color:#191928;}
    .tbl            {font-size:11px; padding:3px 4px 3px 4px;}
    .tbl1            {font-size:11px; color:#D7DCE9; background-color:#43464E; padding:4px;}
    .tbl2            {font-size:11px; color:#C3C1B3; background-color:#43464E; padding:4px;}
    
    /* Forum header*/
    .forum-caption    {font-size:10px;font-weight:bold; color:#DBDBDB;background-color:#181C27; height:24px; padding:0px 4px 2px 4px;
                background-image:url(images/cellpic3.gif);background-repeat:repeat-x;border-width:1px 1px 1px 1px;border-color:#191928 #191928 #191928 #191928;border-style:solid;}
    
    /* Quote blocks */
    .quote        {color:#A0B0CF;background-color:#3C3F47; padding:2px;    margin:0px 20px 0px 20px; border:1px #191928 solid;}
    
    /* Voting Poll */
    .poll            {height:12px; border:1px #333 solid;}
    .comment-name    {font-weight:bold; color:#E7E4DA;}
    
    /* This is for the Shoutbox */
    .shoutboxname    {font-weight:bold; color:#ffddaa;}
    .shoutbox        {color:#CFCFCF;}
    .shoutboxdate    {font-size:9px; color:#ADA899;}
    .small        {font-size:9px; font-weight:normal;}
    .small2        {font-size:9px; font-weight:normal; color:#ADA899;}
    .side-small        {font-size:10px; font-weight:normal; color:#fff;}
    .side-label        {background-color:none; font-weight:normal; color:#DBDBDB; padding:2px;}
    #spf {position: absolute;left: -10000px;};
    
    
    .pagenav {
      padding:4px;
    }
    .pagenav span {
      margin:2px;
      padding:2px 4px;
    }
    .pagenav a {
      color:#CEC6A4;
      margin:2px;
      padding:2px 4px;
      text-decoration:none;
    }
    .pagenav a:hover {
      color:#9BAE75;
      margin:2px;
      text-decoration:none;
    }
    
    .admin-message {
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 11px;
        text-align : center;
        color : #D7DCE9;
        border : 1px solid #000;
        padding : 3px 4px 5px 4px;
        margin-bottom : 5px;
    }
    
    #navigation ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    
    #navigation h2 {
        font-size: 12px;
        color: #DBDBDB;
        margin: 0;
        padding: 2px;
    }
    
    #navigation a {
        display: block;
        color: #CEC6A4;
        padding: 2px;
        text-decoration : none;
    }
    
    #navigation a:hover {
        color: #9BAE75;
        text-decoration : none;
    }
    * html #navigation ul li{
        height: 1%;
    }
    I know the properties for font-size: 20px; or more. But I just need to know how I need to name it EG. nameoftable{ font-size: 40px;}

    Thanks for the help anyways!

    King regards,

    Costa
     
  2. insaneadmin

    insaneadmin Participant

    64
    13
    +40
    If you look at the bottom of your second image you can see that it is already telling you the declaration that you would use. ;)
    td.tbl1.forum_name

    In your css this is what is controlling the display of that section:
    .tbl1 {font-size:11px; color:#D7DCE9; background-color:#43464E; padding:4px;}

    I am quite bad at explaining things so will let others do that or you could always have a look at the W3Schools website.
     
  3. Costa1337

    Costa1337 Aspirant

    34
    13
    +6
    I changed the font-size you gave me to 40px; changed in appeareance:

    aimage.prntscr.com_image_6898569adc65410a9e517c92e28c3f94.png

    I really need to add a new rule in css I think!

    Still looking for help.
     
  4. insaneadmin

    insaneadmin Participant

    64
    13
    +40
    I mentioned the .tbl1 in the css to inform of what was likely causing your sizing, changing its size will mean everything within elements that have that class will take it on as you have found.

    Now that you've expanded the td element it's clearer to see what needs done. :)

    To set the forum title link font size add the below and add your size to it.
    td.tbl1.forum_name a { font-size: 40px; }

    Handy thing about Chrome's Dev Tools is you can add and play with the declarations that are shown in the Styles tab to test things out before implementing them. :cool:
     
  5. Costa1337

    Costa1337 Aspirant

    34
    13
    +6
    This fixed the thing, thanks man :)
     
Verification:
Draft saved Draft deleted