Jump to content


Photo

Table Border not Showing in Text Widget - With Custom CSS


  • Please log in to reply
10 replies to this topic

#1 tonyrage

tonyrage

    Member

  • Members
  • PipPip
  • 17 posts

Posted 15 January 2012 - 06:57 AM

Hi there, I am trying to include a calendar from another site in a text widget in my sidebar. The other website gave me an iframe code in which the text comes right to the edge of the frame. I tried inserting it into a table with a border that matches the frame background which looks correct when I test the code in a browser, but the border does not show on the blog. I even added some css to my child style.css to no avail. Here is the html:
And here is the CSS I added: table {border: 10px gold;} td {border: 0px solid gray; padding:10px;} th {background-color:#231f20; color:white; padding:10px;} Here is the site: www.shootthecameraman.com/blog/ Thanks!

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 15 January 2012 - 05:24 PM

 <table width=190 bgcolor="#231f20" border=10 bordercolor="#d1ad54">

^ Please remove "bgcolor="#231f20" border=10 bordercolor="#d1ad54" since you're already adding CSS to change the background, border, and border color.

#3 tonyrage

tonyrage

    Member

  • Members
  • PipPip
  • 17 posts

Posted 15 January 2012 - 07:48 PM

I did so, and it did not change anything...

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 15 January 2012 - 07:51 PM

 table {border: 10px gold;}
	td {border: 0px solid gray; padding:10px;}
	th {background-color:#231f20; color:white; padding:10px;}

^ Is this the only CSS you have in the Custom CSS box so far? Can you paste any other CSS you have?

#5 tonyrage

tonyrage

    Member

  • Members
  • PipPip
  • 17 posts

Posted 15 January 2012 - 07:54 PM

This is the style.css file for the child theme. /* Theme Name: Platform Child Description: A Child of Platform Author: admin Template: platform (optional values you can add: Theme URI, Author URI, Version) */ @import url("../platform/style.css"); table {border: 10px gold;} td {border: 0px solid gray; padding:10px;} th {background-color:#231f20; color:white; padding:10px;}

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 15 January 2012 - 08:01 PM

Try giving your table a class like so:
 <table width=190 class="customtable">

For the CSS, try adding this:
 table.customtable {border: 10px gold;}
	table.customtable td {border: 0px solid gray; padding:10px;}
	table.customtable th {background-color:#231f20; color:white; padding:10px;}


#7 tonyrage

tonyrage

    Member

  • Members
  • PipPip
  • 17 posts

Posted 15 January 2012 - 08:13 PM

That did not work either... Is there something in the Platform style sheet that would be interfering. Even though the Child style sheet should supercede it?

#8 minasm

minasm

    Advanced Member

  • Members
  • 40 posts

Posted 16 January 2012 - 05:50 PM

This part;
 /* Default Entry Table */
	table {width: 100%;}
	.hentry table, #comments table {margin-bottom: 1em;}
	.hentry table th, #comments table th { font-weight: normal; text-align: center; padding: .3em;}
	.hentry table td, #comments table td {padding: .35em .6em; text-align: center;}
	.hentry table .label, #comments table .label{text-align:left;}

may be? it is overwriting all my table records:S

#9 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 16 January 2012 - 11:39 PM

You can remove the table code and just add the styling to the iframe itself:

 iframe#widgetPreviewFrame {
	border: 5px gold solid;
	}

or

 iframe#widgetPreviewFrame {
	background: gold;
	padding: 5px;
	}


#10 tonyrage

tonyrage

    Member

  • Members
  • PipPip
  • 17 posts

Posted 31 January 2012 - 07:06 PM

Thanks Kastelic! That worked perfetctly!

#11 tonyrage

tonyrage

    Member

  • Members
  • PipPip
  • 17 posts

Posted 31 January 2012 - 07:22 PM

One more question... The border is great, but the text within the iframe goes right to the edge. I've tried padding but that increases the space between the border and the frame. Any ideas?