bcinelli
Member
Posted 2 years ago #
I have a external style sheet for a table (softball statistics) that I created in conjunction with a purely CSS table I designed, which I want to use on my WordPress website. Currently I have the statistics on its own PAGE within WordPress.
What is the best course of action in using this external stylesheet and the table in my installation of wordpress? Where am I going to call the style sheet from because from what I understand you can't call up a style sheet directly in a page can you?
The coding is great and cleaner and more streamlined then 'old-style' html tables.
Any advice/solution will be greatly appreciated.
my current page where the stats are handled is as follows and the site is SWF.
http://dirtydalerz.com/blog/?page_id=594
jonradio
Member
Posted 2 years ago #
I'm not sure if it is the best solution or not, but I added a @import url(menu.css); to style.css in the WordPress Theme that I was using. "menu.css" is the name of my "extra" stylesheet, which I also stored in the same folder as the style.css of the Theme I'm using.
bcinelli
Member
Posted 2 years ago #
Is that the proper way of doing it?
I already have that linking to my style sheet currently.
<style type="text/css" media="screen">
@import url( http://dirtydalerz.com/blog/wp-content/themes/dirtydalerz/style.css );
</style>
so just adding another
<style type="text/css" media="screen">
@import url( http://dirtydalerz.com/blog/wp-content/themes/dirtydalerz/style.css );
@import url( http://dirtydalerz.com/blog/wp-content/themes/dirtydalerz/secondstyle.css );
</style>
is ok?
bcinelli
Member
Posted 2 years ago #
Also, does it take longer for the page to load (I know it's only mere milliseconds but I'm trying to work on my load time) if I have the style sheet I only need for one table keep being loaded each time you access my site.
Why not just copy the contents of the table stylesheet and then paste them into your theme's style.css?
bcinelli
Member
Posted 2 years ago #
I just dont' want anything to conflict though. You think it will?
@charset "UTF-8";
/* CSS Document */
table#softball {
border: 2px solid black;
font-family: calibri, 'serif';
width: 400px;
table-layout: fixed;
border-collapse: collapse;
}
th {
background: green;
border: 1px solid white;
font-size: 14px;
font-weight: bold;
color: white;
}
td {
border: 1px solid white;
color: white;
font-size: 14px;
text-align: center
}
#softball td:first-child {
text-align: left }
col#Player {
width: 30%;
background: black;
}
col#Avg {
width: 8.75%;
background: black;
}
col#AB {
width: 8.75%;
background: black;
}
col#H {
width: 8.75%;
background: black;
}
col#Double {
width: 8.75%;
background: black;
}
col#Triple {
width: 8.75%;
background: black;
}
col#HR {
width: 8.75%;
background: black;
}
col#R {
width: 8.75%;
background: black;
}
col#rbi {
width: 8.75%;
background: black;
}
Having it in a separate stylesheet won't prevent conflicts. Check your theme's stylesheet for any table styles (unlikely since most themes don't use tables).
jonradio
Member
Posted 2 years ago #
One word of warning from one who has "been there, done that": if you change style.css and choose Automatic Upgrade for the next version/release of WordPress, your customized style.css will be replaced by the standard one for the new version of WordPress, losing all your changes.
Admittedly, I'm using the Default Theme. Not sure what happens with other Themes.
adiant: This only happens with the default and classic themes (rename these theme folders and the theme names in style.css to prevent it).
jonradio
Member
Posted 2 years ago #
Great tip! Thanks for it.
bcinelli
Member
Posted 2 years ago #
lol .. i have also BTDT .. hence why i wound up modifying my theme extensively to only have it cleared away on an upgrade. I wound up making the default and naming it differently so it never happens again.
The5sisters
Member
Posted 2 years ago #
I cannot see why you should have to go to all that trouble.Why can you not just call for your extra css for that one page only or pasting it directly into that page as html unless of course the whole themechanges with that page.You can call for an individual stylesheet that is uploaded into the wp-content folder quite easily.Just look at the source code of pages that use css websites to see the 'phrasing' .You may have to use url*http://www.yourdomainname/wp-content/name of stylesheet/* where*=( and )
The5sisters
Member
Posted 2 years ago #
By the way : a really nice looking site
bcinelli
Member
Posted 2 years ago #
Thing is i didn't want to have it embedded into the page. Because each year I update the table and put a new one up. I want them to all have the same characteristics and using a stylesheet that all of them call to makes it so much easier.
Was just wondering if I could call the stylesheet for the one page somehow or when the table is shown.
@The5sisters - thanks i appreciate the compliment.
So why not do this in the theme header?
Here's a normal call to the stylesheet..
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
Why not add something below that like..
<?php if(is_page('YOURPAGENAME')) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/newfile.css" type="text/css" media="screen" />
<?php } ?>
Which simply says if the page is "YOURPAGENAME" (put your actual page name there) then include this stylesheet (newfile.css in the example)..
