Community Forums › Forums › Archived Forums › Design Tips and Tricks › Microsoft Word Table Styling
Tagged: word table
- This topic has 5 replies, 2 voices, and was last updated 11 years, 3 months ago by csbeck.
-
AuthorPosts
-
January 11, 2013 at 8:53 am #11207venugopalsghMember
Hi..
I have bought Decor theme and installed it in my Flute Music Charts website.
In my website there will be a lot of Microsoft word tables. After I installed the theme, the tables in the pages are not looking subtle and they are not in sync with the style and feel of the Décor theme.In another website of mine where i have installed Dandelion theme from themeforest. In that theme the word tables take the styling of the theme and look very nice.
Here is the example:
This is the page where Decor is installed http://www.bansurimusic.com/?page_id=227
The Same page where Dandelion theme is installed
http://www.flutegoa.com/about-me/If anyone here knows what changes I have to make in the Decor child theme so that Word tables look better please let me know.. would be really great and helpful for me.
Thank you
VenugopalJanuary 11, 2013 at 9:17 am #11212csbeckMemberYou will need to use some general styling of your tables. I would presume that your themeforest theme had some styling in the theme for tables and Decor might be missing this.
CSS styling site - http://www.w3schools.com/css/css_table.asp - great place to get started with your table styling.
Best of luck! Chris
January 11, 2013 at 9:45 am #11231venugopalsghMemberThank you!
Is is possible for you to tell me more specifically ? What I need to add and where to add so that it applies for the whole website.
January 11, 2013 at 9:54 am #11238csbeckMemberI would open the w3schools page (linked above) in one window (use it as a reference if necessary).
In a separate window I'd open your site's WP admin. You should then go to Appearance/Editor (on the left) and make sure you're editing the style.css file (bottom right style.css should be highlighted). Then I would search through the css to make sure there isn't some style associated with table or tbody. You could modify those, or just create your own custom table, tbody, tr and td styles by going to the bottom of your style.css file and creating new styles for that. Those styles on the bottom of your styles.css file will overwrite ones higher. In-line styling, as your site has, is going to overwrite any styling you do in the style.css file. I don't think I saw any really in-depth styling in your in-line table so you should be OK.
So in your style.css file, I would suggest adding the following at the bottom:
table {border: 1px solid #D8D8D8;
border-collapse: collapse;
margin-bottom: 20px;
margin-top: 20px;border-spacing: 0;
}
table td {
border: 1px solid #D8D8D8;
padding: 5px 5px 5px 13px;}
I got these styles from the site you said that you liked.
Hopefully this helps.
ChrisJanuary 11, 2013 at 12:39 pm #11291venugopalsghMemberHi Chris!
Thanks a lot.. It worked perfectly fine and I got some idea how things work around!
I have also added the below mentioned codes in addition to the codes you gave me.
table td:hover{
background-color: #F5F3FA;
}table{
................................
...................................
font-family: 'Palatino Linotype', Georgia, "Times New Roman", serif;
font-size: 15px;
}
Thanks again.. 🙂
January 11, 2013 at 2:07 pm #11312csbeckMemberYou're very welcome. I'm glad it helped!
Chris
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.