user-created stylesheet for a table used inside wordpress

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.

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( https://dirtydalerz.com/blog/wp-content/themes/dirtydalerz/style.css );
</style>

so just adding another

<style type="text/css" media="screen">
@import url( https://dirtydalerz.com/blog/wp-content/themes/dirtydalerz/style.css );
@import url( https://dirtydalerz.com/blog/wp-content/themes/dirtydalerz/secondstyle.css );
</style>

is ok?

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?

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).

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).

Great tip! Thanks for it.

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.

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*https://www.yourdomainname/wp-content/name of stylesheet/* where*=( and )

By the way : a really nice looking site

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)..