Title: transferring CSS customization from wordpress.com Last modified: August 24, 2016 --- # transferring CSS customization from wordpress.com * Resolved [smgianotti](https://wordpress.org/support/users/smgianotti/) * (@smgianotti) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/) * I just switched from wordpress.com to wordpress.org and installed the Standard Theme that I had been using, but cannot figure out how to transfer my CSS customizations. * On wordpress.com, under appearance and customization there was a CSS editor and I have copied all my edits. However, when I try to paste this into jetpack’s CSS editor or other CSS plug-ins (Simple Custom CSS, WP Add Custom CSS) nothing happens. * Perhaps the format of the CSS code has to be different? Below is a small part of I copied from the wordpress.com CSS editor. * I would appreciate any help! * Shannon * /* Header —————————————————————- */ /* Header Text ———————————————- */ /* site title */ #site-title, #site-title a { color: #357FB5; } * #site-title a:hover { color: #357FB5; } * /* tagline */ #site-description { color: #2978a2; } * #site-title { text-align: center; } * #site-description { text-align: center; } * #site-description { position: inherit; width: 100%; top: 0; display: block; text-align: center; } * .post .thumbnail { background: transparent; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } * .the-tags { display: none; } Viewing 15 replies - 1 through 15 (of 18 total) 1 [2](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/page/2/?output_format=md) [→](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/page/2/?output_format=md) * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970171) * Can you please post a link to your wordpress.org site? It will make it easier to see if the CSS matches the elements on your page. Is your wordpress.com site still up & running? * Thread Starter [smgianotti](https://wordpress.org/support/users/smgianotti/) * (@smgianotti) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970213) * No, my wordpress.com site is no longer running. I do have a screenshot of it with all the CSS customizations which I could email you, if that would help. * I just made the wordpress.org site live so you could see it: [http://www.shannongianotti.com](http://www.shannongianotti.com). * And here is the complete customizations I made below, * Thank you! Shannon * _[excessive CSS removed – [http://codex.wordpress.org/Forum\_Welcome#Posting\_Code%5D](http://codex.wordpress.org/Forum_Welcome#Posting_Code%5D)_ * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970221) * Hmm, that’s weird. Your CSS is there, but for some reason, the CSS for the plugin that you are using comes _before_ the stylesheet for the Standard theme, so the Standard theme’s rules are overriding yours. Every CSS plugin I’ve used places their CSS stylesheet _after_ the theme’s stylesheet. Which plugin do you currently have active? Is it JetPack? * Thread Starter [smgianotti](https://wordpress.org/support/users/smgianotti/) * (@smgianotti) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970224) * Yes, Jetpack is what’s active at the moment. But, I don’t have the CSS customizations in there at the moment. I deleted everything I tried last night. * Thanks for looking into this! * Shannon * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970226) * Post your custom CSS back into JetPack’s custom CSS (**Appearance → Edit CSS**) and let me know when that’s done. * Thread Starter [smgianotti](https://wordpress.org/support/users/smgianotti/) * (@smgianotti) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970270) * Ok, I’ve posted my custom CSS into Jetpack’s Edit CSS. * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970274) * Looks good, you can probably see that your CSS is being applied. For example, the site title is now blue (#357FB5). And if you go to an individual post, the line height on the paragraphs is 25px. The problem right now looks like you have a very sizeable widget in the header area, and I don’t see a sidebar on the right. Is that correct? * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970281) * Site’s looking good, now. Did you accidentally drag a widget into the header area instead of the sidebar, before? * Thread Starter [smgianotti](https://wordpress.org/support/users/smgianotti/) * (@smgianotti) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970283) * Thanks for all your help! I didn’t realize I had to manually customize some of those other things from the dashboard. Looks like everything is almost back to the way it was, except: * 1) I would like the site title and subtitle centered. The CSS edits have it as centered, I believe, but its still on the left. * 2) Also, I would like to increase the height of the “header” to about double what it is. * 3) The photos are not enlarging to the full diameter of the text column. I went back into the posts and made sure “full image” was selected, then I tried expanding the picture (on the “Four Ways…” post to 1307×864 pixels. Still the blog is inset and not the full column width. * Besides these things I think I can figure out how to change the CSS for the title font and subtitle color. * I can’t thank you enough for your help! * Thread Starter [smgianotti](https://wordpress.org/support/users/smgianotti/) * (@smgianotti) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970289) * I’ve been tinkering some more and, I’ve found three more tweaks that I’m stumped on. I’m wondering if I’m missing a something in the concept of doing the CSS customizing. Do these only work if they have the appropriate /*……/ headers before them? * 1) change both the site title and post title font and size (both to NanumGothic, Regular) * I tried these: * /** the post titles **/ h2.posttitle { font-size: 14px; } * – and – (just to see if it worked) * .entry-title { font-family: Quicksand, Helvetica, Arial, sans-serif; font-style: normal; text-transform: uppercase; text-align: center; } * 2) remove the author tag that is below each post title * I tried these: * .sec-authors { display: none; } * – and – * author vcard{ display:none; } * 3) change the link color within the posts * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970297) * > 1) I would like the site title and subtitle centered. The CSS edits have it > as centered, I believe, but its still on the left. * ``` #logo { float: none; } ``` * > 2) Also, I would like to increase the height of the “header” to about double > what it is. * ``` #header { padding: 30px 0; } ``` * Adjust the 30px to whatever value you think looks good (current value is 0). * > 3) The photos are not enlarging to the full diameter of the text column. I > went back into the posts and made sure “full image” was selected, then I tried > expanding the picture (on the “Four Ways…” post to 1307×864 pixels. Still the > blog is inset and not the full column width. * ``` .size-full { width: 100%; } ``` * > 1) change both the site title and post title font and size (both to NanumGothic, > Regular) * This rule needs a hyphen in **posttitle**: * ``` /** the post titles **/ h2.post-title { font-size: 14px; } ``` * That second rule should have worked. * > 2) remove the author tag that is below each post title * ``` .the-author { display: none; } ``` * > 3) change the link color within the posts * ``` .hentry a { color: #ffffff; } ``` * Change **#ffffff** to [whatver color value](http://www.w3schools.com/tags/ref_colorpicker.asp) you wish. * Thread Starter [smgianotti](https://wordpress.org/support/users/smgianotti/) * (@smgianotti) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970306) * Thank you! So close to being done! * The following two rules didn’t work: * Font size: The font looks good now, but the size (post title and site title) did not change with that rule. I have them both set at 8 pxl at the moment and they are much larger. * Links: The rule you sent did change the link within the post title (which I changed, since I didn’t want that link to show), but didn’t change the links within the posts. * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970316) * If you want to change both using the same rule, change this: * ``` h2.site-title { font-size:8px } ``` * to this: * ``` h2.post-title, #site-title a { font-size:8px } ``` * Just be aware that 8px is _very_ tiny. * For the links in a post, can you post a link to a page that has a link inside the post text? It will be easier to see. Thanks. * Thread Starter [smgianotti](https://wordpress.org/support/users/smgianotti/) * (@smgianotti) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970322) * Great! * 1) The code you gave (below) works for the post-title on the home page, but not on the post-page itself. (see: [http://www.shannongianotti.com/four-ways-to-rehab-your-imagination/](http://www.shannongianotti.com/four-ways-to-rehab-your-imagination/)) * h2.post-title a { font-size:8px } * 2) As for links: That same page also has the issues with the links. Three of the links are default blue and the “Read” link has been teal since I made the initial switch over, the comment links are also teal. I set the link color code for teal. * 3) What are the parameters for fonts that can be run for the site title/post titles? I tried NanumGothic works, but I tried replacing it with APPLE SD GOTHIC NEO THIN which didn’t work in the code below. Is it because only certain fonts will run? Where can I go looking for workable fonts? * #site-title { font-family: Apple SD Gothic Neo, thin; font-style: normal; text- transform: normal; text-align: left; } * I’m super thankful for all your help! * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/#post-5970324) * OK, look again at the rule I posted. It should look like this if you want to change the post title and the site title: * ``` h2.post-title, #site-title a { font-size:8px } ``` * > Three of the links are default blue and the “Read” link has been teal since > I made the initial switch over, the comment links are also teal. I set the > link color code for teal. * The reason why those three links are colored blue is that you must have entered them that way when you created the post. Go edit the post, and switch to the Text editor instead of the Visual editor (I’m not sure which one you normally use). If you go down to the first bulleted item, the one that has the **Read** link as well as a link for **listen**, you’ll see something like this: * ```
  • Read or listen to John Keats’s poem “Ode to Autumn.” Read it a second time, slowly, swimming among the images. Then, read it out loud.
    • ``` * So, notice that around the word **listen** is a set of **span** tags, that look like this: * ``` listen ``` * That’s what is giving the **listen** link the blue color. An inline style has a [very high specificity](http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/), so it’s going to be very difficult (although not impossible) to override in your custom CSS. However, the best thing to do is just get rid of the **span** tags( remove the opening and closing tags). Do this for the other two links on the post as well, and then those links should turn teal. In fact, you should think about removing all of the inline style on that page. As I mentioned, inline styles are very difficult to override with CSS in an external stylesheet, so the use of inline styles is highly discouraged. You should be able to add a class to common web elements that you want to style the same, and then write a rule in your custom CSS for that class. * > What are the parameters for fonts that can be run for the site title/post titles? * Back in the early days of the internet, there was just a small set of fonts available known as [web safe fonts](http://www.w3schools.com/cssref/css_websafe_fonts.asp). They are called web safe because the fonts are so basic that they are almost guaranteed to be found on every computer & available to every browser. For example, a font used on an Apple computer won’t be available on an IBM PC, so designing a site using an Apple font wouldn’t look as good on a PC. * Advancements in web technology have made it possible to use external fonts. What happens is that a special link to a stylesheet is included on your page, and the stylesheet has all sorts of information about the font, including where to download the font from. Google has made [a large collection of fonts](http://www.google.com/fonts) available, so Google fonts have become very popular for use on web pages (being free helps a lot). What you do is select the font family that you want to use, and then insert a link to a stylesheet in your site so the browser knows where to get the font. If you decide to use a Google font, let me know and I can provide some more information. Viewing 15 replies - 1 through 15 (of 18 total) 1 [2](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/page/2/?output_format=md) [→](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/page/2/?output_format=md) The topic ‘transferring CSS customization from wordpress.com’ is closed to new replies. ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [customization](https://wordpress.org/support/topic-tag/customization/) * [standard theme](https://wordpress.org/support/topic-tag/standard-theme/) * [wordpress.com](https://wordpress.org/support/topic-tag/wordpress-com/) * 18 replies * 2 participants * Last reply from: [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/transferring-css-customization-from-wordpresscom/page/2/#post-5970396) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics