How far can I customize CSS with the upgrade?
-
I’m a beginner at writing code and I found a css table generator and I’m using the theme Broadsheet. For the 2014 FIFA World Cup standings I want to add a schedule and the standings through a table instead of a text widget, and I got this through the generator:
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #3f7f00;-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{}
.CSSTableGenerator tr:nth-child(odd){ background-color:#457f0b; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{
vertical-align:middle;border:1px solid #3f7f00;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #427c07 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #427c07), color-stop(1, #3f7f00) );
background:-moz-linear-gradient( center top, #427c07 5%, #3f7f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#427c07″, endColorstr=”#3f7f00″); background: -o-linear-gradient(top,#427c07,3f7f00);background-color:#427c07;
border:0px solid #3f7f00;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Georgia;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #427c07 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #427c07), color-stop(1, #3f7f00) );
background:-moz-linear-gradient( center top, #427c07 5%, #3f7f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#427c07″, endColorstr=”#3f7f00″); background: -o-linear-gradient(top,#427c07,3f7f00);background-color:#427c07;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}It doesn’t work on the customization option, and I don’t know how to customize it to fit in a certain area of the home page.
Could I use some advice?
Thank you!
The blog I need help with is: (visible only to logged in users)
-
Hi there,
Can you point me to the page where you have the HTML code embedded for the form? The CSS will only apply to the table if you add the class to the opening div tag as shown here:
<div class="CSSTableGenerator" >That basically tells the CSS to operate on that table. I wasn’t able to find a table inserted on your site.
-
Thanks! But yeah so the thing is, I can go and “customize” the site and practice writing some CSS to see if it works, and I added the opening div tag before all that code and nothing shows up. I also tried other code, and I’m not sure, though I looked it up, how to customize the on a certain page either.
And since the theme doesn’t have any tables given anywhere, if I write code for a table, would it show up somewhere on the page? Or does everything have to follow the layout of the theme?
I’m really lost, I probably should’ve started learning how to write css/php/html.Thanks!
Jessica
-
Hey Jessica!
So, first, in order to use custom CSS, you’ll need to upgrade to the Custom Design upgrade shown here:
http://en.support.wordpress.com/custom-design/
Until you purchase that upgrade, any customizations you make will only be seen in the Customizer (Appearance -> Customize), not in the live version of the site.
Second, with regards to the CSS you’re trying to use, there are two parts to this equation:
- The CSS styling in the CSS section of your site
- The HTML code in the body of the page
It sounds like you were putting the HTML code (the div tag) in front of the CSS. It actually needs to go in the body of the page where you want the table to live. Basically, the HTML code creates the content. The CSS just tells the HTML code how to look. That’s where the class=”CSSTableGenerator” comes into play. That is a specific class name for the CSS to affect.
I believe you used this to generate the CSS:
http://www.csstablegenerator.com/
Is that correct? If so, you should find a corresponding HTML code. You’ll need to paste that code in the Text Editor of the post or page where you want the table to appear. Does that make more sense?
-
Oh I get it now! But where I can add a table is limited — I wanted a scoreboard on the home page as a pop-up sidebar, for example, like this: http://worldcup.usatoday.com/
But there’s no option to add that on the homepage anywhere, so does it require using wordpress.org with plug-ins and all? Just curious, how do big newspapers like the NY Times or USA Today do it? I know it seems like a silly question, but I was just wondering if there was some more flexibility with a certain theme or just another platform like WordPress.org.Thank you very much!
-
Hi Jessica,
You’re correct in that you would need to either place the table on a separate page, in a Text Widget in your sidebar, or in a Text Widget in your footer. Larger sites like USA Today and the NY Times are able to do a bit more customization with their site including some coding on the backend and installing plugins (both of those things aren’t allowed at WordPress.com).
Plugins and additional freedom for customizations are both features of WordPress.org self-hosted blogs. You wouldn’t get that added flexibility with another theme at WordPress.com. However, even on a self-hosted site, a customization like that would likely require a good bit of coding. In all likelihood, it would require more than just enabling a plugin.
Let me know if that helps to answer your question!
-
Oh okay thanks, I see how it works, hopefully I can transfer to wordpress.org soon, without too much hassle, and use plugins. Maybe the code I’m looking for can be generated or found online somewhere, or I could ask/hire someone who knows more about it. I might have a question if I can’t find it online, and thanks for all the help!
-
Not a problem Jessica! There appears to be a few plugins that offer soccer standings:
https://wordpress.org/plugins/soccer-info/
You will want to do a bit of research just to make sure you find the plugin you want.
Please let me know if you need anything else!
-
Thanks for all the help and the plugin! I’m doing more research and reading tutorials.
Thank you,
Jessica
-
- The topic ‘How far can I customize CSS with the upgrade?’ is closed to new replies.
WordPress.com Forums 