Category List Alignment: Customizing my theme based of water-drop Category List Alignment: Customizing my theme based of water-drop
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

Category List Alignment: Customizing my theme based of water-drop

Started by MadVelvet, August 27, 2010, 11:23:53 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

MadVelvet

August 27, 2010, 11:23:53 PM
Hello,

I'm a bit of a noob but here goes:

I've been customizing the water-drop theme to fit my colors, etc.  I thought great, looks good, time to add categories.

I go home to see how it looks and they category names/descriptions are aligned in the middle.  I have checked my style.css and index template and all looks like how it should be.  I'm just at a lost and turning to the experts for help.

my site is www.madsland.net/gallery so you can see what I am talking about.

test login is: usertest (this does not have admin status, does it need to?)
password: password

How I learn a lot is by viewing page source and inspect element.  When viewing page source it shows:
Quote
<!-- Start standard table -->
<table align="center" width="100%" cellspacing="1" cellpadding="0" class="maintable ">

        <tr>
                <td class="tableh1" width="80%" align="left">Category</td>
                <td class="tableh1" width="10%" align="center">Albums</td>
                <td class="tableh1" width="10%" align="center">Files</td>
        </tr>

        <tr>
                <td class="catrow_noalb" colspan="3"><table border="0"><tr><td align="left"></td><td align="left"><span class="catlink"><a href="index.php?cat=2">Magazines &amp; Articles</a></span>Scans from various print media, like newspapers and magazines.</td></tr></table></td>
        </tr>

        <tr>
                <td class="catrow_noalb" colspan="3"><table border="0"><tr><td align="left"></td><td align="left"><span class="catlink"><a href="index.php?cat=3">Movies, Stage &amp; Television</a></span>Various stills and images from Mads&#039; varied career in movies, stage and television.</td></tr></table></td>
        </tr>

So I go to my style.css to look up tableh1 and it shows:
Quote.tableh1 {
    font-family:  Verdana, Geneva, Arial, sans-serif;
    background : #C0C1D5 ;
    color: #31307E;
    font-weight:bold;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;

I also looked up catrow_noalb:
Quote.catrow_noalb {
    background: #CBD7DE ;
    color : #000000;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;

Then looked up catlink:
Quote.catrow {
    background: #F2F5F7 ;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;

my index.template has this: (I did not include all the closing tags in this quote at the end just to save space)
Quote</head>
<body>
  {CUSTOM_HEADER}
<td align="center">
  <table width="940px" border="0" cellpadding="20" cellspacing="20">
    <tr>
      <td valign="top" style="border: 1px solid #31307E; background-color: #31307E;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="100%" align="center">
<img src="http://www.madsland.net/gallery/images/MadsLandHeader-01.jpg"><br><br>
              {SYS_MENU}<br />{SUB_MENU}
            </td>
          </tr>
        </table>
        <img src="images/spacer.gif" width="1" height="15" alt="" />
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td valign="top">
              {ADMIN_MENU}
              {MESSAGE_BLOCK}
              {GALLERY}
  {CUSTOM_FOOTER}{CREDITS}

I went to theme.php
and I cannot view anything there.

I hope I provided the right information.  I'm pretty new at this but think I'm doing pretty good until this...it seems it should be something so simple.

Thank you for any assistance provided.

MadVelvet

Nibbler

#1
August 27, 2010, 11:33:55 PM
Code Select

table {
    font-size : 12px;
    margin: 0 auto;
    align: center;
}


The "margin" is centering all tables, causing the problem. The "align" is invalid, you may as well remove it.

MadVelvet

#2
August 27, 2010, 11:34:17 PM
Forgot to mention I have cpg1.5.8

MadVelvet

#3
August 27, 2010, 11:37:18 PM
Thanks that fixed my category list alignment but now my center area is aligned left and not centered showing my background on both sides.  Any suggestions? 

Jeff Bailey

#4
August 28, 2010, 12:10:11 AM Last Edit: August 28, 2010, 12:53:17 AM by Jeff Bailey
add
Code Select
margin: 0px auto;
to
Code Select
[s]table {
}[/s]

should work for most browsers.

edit -  ::) was reading to many things at once. Sorry.
Thinking is the hardest work there is, which is probably the reason why so few engage in it. - Henry Ford

MadVelvet

#5
August 28, 2010, 12:28:17 AM
Yes but that's what I just had to remove (see the reply from Nibbler) in order to get my category list alignment right.  I want my category list alignment to be left-aligned but I want my center area in the center.  Is it not possible to have both?

Nibbler

#6
August 28, 2010, 12:47:23 AM
First you need to remove the bad markup: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.madsland.net%2Fgallery%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

You have a <td align="center"> and an </table> in there for some reason. Then you attach an id to the main table in template.html

Code Select

<table id="mymaintable" width="940px" border="0" cellpadding="20" cellspacing="20">


and apply the margin to that

Code Select

#mymaintable {
    margin: 0px auto;
}

MadVelvet

#7
August 28, 2010, 01:07:54 AM
Thank you so much Nibbler, you saved me hours and hours of trying this and trying that .  You all would laugh at me as I design my stuff, not just my coppermine (which has been the easiest by far) but my wordpress and smf forum.  I try and refresh, nope, undo, try this and refresh, nope, undo....hahahahahahaha.  I usually can figure it out by viewing source and inspect element.  I've learned a lot that way.

Anywho I ramble.  Thank you thank you thank you!!!!  This can be marked solved!!!!  :)
Print
Go Up Pages1
User actions