Custom formatting a page

[kencooperjr]

Using latest WX and WP

Trying to create/format a table on this page. Two questions.

Question 1:

If you notice the page referenced above, you will see a faint line about the two post lists. Where does this come from and how do I get rid of it?

Question 2:

Am editing the page in text mode and have entered the html tags table, tr and td. Added the border=”4″ attribute to both the table and the td tag – does nothing?

Then:

In the Per Page body Class text field on the edit page for this page (same page I am editing) have inserted: postMypage

Under Theme Options –> Main Options –> Fonts & Custom –> Custom CSS Rules I entered: .postMypage {  table, td { border: 4px solid black; !important }}

This does exactly nothing? So question is – how do I add customization to a page and, in particular, how do I put my borders about the table and cells?

THANKS – Ken Cooper

[scrambler]

A few things.

0- using a table for these two columns is a very bad idea, it makes the whole thing non responsive, so when the browser size gets smaller it gets cutoff.

You would be much better of using a two columns div, either using Weaver existing columns classes, or your own. Read below for more on how to do that.
http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5

1- “faint line about the two post lists”  you need to elaborate because I dont see anything there

2- Tables in Weaver are style using CSS which takes precedence over any HTML attribute. So all table styling must be done with CSS, either in a style attribute, or with global rules.

Read more on styling tables (if you insist on using it here) in the weaver II tutorial section below
http://forum.weavertheme.com/discussion/8616/tables-versus-divs-how-to-style-tables-in-weaver

3- .postMypage {  table, td { border: 4px solid black; !important }}

Is Invalid. The proper rule would be
.postMypage table, .postMypage td {border: 4px solid black; !important;}

There is only one set of curly bracket for the properties, and selectors before that (exception for @media rules)
And if you are going to compact several rules by using several set of selector separated by comas, you need the full selector every time (in this case your page class selector).

Finally you should not use Caps in CSS classes I believe it can cause issues on some browsers. SO use postmypage and modify the rule accordingly

If you want to learn more on using the browser developer tool and get reference sites for HTML and CSS, read:
http://forum.weavertheme.com/discussion/1207/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues

Refernce sites at the bottom

[kencooperjr]

Do want to continue t he thread from the previous thread.

I do realize and appreciate the comment made about using 2-columns as opposed to t he table-tr-td  configuration. However, there is another question I need answered and that is how to identify the id and class name so one can customize the CSS for the page.

The ‘code’ for the table (have added another tr) is shown below. Based on this code, assuming I have given enough, what would be the rule to set the borders for the table, round corners, etc. I think what I really need is how to ‘get there’. Your answer has answered some of my concerns – but want to be able to express a ‘path’ to the exact component that needs changing.

I hope this makes sense? THANKS for the help and comments – Ken Cooper

<div id=”content” role=”main” class=”content l-content-lsb m-full s-full sb-float-right”>

<article id=”post-1979″ class=”content-page post-1979 page type-page status-publish hentry”>

<div class=”entry-content clearfix”>

<p>This …

<table>

<tr>

<td>

My …

<p>

<div class=”add_posts”>

<ul>

<li><a href=”http://www.kencooperjr.com/2013/09/13/11sep2013_the_end/”>11SEP2013_The_End</a></li&gt;

…

</ul>

</div>

<div style=”clear: both;”></div>

</td>

<td>

This …

<p>

<div class=”add_posts”>

<ul>

<li><a href=”http://www.kencooperjr.com/2013/10/22/18oct2013_headinghome/”>18OCT2013_HeadingHome</a></li&gt;

…

</ul>

</div>

<div style=”clear: both;”></div>

</td>

</tr>

<tr>

<td>

Following …

<div class=”add_posts”>

<ul>

<li><a href=”http://www.kencooperjr.com/2014/04/06/21mar2014_home/”>21MAR2014_Home</a></li&gt;

…

</ul>

</div>

<div style=”clear: both;”></div>

</td>

<td>

This …

<p>

<div class=”add_posts”>

<ul>

<li><a href=”http://www.kencooperjr.com/2014/12/14/30dec2014-tuesday-home-or-munich/”>30Dec2014 (Tuesday) Home or Munich</a></li>

…

</ul>

</div>

<div style=”clear: both;”></div>

</td>

</tr>

</table>

</div><div style=”clear:both;”></div><!– .entry-content –>

<footer class=”entry-utility-page”>

</footer><!– .entry-utility-page –>

</article><!– #post-1979 –>

[scrambler]

Have you read the thread on styling tables I referenced above

http://forum.weavertheme.com/discussion/8616/tables-versus-divs-how-to-style-tables-in-weaver

Especially

A) Use inline CSS styling with CSS rules in an HTML Style attribute.

and

B) Use classes (for settings that may be shared) or IDs (for unique ones) and custom CSS rules.

As they detail exactly how to apply your style to your table elements.

If there is any part of that tutorial you dont understand, be specific

[Author]

Posts